Category: Creating Themable Designs

You can quickly adjust the CSS attributes that apply globally to all swatches under the “Global” tab that appears in the left pane. Here you can adjust the font family, active state colors, corner radii, icons, and shadows (see Figure 7–15). Figure 7–15. Global Theme Settings Next to the “Global” tab are the swatch specific tabs (a-z).…

ThemeRoller4 is a web-based tool that helps automate the process of generating new CSS-based themes for jQuery Mobile. This is a very helpful tool because it allows you to make color scheme updates in the left pane and preview the results in the right pane within an actual jQuery Mobile layout (see Figure 7–14). Figure 7–14. ThemeRoller ____________________…

The jQuery Mobile theming framework allows designers to quickly customize or re-style their user interface. In this section, we will see how we can manually create our own custom swatches. As reviewed previously, the default jQuery Mobile CSS document is broken into two sections: a theme section and a structure section. For this exercise we…

Themes are applied to components with the following order of precedence: Figure 7–10. Content height not 100% Figure 7–11. Content height 100% (ch7/min-height.html)CopycopyHighlighthighlightAdd NotenoteGet Linklink

Components can also inherit the themes of their parent containers. Theme inheritance is beneficial in two regards. First, it makes the styling process more efficient for designers because we can rapidly set a theme at a high level (page container) and that theme will cascade down to all sub-components, saving valuable time. Secondly, it keeps…

If you do not add data-theme attributes to a page, jQuery Mobile will apply default themes for all page containers and form elements (see Table 7–1). For instance, if we create a basic jQuery Mobile page without explicitly setting its themes, our elements will fall back to their default theme or inherit the theme of their parent container. In Figure…

The jQuery Mobile CSS file is always the first asset we import in the head element (see Listing 7–2). This file contains the default structure and theming for jQuery Mobile applications. Take a moment and explore the contents of this file with your favorite editor. The jQuery Mobile CSS document is broken into two sections: a…

In many examples we have already seen how we can use the data-theme attribute to apply alternate themes to our page containers (page, header, content, footer) and form elements. For instance, we can take an un-themed page (see Figure 7–1) and re-style it with a different header and list theme (see Figure 7–2) with the simple addition of data-theme attributes (see Listing…