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 nameDescription

ui-bar-<x>

Headers, footers, and other bars

ui-btn-up-<x>

Buttons in normal state

ui-btn-hover-<x>

Buttons in hover state

ui-btn-down-<x>

Buttons in pressed state

ui-btn-active

Buttons in active state (all swatch colors)

ui-body-<x>

Page body

ui-link-<x>

Links

ui-icon-<x>

Icon for buttons and other widgets

ui-corner-all

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.