The CSS file that is part of the jQuery Mobile library has five theme swatches. To get technical for a moment, all five of these swatches are built into a single CSS file. They are named a, b, c, d, and e. Each of these theme swatches provides a different, mobile-friendly (high contrast) color scheme for page backgrounds and font colors.
What this means is that, in a nutshell, you don't apply styling to jQuery Mobile pages by editing the CSS as you would for a normal web page. Instead, you change the HTML to apply one of the five theme swatches to any element on your page.
Isn't it a bit constricting to be limited to five theme swatches? Yes. But we'll solve that problem in Chapter 9, Customizing Themes with ThemeRoller, by creating our own custom theme swatches. First, let's get comfortable applying theme swatches.
What are "themes" in jQuery Mobile, exactly? The jQuery Mobile CSS file has built-in themes: a, b, c, d, and e. Again, these are not individual CSS stylesheet files; they are themes (sometimes referred to as swatches) within the CSS file. And each of these themes has a different color scheme.
You define which jQuery Mobile theme is applied to any element by using the data-theme property in HTML5. You can assign a theme swatch to any selected element with the jQuery Mobile Swatches panel.
View the panel by navigating to Window | jQuery Mobile Swatches. Click on any element in your page, and click on a swatch to assign that color scheme to the element. This works with Live view toggled to on, by the way.
You can handcode theming. For example, to apply theme e to a page with a div ID of page, use this code:
<div data-role="page" id="page" data-theme="e">
Or to take a second example, if you wish to apply theme a to a content element on a page, use this code:
<div data-role="content" data-theme="a">
Because so much of the formatting in jQuery Mobile pages relies on the central CSS file that is part of the jQuery Mobile library, your options for defining custom CSS are quite limited. The CSS file that makes jQuery Mobile pages work is highly complex, with hundreds of CSS styles. Editing that stylesheet file can potentially undo the whole package and render your jQuery Mobile page dysfunctional.
If you are a high-level CSS coder, you can append your own CSS styles to the file provided as part of the jQuery Mobile package. But again, a high level of customization is available by using custom jQuery Mobile themes—something we'll explore in Chapter 9, Customizing Themes with ThemeRoller, of this book.
That said, if you do want to "go under the hood", here is a bit of advice on creating your own CSS styles for a jQuery Mobile page:
You can identify and edit the
divtag's styles—mostlyclassstyles—to reformat content containers and other objects.You can identify and edit element (tag) rules in the CSS dialog. For example, you can redefine the heading and paragraph tags.
In applying both of the preceding methods, you can draw on and apply the techniques explored in Chapter 2, Using HTML5 for Page Structure, except that you have to additionally take into account that many objects (
classstyles) in the jQuery Mobile page have specific rules for each of the five themes.
With these three bits of advice, readers who are experts at CSS coding might want to create their own CSS styles to enhance those provided as part of the jQuery Mobile pack.
