Advanced Theming Editor

What is Advanced Theming and why is it useful?

Themes Editor enables admins to customize the theme of their BRYTER modules in accordance with their organization's brand requirements or that of their customers. Advanced Theming offers a number of new options to further customize your modules, for instance, custom logos, setting header color, and individual settings for different heading levels.

How to use Advanced Theming?

As an Admin, in the dashboard click on your username and choose Admin Console. It will bring you to the Admin Console page. To exit the Admin Console and go back to the dashboard, select the Exit Admin Console button in the bottom left corner.

In the sidebar menu, select Theme Library. You can choose to create a new theme, import a theme or select an existing theme. Select a theme, then select the blue button labeled Edit theme. You will be directed to the Themes Editor.

In the Themes Editor, select Show Advanced Theming to display additional customization options for your themes. Customize the theme to your liking, then select Save theme to save your configurations. To return to the regular theming settings, simply select Hide Advanced Theming.

Parameters

[ 1 ] Theme name

The theme name will be displayed to authors picking a theme from the themes picker when publishing modules.

[ 2 ] Colors

You can specify the primary color by using the color picker or inserting a HEX Code of the web color you want to use. The custom brand color (primary color) represents the predominant color in the module and will influence the appearance of the selected Inputs as well as navigation buttons and the color of the progress bar.

[ 3 ] Logo

In this section, you can upload your own logo which will appear in the header of your module. Supported file formats are .gif, .png, .jpg, .svg, and .webp. Recommended minimum picture width size: 100px.

In addition, you can set different sizes (small, regular, large, or custom) for your logo, link the logo to your company website, add an alternative text, and specify the position of your logo in the header (left, center, or right).

[ 4 ] Header

You can customize the header section of your theme by setting a background color and/or a bottom shadow color. Use the color picker or insert a HEX Code of the web color you want to use.

Further, you can toggle on a full-width display of your header.

[ 5 ] Layout

You can specify between a compact and a standard theme which affects the density of Input Nodes.

The width setting is by default set to a max-width of 640px which can be increased to 4000px. This affects how your module will be displayed both in iframes and as standalone modules.

[ 6 ] Typography

In the typography section, you can individually choose the font, size, alignment, and color of different heading levels, text, and even links.

[ 7 ] Settings

In this section, you can further customize the appearance of your module, e.g., showing the watermark or borders. These are general settings that are not part of the Advanced Theming.