Using Default Theme Swatches to Style Pages & Elements - Exercise
Using Default Theme Swatches to Style Pages & Elements
Duration: 15 to 20 minutes.
In this exercise, you will use the default jQuery Mobile theme to style pages and elements.
- Open ThemeFramework/Exercises/swatches.html in a file editor.
- Add a listview to the #home page; style it with swatch "b" as shown:
- Style #page2 with swatch "b". Add a button, linking to the #home page, at the bottom of #page2; style this home button with swatch "a". The result should look like this:
- Add a form to #page3 with a text input and a set of three checkboxes: style the text input as "a" and the checkboxes as "b":
#home page, we add
data-theme="b" to the listview.
#page2; note how the page elements (those not otherwise explicitly styled) inherit the swatch color. The button at bottom gets a class of
We style the individual form elements on
#page3 with various swatch letters to produce the desired visual look.