Nov 23

Written by: Michael Washington
11/23/2012 7:02 PM 

The Visual Studio LightSwitch HTML Client uses JQuery Mobile and it is compatible with http://jquerymobile.com/themeroller/. This article is covering information that is contained in Beth Massi’s LightSwitch HTML Client Tutorial - Contoso Moving. However, that tutorial is currently only available in a Microsoft Word document not a web page. The information is also available at this link, but  MSDN documentation has to be translated into several languages so it avoids screen shots. Therefore we will cover the information here.

The Application Before

We will use the Contoso Moving application from Beth’s tutorial. This is the completed application (it takes about 20 minutes to get the application to this point):

Get The Current Theme

To get the current theme, we first switch to File View.

We open the Default.htm page and see that it is using the theme in the dark-theme.css file.

Open up the dark-theme.css file and copy the contents.

 

Using ThemeRoller

To use ThemeRoller, go to: http://jquerymobile.com/themeroller/

Switch to version 1.1.1 (or whatever version of JQuery Mobile that is in the Default.htm file of the LightSwitch website).

Click on Import.

Paste in the contents of the dark-theme.css file and click Import.

You can now design the theme. You drag the little color blocks and drop them on the mock up of the sample application.

When you are done, click the Download button.

Give the theme a name and click the Download Zip button.

Download the .zip file and un-zip it.

Right-click on the Content folder and select Add then Existing Item.

Select the theme.

Update the default.html file to point to the new theme.

The Application After

When we run the application it has a new theme: