In This Topic
Using jQuery Mobile Themeroller to roll your own theme is both simple and intuitive. All you have to do is drag colors from the color-picker to the desired section of the swatch. Once you've downloaded and saved your new theme, follow these directions to apply it to your application.
- In the Solution Explorer, select Show All Files to display the hidden files in your application.
- Locate the Content folder and right-click to display the list. Select Include in Project.
- Right-click the Content folder again and select Add | Existing Item from the list.
- Browse to locate the file which contains your custom theme, and select the minified theme file. Click Add to add the file to your application.
- Add the following reference to the <head> </head> tags of your application. Make certain that the theme name references the name you gave your theme:
To write code in Source View
<link rel="stylesheet" href="~/Content/mycustomtheme1.min.css" type="text/css" />
- Select the swatch you'd like to use in your application and set the ThemeSwatch property. Your markup will resemble the following:
To write code in Source View
<cc1:C1AppView ID="C1AppView1" runat="server" ThemeSwatch="g">
- Press F5 or start debugging to run your application. Note that your custom theme has been applied to your application.
