You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: page/jquery-mobile/theme-roller.md
+7-4
Original file line number
Diff line number
Diff line change
@@ -27,10 +27,13 @@ The default theme includes 5 swatches that are given letters (a, b, c, d, e) for
27
27
28
28
Most theme changes can be done using ThemeRoller, but it is also fairly simple to manually edit the base swatches in the default theme and/or add additional swatches by editing the theme CSS file. Just copy a block of swatch styles, rename the classes with the new swatch letter name, and tweak colors as you see fit.
The easiest way to create custom themes is with the ThemeRoller tool. It allows you to build a theme composed of up to 26 swatches, download a the newly created CSS file, and use it in your project.
33
35
36
+
34
37
### Creating the Theme swatches
35
38
36
39
The [ThemeRoller](http://jquerymobile.com/themeroller/) allows users to create their own theme through an easy to use drag and drop interface. By default, ThemeRoller offers three swatches (a, b and c). You can use the offered default colors, the Adobe kuler colors, or create your own. You will create your theme by dragging the chosen color onto the chosen element in the swatch of your choice. You can add more swatches by pressing the '+' sign near the 'A', 'B', and 'C' tabs, in the left hand-side menu.
@@ -39,19 +42,19 @@ You can further edit your swatch from the menu. For example, you can expand the
39
42
40
43
Here are two examples of theme swatches created, the first one with the default colors and with the kuler colors:
Once you are satisfied with the various swatches that you have created in your theme, you can download this theme to be able to start using it in your project. You will simply need to press the 'Download theme zip file button', and enter the name of your theme in the popup window. Then, press the 'Download Zip' button on the download popup window, see below:
The theme gets downloaded on your local machine as a zip file. This contains an `index.html` file, and a `themes` folder. The `index.html` file is an example of how you can now se your theme. The `themes` folder contains your theme CSS files, and the icons that are used by jQuery Mobile.
53
56
54
-
To start using your theme, you can either start from the provided `index.html` or start from scratch. As exaplained in the theme download popup window, all you need is to add your theme to the head of your page before the jquery.mobile.structure file, like this:
57
+
To start using your theme, you can either start from the provided `index.html` or start from scratch. As explained in the theme download popup window, all you need is to add your theme to the head of your page before the jquery.mobile.structure file, like this:
0 commit comments