As an admin, you can use the theme editor to create new or customize existing themes to ensure brand compliance for your organization or for your clients. Themes then can be selected to determine how a certain environment's portal and applications look to end users. Additionally, authors can select a theme when publishing a module in case they want to deviate from the environment theme.
Create and customize themes
In the theme library of the Admin Console, you can create new and edit existing themes. Access additional options, such as Duplicate theme and Delete theme via the Actions button.
You can also export and import themes in a .bth file format.
While configuring your theme, a preview of it is displayed on the right side of the screen. This way, you can see what your theme currently looks like to your end users. Select Save theme to apply the changes.
General settings
- You can set the primary and background colors by using the color picker or inserting a HEX code. Changing the primary color affects elements such as buttons and the progress bar.
- Layout density and width affect how a module is displayed. The layout density affects how Input nodes are displayed. You can choose between the standard and a compact density. The max width is set to 640 px by default and can be increased up to 4000 px.
- There are additional settings with options that can be toggled on to display / hide a border, a Built with BRYTER watermark, and letters or numbers for Single Select and Multiple Select Input nodes.
Typography settings
In the typography tab, you can define how text is displayed to your end users.
- Both, base and advanced typography settings enable you to change the text font, size, and color, as well as heading font and color, and hyperlink color.
- In the advanced typography section, you can further change the individual alignments, and further specify font, size, and color for small, medium and large headings.
You can even upload your own custom font in a .woff file format. Other file formats like .ttf or .otf can be easily converted with online converters.
The base typography settings override the advanced settings.
Logo settings
- You can upload a logo to your theme in a .gif, .png, .jpg, .svg, and .webp file format.
- Once uploaded, you can specify the logo size and position, as well as, set an alt text and a custom link that opens when the logo is clicked.
We recommended a minimum image width of 100 px.
Uploading or removing a logo is applied immediately – without clicking Save Theme.
Header & footer settings
- In the header section, set the background and bottom shadow colors by using the color picker or typing a HEX code. The header is located in the upper part of your module and covers the entire area surrounding your logo. The toggle Full width determines whether the logo is aligned in relation to the full screen or the main content area.
- Similarly, you can set a footer color. The footer is located in the area below the progress bar.
You need to upload a logo to modify the header configurations. The footer color can be defined regardless of a logo.
Related topics
- Learn how admins can configure a default theme for modules or published applications and data views.
- Learn how authors can apply custom themes to a module here.