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:



2 comment(s) so far...
I tried this using VS 2012 update 3 but it didn't work completely. It seems that there is now another css file called msls-dark.css that overrides the styles in dark-theme.css. I tried importing msls-dark into themeroller but get an error. Do you know how to change the latest vs themes using themeroller? Thank you.
By Fabian on
10/16/2013 4:07 AM
|
@Fabian Sorry I don't know.
By Michael Washington on
10/16/2013 4:08 AM
|