Editing Themes
The theme is just a CSS file. That means we can create the CSS file from scratch or edit one using any text editor. We need to understand how jQuery Mobile defines elements and classes to know what to change.
jQuery Mobile uses classes to define styles. Every widget in the HTML markup will be converted to an element with some class definitions. Therefore, our UI work will be just defining styles for these classes.
Tip
Remember that in the content area of a page, we can have any HTML that we want, so we can still create our own markup with CSS styles apart from the framework CSS.
Every class is defined including a ui
prefix and the color swatch as a suffix,
ui-<name>-<color-swatch>
.
Therefore, for example for defining the buttons, the class name is
ui-btn-a
for a
color
swatch and ui-btn-c
for
c
color swatch. Then, from the HTML using data-theme
or another attribute we will define
which color swatch will be applied.
Table 7-1 shows the typical class names we can edit and define in a theme CSS file.
Table 7-1. Classes that we can define in the theme file to customize the UI (<x> defines the color swatch)
Class name | Description |
---|---|
| Headers, footers, and other bars |
| Buttons in normal state |
| Buttons in hover state |
| Buttons in pressed state |
| Buttons in active state (all swatch colors) |
| Page body |
| Links |
| Icon for buttons and other widgets |
| Applies to all the controls that have rounded corners ... |
Get jQuery Mobile: Up and Running now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.