How to Customize Header Panel and Dashboard Background Color with a Custom Theme

Bold BI offers support for customizing the appearance of the dashboard Header panel and Background color by using custom theme variables. Once you have customized the theme variables, you can refer to the provided knowledge base (KB) articles to learn how to generate the custom dashboard theme minified file with the customized dashboard viewer changes and upload it to the server.

KB Articles: How to generate custom dashboard theme and upload it to server

At first, download the most recent release package for the theme from the aforementioned knowledge base in Step 1 and extract it. Inside the extracted files, you will discover distinct theme files for designer application and each widgets. By utilizing these files, you can personalize the dashboard viewer appearance and attain the outcome that you like across the dashboards. This article offers comprehensive guidance on modifying the dashboard Header panel and Background color through the utilization of dashboard viewer designer theme variables.

Header Panel Background and Font Color Customization Using Theme Variables

To change the color of the dashboard header panel and font color, follow these steps:

1. Locate the boldbi.designer.banner.definition.css or your customized theme file in your custom theme folder.
2. Customize the values of the --banner-background and --banner-textstyle-font-color variables.

Example:

:root {
  --banner-background: #005e5c;
  --banner-textstyle-font-color: #ffffff;
}

After applying the color to the banner background and font color, the header panel will be rendered with the new colors.

Dashboard Background Color Customization Using Theme Variables

To change the color of the dashboard background, follow these steps:

1. Locate the boldbi.designer.definition.css or your customized theme file in your custom theme folder.
2. Customize the value of the --designer-viewer-background-color variable.

Example:

:root {
  --designer-viewer-background-color: #EEE9A4;
}

After applying the color to the dashboard background, it will be rendered with the new color.