by Michael Dominic

Created

January 24, 2012

In this post let’s generate the jQuery CSS and sprites from the skinned jQuery templates. There are two options available to export the required assets.

  • Export both CSS and sprites at one go.
  • Export Sprites or individual swatch CSS.

Export both the CSS and sprites

Select Commands > jQuery Mobile > Export Theme to generate the swatches for all the pages along with the sprites. The CSS file with all the swatches along with the Sprites is exported to the desired location.

Export a specific swatch or sprite individually

Select Export Current Swatch in the jQuery Mobile Theme Preview panel.

The CSS exported for an individual swatch consists of classes related only to a single swatch page. A jQuery page can consist of as many swatches as required. This command is particularly helpful in cases where you already have the webpage built using default jQuery Mobile swatches and you are interested in including few additional swatches (x,y,z,etc.,) for special cases.

Modify and export sprite images

  • Select the “Export Sprites” option to export the sprites to a specific location.

This option can be used when you want to modify and export only the sprite images. In the example provided, I wanted 2 back buttons-a yellow and a red. So, I deleted one of the sprite images that wasn’t in use and replaced it with another red back button.

 

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 Greg - 1:48 PM on January 27, 2012  

    I have recognized a bug in Adobe Fireworks CS5:

    When I want to export a selected slice and save it on my computer, sometimes the software simply doesn’t save the damm file!

    I have to delete the slice, create an other slice, put it in the same place, and then export…

    Tired of it, especially when I don’t even realize that Fireworks didn’t overwrite the existing jpg or png file…

    …and then I am woundering in Dreamweaver why the hell my change didn’t take effect…