Theme

Overview

Themes define the color scheme of the application viz the colors that will be applied to the header strip, the component header, the buttons on the forms, etc., the over all font that will be applied to the application, the different styles that will be applied to the headers/tabs/ component headers/ forms/ views etc. Zoho Creator supports 3 built-in themes which can be applied to your application - Classic, Gradient and Contemporary. You can pick your themes from the Settings -> Customize -> Choose Theme tab and also create your own customized themes, to suit your requirements. By default, the forms and views in your application will be displayed with the Classic theme.

Selecting a New Theme

1. To select a new theme, move mouse over the theme, select a color that can be applied for the theme and click on the Apply button.
2. To preview the theme, click on the Preview button.
3. To create a new custom theme, use the Custom Theme button.

   

Creating a Custom Theme

To create a new custom theme,

1. Select Customize -> Choose Theme tab.
2. Click on the Create Theme + button displayed next to the Custom themes header. The theme properties that can be customized will be listed as shown in the screen-shot given below. Specify the Theme name and select the Base Theme based on which your custom theme will be created.
3. You can use the Expand all button to show a preview of what each customization option will look like or click on the + icon to expand only a specific property, as shown in the screen-shot below.
4. Select the Font, Font size, styles, alignment, style etc from the options listed.

   Font Family: You can customize the overall font style for your application as Ariel, Verdana or Georgia. The font family customization is supported for all layouts.

   Font Size: You can customize the overall font size for your application as Medium or Small. The font size customization is supported for all layouts.

   Application Header Style: The application header style refers to the style applied to the header strip of your application (refer screen-shot below). Select the required style from the available options displayed. The app header style customization is supported for all layouts.

   Application Section Style: The application section is that portion where your form and view links are listed on the left/right side under different sections(refer screen-shot below). Select the required style for this section, from the available options displayed. This style customization is supported only if your layout is Pane left, Pane right, Tabbed pane left or Tabbed pane right.

   Component Header Style: The component header refers to the header portion of each component like Form, View and Section (refer screen-shot below). Select the required style from the available options displayed. The component header style is supported for all layouts.

   Form Style: The Forms in your application can be customized to be Plain (refer screen-shot below) or with alternate column colors or text fields with double borders. The selected style will be applied to all the Forms in your application and is supported for all layouts.

   Label Alignment: Label alignment refers to the alignment of labels in your Forms. The labels can be either left aligned or right aligned. This style is supported for all layouts.

   

   Application tab style: The tab style refers to the customization of Tabs in your application, as shown in the screen-shot given below. This style is supported only if your application has a Tabbed, Tab pane left or Tab pane right layout type.

   

   Application Menu Style: The application menu refers to the drop-down menu layouts, as shown in the screen-shot below. This style is supported only if your application supports Drop-down menu layouts.

   

   View Style: The Views in your application can be customized to be displayed with borders or with bottom borders or with alternate row colors and bottom borders (refer screen-shot below). This style is supported for all layouts.

5. Click Save to create your custom theme. The themes you created will be displayed under the Custom Themes header as shown in the screen-shot below. Select the required Color and click on Apply to apply the theme properties to your application. Click Preview to preview the Forms and Views with the custom theme.
6. Use the Edit option to modify the theme properties, Delete option to delete the custom theme and the Duplicate option to create a duplicate copy of the theme.