by Michael Dominic

Created

January 11, 2012

The jQuery Mobile theme Skinning feature in Fireworks includes a template with default sprite images and a set of swatches. This extension lets you modify default sprites and swatches in the template. You can create additional swatches by duplicating an existing page and customizing it. The swatch name is inherited from the page name in the exported CSS.

Let’s jump in and create a new jQuery Mobile Theme in Fireworks (CS5 and later versions).

  • Download and install the CSS3 Mobile Pack.
  • Select Commands > jQuery Mobile > Create New Theme

This command creates a jQuery template consisting of five default swatch pages (a,b,c,d and e), a global styles/assets page and an instruction page.

You can modify the default theme by making the necessary changes to the default swatch pages and the sprites page according to design/branding requirements. To create additional swatches, duplicate an existing swatch page.

  • To duplicate a swatch page, open the Pages panel, right-click the swatch page, and select the “Duplicate Page” option.
  • After duplicating the page, rename the page to the swatch name that will be used in the exported CSS. jQuery suggests that you use one of the 26 alphabets(a-z).

Modifying and updating existing templates

 Let’s look at an example where we’ll be modifying one of the default swatches in the template and including an additional swatch.

  • Create a jQuery template in Fireworks by selecting Commands > jQuery Mobile > Create New Theme. You’ll see a new jQuery template created in Fireworks as shown in the following screenshot:

  • Open the Pages panel. Observer that the first page named “Global Assets and Styles” is followed by 5 pages named a-e. Page “Global Assets and Styles” includes the default sprites and other global styles such as roundness, active button color, icon background, etc., which are used across all the swatches. Pages a-e are the default swatches provided in the template.

 

  • Let’s modify swatch ‘a” Click on the swatch page ‘a’ and modify the assets present on the canvas. You can modify the colors, change text styles, apply gradient, add roundness, apply effects such as drop shadows, or make other modifications as desired. You can see the modified swatch page “a” in the screenshot shown below:

  • Let’s add additional swatch pages. To do this you duplicate an existing swatch page. Right-click the swatch page and select the duplicate page  option as shown in the following screenshot:

 

  • The swatch name is inherited from the page name. To rename the page, right-click the duplicate page and select Rename Page. Since jQuery recommends that we use one of the alphabets, let’s rename our swatch page to “g”.

  • We’ll now modify the swatch page as we did for the swatch “a”. The following screenshot shows the modified swatch page “g”.

 

  • Let’s modify jQuery sprites that we’ll be using in our jQuery webpage. Browse to the page “Global Assets and Styles” in the Pages panel and change the color of the sprites. Global styles such as roundness, background color for the icons,etc., have also been modified. In the following screenshot, you can see the modified sprites and global styles present in the template. Global styles such as roundness, links, etc., are used across all the swatches.

  • You can now save a copy of the file at your desired location by clicking on File>Save option.

Download CSS3 Mobile pack from here.

Article on Creating jQuery Mobile Websites themes in Fireworks using CSS3 Mobile Pack on Adobe Developer Center.

Share on Facebook

COMMENTS

  • By Web Design - 1:14 AM on November 27, 2012  

    Thanks, very useful tutorial! :) Is there a way to make these templates responsive?