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 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
- 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.
- To preview the theme, click on the Preview button.
-
To create a new custom theme, use the Custom Theme button.
Creating a Custom Theme
To create a new custom theme,
- Select Customize -> Choose Theme tab.
- 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.
- 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.
- 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.
- 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.
- 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.
