O'Reilly logo

jQuery Mobile: Up and Running by Maximiliano Firtman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Fireworks Theme Editor

If you are a user of Adobe Fireworks, you have the jQuery Mobile Theme editor at your disposal. If you have version CS5.1, you can download the free plug-in: “Fireworks CSS3 Mobile Pack” from http://labs.adobe.com.

When you have the pack installed, open Fireworks and select Commands jQuery Mobile Create New Theme. You will get a new image that looks like Figure 7-7.

Adobe Fireworks can also be used to create jQuery Mobile themes

Figure 7-7. Adobe Fireworks can also be used to create jQuery Mobile themes

Tip

If you don’t have Adobe Fireworks, you can download a 30-day trial version from http://adobe.com/go/fireworks.

This image acts like a template that we can change, while maintaining the same instance names. The image is divided into six pages that we can see upon opening the Pages panel (Windows Pages), as we can see in Figure 7-8.

If you open the Pages panel, you will find the general designer and one page per color swatch

Figure 7-8. If you open the Pages panel, you will find the general designer and one page per color swatch

The first page is called Global Assets and Styles and includes global styling and icons for all color swatches, as seen in Figure 7-9. Then, we have pages from a to e for which to define and change color swatches, as seen in Figure 7-10.

The global configuration page allows us to change icons and global settings

Figure 7-9. The global configuration page allows us to change ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required