Using default themes

Initially, Appery.io apps come with only one predefined flat-ui theme:

All other default themes are available via plug-ins. To import themes, click CREATE NEW > From Plug-in:

This will open a window with the list of available themes for importing:

Mind, that every theme is presented in two versions (for older and newer libraries) to choose from.

Select the theme(s) to import and click “Import selected plug-ins”:

As a result, you will see the newly imported themes under the 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:

Another way to get new themes is to click “Add more Themes” from App settings > General:

In this way, you will also get to the Catalog of Appery.io plug-ins window.

Note: All themes in Appery.io, including custom themes, are based on jQuery Mobile themes.

Learn more about themes and swatches via the link.

Beginning with the default flat-ui Theme/Swatch B:

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

Changing the theme will update all the pages. The swatch will be set to Inherit. To change a swatch within a page, select the page name in breadcrumbs, and then change its swatch in PROPERTIES:

The theme is set to Gelato and the swatch to A.

Appery.io default themes

Every default theme comes with a number of swatches.

Examples of pages with different themes and swatches:

Cappuccino

Swatch A	Swatch B	Swatch C

Dendrite

Swatch A	Swatch B	Swatch C
Swatch D	Swatch E

Flat-ui

Swatch A	Swatch B	Swatch C
Swatch D	Swatch E	Swatch F
Swatch G

Gelato

Swatch A	Swatch B	Swatch C
Swatch D	Swatch E	Swatch F
Swatch G

iOS-like

Swatch B	Swatch C

iOS7

Swatch A	Swatch B	Swatch C
Swatch D	Swatch E	Swatch F
Swatch G	Swatch H

Jqm

Swatch A	Swatch B

Jqm-Classic

Swatch A	Swatch B	Swatch C
Swatch D	Swatch E

Olive

Swatch A	Swatch B	Swatch C
Swatch D	Swatch E

Pastel

Swatch A	Swatch B	Swatch C
Swatch D	Swatch E

Twitter-bootstrap

Swatch A	Swatch B	Swatch C
Swatch D	Swatch E	Swatch F

Winter

Swatch A	Swatch B	Swatch C
Swatch D	Swatch E	Swatch F

jQuery Mobile ThemeRoller

You can easily create as many custom themes as you need by using the jQuery Mobile ThemeRoller tool, and then uploading them to your app in Appery.io:

• Swatches A, B, C are shown in the upper-left corner. You can also add a new swatch (D, E, F…) by clicking “+.”
• 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 “Download” (top menu) to download the theme.

Creating custom themes

1. Create a custom theme with any number of swatches in the 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 Appery.io, Project > CREATE NEW > Theme. For the name, enter: NewTheme. Click “Create Theme.”

5. Open MyTheme.css, copy all its contents and paste it into the “create theme” in Appery.io:

6. 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. All the images need to be added to the theme one by one. Select each image (currently, they must be selected one at a time) and click “Select”.

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

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 result will look like (Swatch A):

Adding custom icons to a theme

Note: Custom icons cannot be added to an iOS7 theme due to a changed CSS structure.

You may go away from inserting the predefined themeAppery icons and use custom ones*. To do this:

• CREATE NEW > Theme, name it and copy the code of the theme you want to make changes to into the space provided.
• Upload images of the the icons you’d like to insert into the builder using “Add image” button on custom theme page :

• Find the code positions and apply background-image for the icons, set correct background position for each icon. URL format is “images/<filename>”. Correct file names can be found on the list to the right:

Mind the size of your images – if it exceeds 22 px, you need to set the background size to 100%.

Test the application to see the icons:

Note: All manipulations can be made for Libraries v2.0 and higher.

Scalable graphic icons

Default JQM themes support vector icons in .svg format. To use vector icons in the .css, open the .svg file with the text editor and copy the source code. The copied source code must be passed through the JavaScript escape() method. The returned result must be complemented with additional meta-data, and it looks like:

Note: Not every .svg format can be used in JQM themes.