Tab - Templates

Kalipso - Using - Styles - Edit - Tab - Templates

This tab is the one that appears by default when clicking on edit a style.

In this tab, the style models for various areas of the project are defined in a more direct and simple way. Thus, there are areas dedicated to each editable object in terms of its style, such as headers, icons (iconography) or fonts (typography), for example.

Header Palette

Set the colors for the header background, foreground and accent.

To do so, just click on the color square which will open a window (Color Picker) to help you choose the right color. The available options to chose the color are:

• Title Background

• Title Text Color

• Subtitle Background

Body Palette

Choose colors for your body background, foreground and accent.

For each editable area you can click on the color square which will open a window (Color Picker) to help you choose the right color. The available options to chose the color are:

• Form Background

• Form Text Color

• Form Button Color

Template Palettes

Use a curated set of pallets below to change the overall look&feel

• Palette from image - opens a window where you can select an image (the window opens in the project's resources folder and can search for the image in another location) that Kalipso will analyze and identify a set of colors in the image.

When you click on this option, the following window appears:

Here Kalipso presents a set of colors identified in the selected image from which you can choose 6 to be able to use them in the project. After choosing click save and the selected colors will be associated to the "Last changed" palette.

In this same set of options related to color palettes, a pre-defined set of colors are available for the various graphic elements of the project.

These templates can be used in the project, although they cannot be changed. The only changeable template is the "Last Changed" which is changed as indicated above, through the analysis of the colors of an image.

To use them just click on the desired to add the six colors to the project.

Iconography

Select which default icon set Kalipso will use for your app. Kalipso provides a pre-defined set of icons for various functions which can be associated with the project.

Just choose the one you want and click for it to be associated with the project.

Typography (Fonts)

Give your app a generic font family and size. Choose from the available ones or add a new font type.

In this area, the fonts that are already associated with a selected Kalipso style are available. Even when editing one (creating a new style) the fonts that appear are the same. If you need to add a font, you can do it by clicking on add (in the box where the fonts are represented there is the button to add).

Below you can chose the default font sizes for some elements:

• Header

• SubHeader

• Title

• SubTitle

• Default (size of the text)