VS2013 LightSwitch HTML Themes – Headers

LightSwitch HTML Theme Headers

New Screens in Office Azure Dark Theme

New Screens in Office Azure Dark Theme

Some sample screens with standard jQuery header formatting.

Headers, Footers and Toolbars

Here is a LightSwitch HTML client screen sporting the default light theme.


Auto-Tile Menu Default Light theme

Then here is a HTML client application with a theme called ‘Orchard’. Notice the correct rendering of the header after adjusting msls-light-2.0.0.css and msls-2.0.0.js for swatch support. The LightSwitch implementation does not use the JQuery Mobile header classes by default.

LightSwitch HTML Client drag and drop

LightSwitch HTML Client Orchard theme drag and drop list items

The default Microsoft LightSwitch msls-dark-2.0.0.css and msls-light-2.0.0.css style sheets have a definition to override the msls-header.ui-bar background style and set it to ‘inherit‘ from the body color.

msls-header.ui-bar background styles

msls-header.ui-bar background styles

To make the header bar styled as expected comment out the line:

background: inherit;

The header bar colour will then be set by your jQuery Mobile theme and swatch.

See this blog article for the menu template: LightSwitch HTML Screen Template – Auto-Tile Menu

See this blog article for sample themes: jQuery Mobile Themes suitable for LightSwitch Apps


We take you through all the shortcuts and tweaks to give style to your LightSwitch HTML applications and Cloud Business Apps! This article shows how to tweak the header bar style.


Failed upgrades, unloadable projects, old extensions, AIDE for LightSwitch will be there to help you through! Xpert360 consultants have real-world experience of reconstruction and resurrection of corrupt projects. Contact us if your need help troubleshooting your LightSwitch projects.


Company information: Xpert360 Ltd, founded in 2009, based upon three decades of IT experience, is an Independent Software Vendor and Custom Solution Provider based in the United Kingdom.

Xpert360 Lightning” and “AIDE for LightSwitch” are trademarks of Xpert360 Ltd, copyright 2012 – 2013.


4 responses to “VS2013 LightSwitch HTML Themes – Headers

  1. Pingback: Guide to VS2013 LightSwitch HTML Themes | Xpert360 Ltd Development Blog

  2. Pingback: Dew Drop – March 3, 2014 (#1734) | Morning Dew

  3. Pingback: jQuery Mobile Themes suitable for LightSwitch HTML Apps | Xpert360 Ltd Development Blog

  4. Pingback: LightSwitch Community and Content Rollup–March 2014 (+//build/) - Visual Studio LightSwitch Team Blog - Site Home - MSDN Blogs

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 )

Connecting to %s