Tab Header Styling in LightSwitch HTML Apps

Tabs Style in LightSwitch HTML App

Tabs Style in LightSwitch HTML App

Overview

The default appearance of the tab headers in your Cloud Business Apps and LightSwitch HTML Apps can be customized to make them look more appealing and looking a lot more obvious to the end-users.

This post shows you which CSS classes and attributes to change to achieve tab headers that look like retro card index tabs.

Examples and Samples

This is the style of tab headers that we will show to create.

Rounded Corner Tabs Styling

Rounded Corner Tabs Styling

Some simply rounding of a corner can give a card index file type appearance.

Casrd Index File Style Tabs

Card Index File Style Tabs

The CSS styling customizations required can be made in one place that is then picked up by all screens and pop-up dialogs. Here is a similar styling in another app but with a more rounding to blend in with the apps style.

Round Tab Headers

Round Tab Headers in a Pop-up Dialog

You can see the visual impact readily. Clearly you can use any HTML5 CSS styling that you like once you have access to the classes and elements. The simplest way to do this is to override some of the CSS styling by editing the ‘user-customization.css‘ file located in the HTML Client ‘Content‘ folder.

user-customization.css in solution explorer

user-customization.css in solution explorer

At the top of this file you can add a section to change the styling of your project’s tab headers. Here is the first example:

msls-screen-tab css class

msls-screen-tab css class

The CSS classes involved are:

  • msls-screen-tab
  • msls-screen-tab-active
  • ui-btn-inner

In this case the border-top-right-radius is setting the rounding effect. The CSS attributes needed will vary based on the complexity of your apps style sheets. In this example the existing style sheets have no border rounding.

In the second sample, where the app’s border styling is already rounded, a few more attributes need to be overridden for the full effect.

msls-screen-tab complete border rounding

msls-screen-tab complete border rounding

In this case the border top left radius continues to be inherited from the main style sheet and so matches the apps other visual elements, such as buttons. The top right border is given more rounding to extenuate the visual effect of a card index header. To finish the look, the apps default rounded styling is overridden in the bottom border corners.

You can experiment with other attributes from font properties to background effects.

Conclusion

A simple way to add a bit of card index style to your tab headers. Not all Cloud Business Apps and LightSwitch HTML Apps need to look the same.

Advertisements

2 responses to “Tab Header Styling in LightSwitch HTML Apps

  1. Thank you for this, much appreciated. Just started my journey with LS and I am looking forward to seeing more from LS and Xpert360.

  2. Pingback: Tab Header Styling in LightSwitch HTML Apps | Dinesh Ram Kali.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s