Theming with jQuery ThemeRoller

jQuery Mobile features a very robust and powerful theming system. You can easily control the look of the application down to the most miniscule of details. The framework even allows you to have various color swatches that you can switch between on-the-fly as well. Before we look at ThemeRoller, maybe we should talk briefly about jQuery themes.

The basics

When you download jQuery Mobile, you get five color swatches, A–E. These swatches were created with a great deal of attention paid to readability and usability, and range from high-contrast (swatch A) to the lowest contrast (swatch E). In addition to these differing contrasts, the themes are also arranged so that the most prominent areas of the page, such as the headers and buttons, get more contrast compared to areas such as the footer. When you create your own theme, you should adopt this model of thinking as well.

Note

For more information on jQuery theming, we highly recommended checking out one of the many books on the subject published by Packt Publishing.

Rolling into your own theme

Now that we understand what a theme is, let's look into a very powerful theming tool rolled out by jQuery Mobile—ThemeRoller. ThemeRoller is a web-based application that started as an extension for jQuery UI. Through this web application, you can create a theme with three swatches in a matter of minutes. Writing CSS code is not required; everything can be created through the use of point-and-click and dragging. While you are developing the theme, you can also use the real-time preview functionality to immediately see your creation in action. ThemeRoller also integrates in Adobe's Kuler product that allows you to see some premade color selections and add them to your current ThemeRoller color selection.

To get started, let's go to the ThemeRoller website at: http://themeroller.jquerymobile.com. Once you get there, you'll see a screen similar to the following screenshot:

The screen can be broken up into four parts:

• Inspector
• Preview
• Color
• Tools

Inspector

This is the core of the ThemeRoller system. Here is where the magic happens, and you create your theme. The Global tab, which is the default tab, is where you control the font of your theme, how rounded the corners are, and the box shadow, and even change the icons. These options are universal across all the swatches in the current theme. The Active State accordion will also give you a current global snapshot of all the swatches as you make changes via the Color menu, as shown in the following screenshot:

The three lettered tabs going across the top (A, B, C) with a + sign, are your color swatches. Here you can control the color of every aspect of the theme, from the header bar to the buttons. You may create up to 26 swatches for one theme.

Note

One very important piece of information. By default, you have the three swatches. You are required to have three swatches in a theme, even if you only need one. So, if you decide that you just need one swatch, you will need to duplicate the swatch two times (or simply leave the other two swatches alone) to satisfy this requirement. If you create three new swatches, the theme that will be downloaded will have the CSS for all these 3 swatches.

To make a new swatch outside A, B, or C, simply click on the + sign or the Add Swatch button at the bottom of the Preview area.

Preview

The Preview section of ThemeRoller is where you will see the theme take shape in real-time, as you make your changes in the Inspector area. You can see three areas that currently all look the same. These three panels represent your swatches. Since by default we have three swatches, we have three panels here. When you add another swatch, the Preview area will add another screen to represent the new swatch:

These panels show several of jQuery Mobile's components, so you can see how your color and style choices affect the vast majority of the framework, and can fine-tune the theme to your liking.

Color

Here you will find several color options along with 20 empty boxes. These empty boxes hold the last twenty colors you have used in this theme. Underneath the color choices, you will see two sliders: LIGHTNESS and SATURATION, as shown in the following screenshot. Lightness controls the light and dark tones of the on-screen color options, while saturation controls how vibrant the color is. To read more about Adobe Kuler—also called as Adobe Color CC—visit https://color.adobe.com/create/color-wheel/:

One of the things that make this tool so easy to use is while you can use the Inspector area to add in colors via hex codes and the like, you can actually drag a color from this toolbar and drop it onto the controls in the Preview area, and I mean any control. If you want to change the background of a button, drag the color down and drop it on the button. And if you want to change the background of your lists, just drag-and-drop. This tool is that awesome!

Tools

The final part of ThemeRoller is the Tools toolbar. This toolbar offers several features that you can use during the theming process. Starting from the left, these are explained:

The following is a description of the options present in the Tools toolbar:

• jQuery Mobile Version 1.4.2: Here you can change the jQuery Mobile version that is loaded in ThemeRoller. This way, if you're working on an older version, you can still go back and theme it.
• Undo/Redo: This works much like the undo and redo functionality you are accustomed to.
• Inspector off: This inspector is not to be confused with the Inspector component of this tool. This inspector, when turned to on, will allow you to inspect any of the widgets in the Preview area. When you inspect an item by clicking on it, the widget will highlight with a blue outline and the corresponding entry in Inspector will expand so you can see the properties of it.
• Download: This allows you to download the theme you are currently creating.
• Import: This button will let you import a previously created theme to edit.
• Share: Here you can get a generated URL that you may send out to folks to see what you've done so far. This is a great asset when others need to approve your theme or you need some help with it.

Creating a theme

Now that we've looked at what this program can do, let's put it to use and create a theme that we will apply to the project we created in the previous chapter.

When you start to create a theme, you have two paths you can take. You can create from scratch and just start making changes after the page loads up or you can import a previously created theme. Since it is fairly straightforward when editing an imported theme, we will look at creating one from scratch.

In this method, we'll simply start changing colors and options to our heart's content. To get started, let's make some global changes. Make the following edits in the Global tab of the Inspector:

• Font Family:
  • Font: arial,sans-serif
• Corner Radii:
  • Group: 0.3em
  • Buttons: 1.5em
• Box Shadow:
  • Opacity: 45
  • Size: 5px

Let's discuss these changes briefly. We are making arial the default font, and we're making the border of the groups a little more crisp but making the buttons a lot rounder. Then finally we are making our elements have a greater shadow, giving them a 3D illusion.

Now we are going to add some color to swatch A. Let's start first by changing the background color and dragging the tan color, the fifth color over from the right on our color selector (#c7b299), and dropping it on the background of swatch A. Now drag the blue, 12th from the right (#29abe2) and drop it on the body element of the swatch. This will also change a few of the other elements that are linked to this color as well. That's fine. Now drag the lighter blue that is just to the left of the blue we just picked (13th from the right and #33ccff) and drop it on the buttons. Again you'll see some additional items change color. So far, your swatch A should look as shown in the following screenshot:

Those blue links are a bit hard to read on that blue background, so let's change that. Click on the swatch A and expand the Link accordion. You'll see Link Color with a + sign off to the right. If you click the + sign, you change the color for hover, active, and visited links. For now, let's change Link Color to #f0eb94. Now our screen swatch should look as shown in the following screenshot:

So we now have a theme with a light brown or tannish background (hex value #c7b299) with radio, checkbox, and active buttons that have a light blue background (hex value #33ccff) with black text (hex value #000000). For the body, we have another blue background (hex value #29abe3), white (hex value #ffffff) text, and yellow links (hex value #f0eb94). If you wish, you can see the theme we just created; visit http://themeroller.jquerymobile.com/?ver=1.4.2&style_id=20140417-38.

Now that we have some changes done, let's go ahead and download the theme and load it into our project.

Click on Download and you will be prompted with a screen that tells you how to use this theme in your project, as well as a prompt to name the theme. When we download the theme, we will be given two CSS files: a compressed one and an uncompressed one, and these files are to be used in the same fashion that the regular jQuery Mobile CSS files are used. The compressed minified (.min) version is recommended for production use and the uncompressed file is to be used for development.

After you have named the theme (we named ours Chapter2), click on Download and save the ZIP file to your computer. After it downloads, unzip it and copy the themes folder over to your chapter 1 project's root directory. Now open up Aptana Studio 3 and if you haven't worked with it since the last chapter, it should load your previous chapter automatically.

Open up index.html and add the following line just before the main jQuery Mobile CSS file:

<link rel="stylesheet" href="themes/Chapter2.min.css" />

Your code should now look similar to the following code:

<link rel="stylesheet" href="themes/Chapter2.min.css" />
<link rel="stylesheet" href="http//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

Look down the code to roughly line 18 where we have <ul data-role="listview" data-insert="true" data-piderthem="b"> and change it to <ul data-role="listview" data-insert="true"> so that we remove the B swatch. Load up your project in your browser and you should see the new theme in action.

Tip

Theming, the traditional way

When you download jQuery Mobile, you get the CSS for the included theme. If you are so inclined, you can load up all the CSS files and hack away until your dream theme is created; the use of ThemeRoller is not required!