Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Customizing the UI with CSS Files
One very good option for generating custom styles for the HTML client is by using ThemeRoller (see Figure 5), a free online tool that easily generates custom CSS styles based on the jQuery Mobile requirements. But that's not all! ThemeRoller allow you to import an existing CSS file and edit it. This is an important feature because you can import one of the built-in themes and create a custom version of it, while ensuring that size and other requirements are addressed correctly.
)
Figure 5 ThemeRoller for jQuery Mobile.
To understand how this technique works, go back to Visual Studio. In Solution Explorer, double-click either light-theme.css or dark-theme.css in the Content folder. When the file is open in the code editor, select the whole file and copy it to the clipboard. Now move to ThemeRoller and click the Import button in the upper-right corner (use Figure 5 as a reference). Paste the content of the CSS file into the pop-up (see Figure 6) and click Import.
)
Figure 6 Importing a LightSwitch theme into ThemeRoller.
The ThemeRoller designer now shows the various HTML controls as they look with your imported theme. To make your edits, use the palette at the top of the page to find the colors you want; then drag them onto the theme elements. Use the toolbar on the left side of the screen to make further changes (for example, changing the color of text items). Figure 7 shows an example.
)
Figure 7 Customizing the theme.
You can also edit multiple themes concurrently, by clicking the Add Swatch link that you get when the page is first opened. When ready, click the Download button. ThemeRoller will ask you to specify a name for the custom theme and will save it as a .zip file on your disk. Among the others, files of your theme are made of the name you supplied, plus the .css and .min.css extensions (for instance, CustomTheme.css and CustomTheme.min.css). You can simply copy both files into the Content folder of your LightSwitch HTML project and edit the default.htm file as you did previously with built-in themes. Figure 8 shows a simple example, but with a little more effort you can obtain very appealing results.
)
Figure 8 A sample custom theme applied to the HTML client.
The user interface isn't the only piece of the HTML client that can be customized. The next section shows how to implement a feature that is not available out of the box, so you can take it as a reference for other customizations.