Customizing Jquery Mobile Theme

In MVC 4 Mobile Project, JQuery Mobile comes with built-in theme A - E that is ready to use. There are cases you want to add or cusomize theme to suite your design or upgrade to the latest version. Follow the steps below to customize your theme.

How to Customize jQuery Mobile Theme

1. Open your browser and go to jQuery Mobile Theme Roller. When prompted, click the Get Rolling button. Theme Roller will give you initial themes that you can play around.
2. Click the Import or Upgrade button. Be sure you select your target jQuery Mobile version in the version drop down in the toolbar.

3. Open the jquery.mobile-X.X.css and copy the content into the Import Dialog. Then click Import button. This will load the theme in Theme Roller designer. The text in the header is the name of the theme.
   

4. From the theme roller designer, you can select the theme and modify its attributes.
5. After modifying the interface, click the Download Theme Zip File button in the toolbar to download your theme.

6. Enter the name of your theme and click Download Zip button.
7. Now you have your new theme. To apply it in your site, just overwrite the jquery.mobile-X.X.css file with the one you just downloaded.
8. Click F5, it should reflect your new theme.

There are cases that you want to apply your own theme filename say "mytheme.css", to do apply this, just remove the existing jquery.mobile-X.X.css file and its min, then copy your new theme in the same folder including the minified version. Be sure you also change the CSS link in your layout or master page to point to the new theme.

How to Download the Default Theme using the Theme Roller

JQuery Mobile comes with default theme. This is the theme included when you create mobile project in Visual Studio. To download the default theme, just follow the steps above, but on step #3 instead of copying the content from the existing jquery css file just click the Import Default Theme found in the upper right of the Import Dialog and proceed to step #5 to download the theme.

The Theme Roller supports Version 1.0 and 1.1, be sure you selected the right theme version before importing the theme. If you want to upgrade the theme to newer version, just click the new version you want your theme to upgrade. You can find the version dropdown at the upper left of the Import Theme dialog.

Rock On!