In the theme builder, you can apply styling for your application. You can accommodate brand requirements, for example, by applying specific color codes that you then use when building your application. The options selected in the theme builder are reflected in the menus in the options menu for individual components.

The theme builder is accessed from the tools (1) menu. The theme builder module is opened and you can set customized styling requirements in the theme builder. Any changes need to be saved with the Save and apply button (2) before they become active. When you work in the pages module creating pages for your application, the styling applied in the theme builder is available for customizing the various components.

You can scroll through the different style elements such as color and borders. The following provides an overview of the elements to which customized styles can be applied:

When you work in the page builder, you can apply color styling for components in the options (1) menu. For example, as shown below, you can apply a specific background color (2) using the menu options. The menu options reflect the color options in the theme builder color palette (4).

Note: When you make any changes in the theme builder, you need to press the Save and apply button to apply changes. Any updates are otherwise ignored and existing values are applied.

As shown above, the theme builder color palette is reflected in the color menu options available when you customize the individual components included in the web page(s) for your application. As shown below, you can customize the color palette to reflect, for example, the brand values of your organization. When you click on the color fill icon (1), the theme colors are displayed. You can select a specific color using either the color picker (2) or by specifying the hex color code value (3).

The color preview (4) reflects any changes to the main colors.

Note: When you make any changes in the theme builder, you need to press the Save and apply button to save changes.

Note: Where needed, you can use a color code converter available on the internet for obtaining the specific hex value for an RGB or Pantone color code.
​

You can adjust the various colors as required for use across your application(s).

You can adjust the typography in your web application for title and body text elements; switch between different title levels (1 - 6) and adjust the elements for each as required. Use the preview section to check the changes.

In this section, you can define the fonts to use in your application. Customize your pages by adding new fonts. After clicking Add font (1), a new modal will open to enable adding separate files united into a font family.

A range of options is available that can be applied. The following example contains an overview of the various options and settings:

As shown, settings can be applied for individual title levels (2) that can be customized based on the device. Ensure consistency, for example, by using the 'Transform' feature to ensure that a specific title level is capitalized or presented in lowercase only.

Choose from the basic Roboto or Sans Serif font families (3) (or your own uploaded fonts) and specify the font weight that you want to be applied based on the selected title level. You can also adjust the letter spacing to the required level.

Use the preview section (4) to check any changes applied.

You can use the color fill tool to specify a specific color for the text to ensure that you reflect, for example, reflect brand requirements based on font color for web applications.

You need to ensure that any changes applied are saved using the Save and Apply button before exiting the Theme Builder.

As with the title text, you can adjust the setting for body text (Body 1, Body 2) as required and preview the text elements applied.

You can adjust the border to set the thickness and radius you want to apply. The changes are applied for all screen types. You can select the individual type, small to x-large (1), and adjust the borders based on the pixel size (2). The borders preview (3) reflects any adjustments dynamically as they are changed.

You can additionally alter the radius of the corners of your border. As shown below, any adjustments are applied to all screens (1). You can adjust the individual settings based on pixels or use the menu to specify the radius in pixels (4). The preview (5) section of the screen is updated dynamically to reflect any changes in radius settings.

Adjust the size of icons using the various sizing options as shown below. Changes are applied on all screen types. You can adjust the pixel size of an icon. As shown below, the pixel size for the x-large icon is adjusted to 106 pixels (1). Changes are reflected immediately in the preview area (2).

This option allows you to alter the spacing based on pixels (px) for layout components such as rows and columns. Settings can be adjusted for different levels of spacing (1) and for different devices (2).

You can adjust the spacing for a specific device. Select the device in the preview row also (3). The pixel dimensions are adjusted dynamically in the preview area based on the settings applied (4). As shown in the example, the 'Large' level was increased to 46 and became longer than the x-large one.

Press the Save and apply button to save any changes in the theme builder. Additionally, you are able to save a theme as a block. This function is explained in detail in this article.

​