You are here:   Blog
Register   |  Login

LightSwitch News

Nov 23

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

image

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):

image

image

image

Get The Current Theme

image

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

image

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

image

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

 

Using ThemeRoller

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

image

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

image

Click on Import.

image

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

image

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

image

When you are done, click the Download button.

image

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

image

Download the .zip file and un-zip it.

image

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

image

Select the theme.

image

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

The Application After

When we run the application it has a new theme:

image

image

image

Tags:
Categories:

2 comment(s) so far...


Gravatar

Re: Theming Your LightSwitch Website Using JQuery ThemeRoller

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
Gravatar

Re: Theming Your LightSwitch Website Using JQuery ThemeRoller

@Fabian Sorry I don't know.

By Michael Washington on   10/16/2013 4:08 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 

Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation