Skip to Main Content
jQuery Mobile: Up and Running
book

jQuery Mobile: Up and Running

by Maximiliano Firtman
February 2012
Beginner to intermediate content levelBeginner to intermediate
272 pages
6h 20m
English
O'Reilly Media, Inc.
Content preview from jQuery Mobile: Up and Running

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 ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

jQuery Mobile

jQuery Mobile

Jon Reid

Publisher Resources

ISBN: 9781449331085Supplemental ContentErrata Page