by Michael Dominic


January 20, 2012

Preview your design in a browser before finalizing a design. Individual themes can be previewed in the jQuery mobile theme preview panel. All the swatches created in the template can be previewed at one go using the option to preview in a browser.

In the earlier blog, we learnt how to modify swatches and include additional swatches. You can download a copy of the template with modified assets here. The steps to preview the revised jQuery template are:

  • Open the jQuery template “gotham_project” in Fireworks and browse to the swatch page “g” in the Pages panel.

  • Select Windows > Extensions > jQuery Mobile Theme Preview, to preview a single theme inside the Fireworks workspace.

  • The Preview panel appears and displays a sample webpage with the current swatch applied to it.

  • To preview all the swatches along with the sprites inside a browser, select Commands > jQuery Mobile > Preview Theme. The following screenshot shows swatch “a” that was modified in the first blog.

Click the tabs to preview the respective themes.

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


  • By Linus - 12:36 AM on February 26, 2012  

    The modified template asset file link is not active.