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)
Last updated