A final spray paint

This chapter, ‘A final spray paint’, explains global styling and branding.

Built-in schemas

LightSwitch HTML applications come with two global color and styling schemas: the default light theme and a darker variant.

Switching themes is done by opening the default.htm page again, and editing the links to the following two stylesheets as explained in the preceding HTML comment.

    <!-- Change light-theme-2.0.0.css and msls-light-2.0.0.css to dark-theme-2.0.0.css and msls-dark-2.0.0.css respectively to use the

         dark theme.  Alternatively, you may replace light-theme-2.0.0.css with a custom jQuery Mobile theme. -->

    <link rel="stylesheet" type="text/css" href="Content/light-theme-2.0.0.css" />

    <link rel="stylesheet" type="text/css" href="Content/msls-light-2.0.0.css" />

The Add Edit Customer screen using the built-in dark theme.

Custom JQuery Mobile themes

Did you notice that HTML comment though?

Alternatively, you may replace light-theme-2.0.0.css with a custom jQuery Mobile theme.

It is also possible to deviate from the built-in themes by using a custom JQuery Mobile theme.  The amount of CSS expertise this takes is absolutely zero, as JQuery Mobile has an online tool called the ThemeRoller.  This demonstrates the advantages of relying on existing open source frameworks instead of rolling your own: you get bugfixes, upgrades and tooling like this awesome ThemeRoller for free.

To create your own theme, simply copy the contents of light-theme-2.0.0.css from the Contents subfolder of the HTML project.  Next, open http://jquerymobile.com/themeroller and find the Import button at the top.  Paste the CSS into the dialog that appears and the LightSwitch theme should be loaded into the ThemeRoller.

Feel free to fiddle as much as you would like until the style matches your corporate brand, or favorite sports team colors.

Creating a custom JQuery Mobile theme

Once you’re satisfied, invert the import process by clicking the Download button at the top to the Contents folder of your project, then referencing it from the default.htm page intead of the default light theme.

    <!--<link rel="stylesheet" type="text/css" href="Content/light-theme-2.0.0.css" />-->

    <link rel="stylesheet" type="text/css" href="Content/Syncfusion-blue.min.css" /> 

Creating a custom JQuery Mobile theme, and thus LightSwitch theme, can be developed in a matter of minutes, however the art of designing a good theme is well beyond the scope of this book (and the skillset of the author).

Application with black and blue theme

Adding a company logo

LightSwitch HTML applications use two logos which can both be found in the Images subfolder of the Content folder of your HTML client project: user-splash-screen.png and user-logo.png.  The former will be visible while the application is loaded, the latter is displayed at the top left of every Browse screen.

Both images can and should be replaced with your real company logo by simply changing the resource itself. 

Additionally, I personally often find that the footer (the command bar at the bottom) takes up a little bit too much space if you only put a couple of commands on them, so I often tweak it to include a fancy logo.

To do this, open up the user-customisations.css file again and append the following CSS:

.msls-footer {

    background-image: url(http://www.syncfusion.com/Content/en-US/Home/Images/syncfusion-logo.png);

    background-repeat: no-repeat;

    background-size: contain;

}

Application with custom user-logo.png and additional footer styling