ThemeRoller

ThemeRoller⁴ 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

____________________

³See www.westciv.com/tools/gradients/ or http://gradients.glrzad.com/.

⁴ See http://jquerymobile.com/themeroller.

Swatch and Global Settings

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). Here you may add, edit or delete a swatch from your theme (see Figure 7–15).

Preview Inspector and QuickSwatch Bar

To make it even easier to build custom themes there are two unique tools at the top of the preview panel: Preview Inspector and the QuickSwatch Bar.

The Preview Inspector is a toggle that can be either “On” or “Off” (see Figure 7–16). With the toggle “On”, clicking on an element in the preview pane will automatically show its editable attributes in the left pane. This will be a valuable timesaver when you need to quickly edit styles.

Figure 7–16. Preview inspector and QuickSwatch bar

The QuickSwatch Bar is a spectrum of colors that appears to the right of the Inspector (see Figure 7–16). This is a powerful tool that allows you to drag and drop any color onto an element in the preview page or onto a color attribute in the left pane. Below the QuickSwatch bar are two sliders to adjust the lightness and saturation of your color pallet. Additionally, the most recent selected colors will be shown to the right of the color spectrum for quick reuse.

Adobe Kuler Integration

It can be challenging when you need to create a color pallet from scratch. To help simplify this process, ThemeRoller has Adobe’s Kuler¹ integration built-in (see Figure 7–17).

Figure 7–17. Adobe’s Kuler App

Kuler is a site that allows people to create, share, and rate color pallets. To see the color pallets that are available in Kuler click the “Adobe Kuler” link that appears above the QuickSwatch Bar. When the Kuler app opens, a search filter appears in the left pane that allows you to filter by latest, popular, rating, or custom search. When you find a color of interest, simply drag and drop the color onto an element in your preview pane.

Getting Started

For comparison purposes, I am going to create a red accent swatch in ThemeRoller to see how this experience compares to the manual swatch we created in the previous section. In this exercise, I am going to override jQuery Mobile’s default “e” swatch with the new red accent swatch. In ThemeRoller, to update an existing theme the following steps are necessary:

1. In ThemeRoller, import an existing theme by clicking the “Import” link in the upper left corner (see Figure 7–18). For this exercise I am going to import and modify jQuery Mobile’s default theme.Figure 7–18. Import Existing Theme
2. After the theme is imported, identify the swatch to modify. For this step, I am going to modify the default “e” swatch.
3. Next, find an appropriate base color for our red accent swatch. We can find an appropriate red color in either the QuickSwatch Bar or Kuler integration tool.
4. After finding an appropriate base color we can now update the elements in our preview pane with the chosen color. For example, I am going to style the header and all elements with a deep red accent color.
5. In the preview pane, make any necessary adjustments. For instance, you may want to adjust the colors slightly or add subtle effects with background gradients. As expected, ThemeRoller makes the editing and preview process much more efficient compared to the manual approach!
6. After you are comfortable with the layout of the new theme, you can download the CSS of the theme by clicking on the “Download Theme” link in the upper left corner of ThemeRoller (see Figure 7–19).Figure 7–19. Download Theme
7. We can now begin referencing the new theme in our application (see Listing 7–14 and its related screenshot in Figure 7–20). Again, to help simplify the management of the custom themes it is recommended to load the structure file and your custom themes separately.Listing 7–14. ThemeRoller custom theme import (ch7/custom2.html)

<head>
  <meta charset="utf-8">
  <title>Custom Theme</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel=stylesheet href="css/theme/custom-theme9781430239666.css" />
  <link rel=stylesheet href="css/structure/jquery.mobile.structure.css"/>        
  <script type="text/javascript" src="jquery-min.js"></script>
  <script type="text/javascript" src="jquery.mobile-min.js"></script>
</head>

<div data-role="dialog" id="delete">
    <div data-role="content" data-theme="c">
        <span class="title">Are you sure?</span>

        <a href="#home" data-role="button" data-theme="e">Delete</a>
        <a href="#home" data-role="button" data-rel="back">Cancel</a>
    </div>
</div>

____________________

⁵See http://kuler.adobe.com.