Using the theme builder, you can adjust the default styles available with Betty Blocks to reflect your preferences or brand requirements.
Using theme builder in Betty Blocks, 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 options for individual components.
Theme builder explained
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 creating web 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:
-
Colors - apply a customized color palette to use in your application
-
Fonts - here you add and select fonts for your application
-
Typography - apply styling for title and body text elements
-
Borders - set options for sizing borders in pixels
-
Icon sizing - 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
Applying color palette colors
When you work in the page builder, you can apply color styling for individual components in the component options.
For example, as shown below, you can set a specific background color using the menu options. The menu options reflect the color options in the theme builder color palette.
One can also apply colors from the theme builder's palette from the Styles tab available in each page component's menu.
These customizations are handled via the values of CSS properties. Just type in '--' in the value field to call your application's color scheme.
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.
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. 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.
The color preview (3) reflects any changes to the main colors.
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).
Typography
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.
Fonts
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.
Once the new font is added, you can edit it (2), changing the font's default weight, or deleting it from your application.
Titles & body texts
As shown, settings can be applied for individual title levels (1) 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 (2) (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 (3) 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, brand requirements based on font color for web applications.
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 and adjust the borders based on the pixel size. The borders preview reflects any adjustments dynamically as they are changed.
Border radius
You can additionally alter the radius of the corners of your border. As shown below, any adjustments are applied to all screens. You can adjust the individual settings based on pixels or use the menu to specify the radius in pixels. The preview section of the screen is updated dynamically to reflect any changes in radius settings.
Adjusting the size of icons
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. Changes are reflected immediately in the preview area.
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 levels of spacing and for different devices.
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 can save a theme as a block. This function is explained in detail in this article.
