In the Theme Builder, you can apply the 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 the menus in the Options menu for individual components.

About the Theme Builder

The Theme Builder is access from the Tools (A) menu. The Theme Builder (B) module is opened. You can set customized styling requirements in the Theme Builder. Any changes need to be saved with the Save and apply button (C) 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 use the scroll bar (D) to scroll through the different style elements such as color and borders. The following provides an overview of the different elements for which customized styles can be applied.

  • Colors - apply a customized color palette for use in your application.

  • Typography - apply styling for Title and body text elements

  • Borders - set options for sizing borders in a pixels

  • Icon sizing - set options for icons used in your applications

  • Inner and outer spacing - set values for the Inner and outer spacing for layout components such as columns.

Setting a Color palette for your application

When you work in the Pages builder, you can apply color styling for components in the Options (A) menu. For example, as shown below, you can apply a specific border color (B) using the menu options. The menu options reflect the color options in the Theme Builder color palette (C). The Primary color (D) is the color defined as Primary (D) in the Theme Builder Palette.

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

Adjusting colors

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 (A), the theme colors are displayed. You can select a specific color using either the color picker (B) or by specifying the hex color code value (C).

The Color preview (D) 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 to 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).

Setting style for Typography in your web application

You can adjust the Typography in your web application for Title and Body text elements. You can switch between different title levels (1 - 6) and adjust the elements for each as required. You can use the preview section to check any changes.

A range of options are 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 (B) that can be customized based on the device (B). You can ensure consistency, for example, using Transform to ensure that a specific title level is capitalized or presented in Uppercase only (C).

You can choose from the Roberto or Sans Serif font families (D) and specify the Font Weight (E) that you want applied based on the selected title level. You can also adjust the letter spacing (G) to a required level.

You can use the preview section (H) to check any change applied.

You can use the color fill tool to specify a specific color for 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.

Border

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 (A), and adjust the borders based on the pixel size (B). The Borders preview (C) reflects any adjustments dynamically as they are changed.

Border radius

You can additional alter the radius of your borders corners. As shown below, any adjustments are applied to all screen (A). You can adjust the individual settings based on pixels. You can use the menu to specify the radius in pixels (B). The preview (C) section of the screen is updated dynamically to reflect any changes in radius settings.

Adjusting the size of icons

You can adjust the size of icons using the various sizing options as shown below. Changes are applied on all screen types (A). You can adjust the pixel size of an icon. As shown below, the pixel size for the X-Large icon is adjusted to 102 pixels (B). Changes are reflected immediately in the preview area (C).

You need to press the Save and apply (D) button to save any changes in Theme Builder.

Inner and outer spacing

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 devices (A) for different levels of spacing (B).

You can adjust the spacing for a specific device (C). Select the device in the preview row also (D). The pixel dimensions are adjusted dynamically in the preview area based on the settings applied (C).

You need to press the Save and apply (D) button to save any changes in Theme Builder.

Did this answer your question?