Tiggzi Docs > Documentation > App Builder > Working with themes

Working with themes

Using default themes

Tiggzi comes with a number of default themes, including the default jQuery Mobile theme. All the themes in Tiggzi, including custom themes are based on jQuery Mobile themes.

You can see all the available themes under Themes folder in Project view:

To apply a theme to all the pages in the app, go to Project > App settings. Select a Theme and then select a Swatch:

Learn more about Themes and Swatches.

For example, starting with default jQuery Mobile Theme/Swatch A:

In Project > App settings, changing the theme to gelato will result in this:

Note that changing the Theme will update all the pages. However, the Swatch will be set to A, regardless of what was selected in settings. To change a Swatch within a theme, select the page name in breadcrumbs and then change its Swatch in Properties:

 

Now the Theme is set to gelato and the Swatch to A.

Using jQuery Mobile ThemeRoller tool

You can easily create as many custom themes as you need by using the jQuery Mobile ThemeRoller tool and then upload them to your app in Tiggzi:

  • Swatches A, B, C are shown in the upper left corner. You can also add a new Swatch (D, F…) by clicking on +.
  • The menu on the left allows you to edit the current Swatch. The changes will be instantly shown in the center.
  • When done creating a custom theme, click on the Download link (top menu) to download the Theme.

Creating custom themes

  1. Create a custom Theme with any number of Swatches in ThemeRoller
  2. Click Download. You will be prompted to enter a name, for example: MyTheme. Then click Download Zip
  3. Unzip the download file and find the file called MyTheme.css.
  4. In Tiggzi, Project > Create New > Theme. For name enter: NewTheme. Click Create Theme.
  5. Open MyTheme.css, copy all its content and paste into the create theme in Tiggzi:
  6. Next, click Add Image and upload all the images from theme/images folder from the download zip file. You can select multiple images to upload:
  7. Next all the images need to be added to the theme. Select each image (right now it has to be done one at a time) and click Select:
     

    Once all the images are added to the theme, it will look like this:

  8. Save
  9. Go to Project > App settings and select the newly created theme
  10. Open the page and select one of the Swatches from your new theme. The resulting will look like this (Swatch A):