LightSwitch HTML Theme Headers
Some sample screens with standard jQuery header formatting.
Headers, Footers and Toolbars
Here is a LightSwitch HTML client screen sporting the 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.
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.
To make the header bar styled as expected comment out the line:
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.