Enhancing Grid Widget Customization with Custom Theme Variables

Bold BI offers support for customizing the appearance of the Grid widget by using custom theme variables. These variables allow you to customize various aspects of the Grid widget’s appearance. 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 Grid changes and upload it to the server.

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

To begin, download the latest theme file from the documentation and extract it. Within the extracted files, you will find separate theme files for all the widgets. Utilizing these files, you can customize any widget and achieve the desired output throughout the dashboards. This article provides comprehensive information on customizing the Grid widget by using the Grid widget theme variables.

Grid Widget Customization Using Theme Variables

You have the ability to customize the appearance of the Grid widget by utilizing the theme variables, which allow for adjustments to be made to the widget container’s border radius, background and border color, as well as the colors and font styles of the Widget Header, Subtitle, Grid content, content selection, title, and alternate rows.

Grid widget Title

The following variables allows you to customize the text color and font styles of the Grid widget’s header.

--grid-widget-title-font-color:#0053b3;
--grid-widget-title-fontsize:25px;
--grid-widget-title-fontweight:1000;

Grid Widget Subtitle

The following variables allows you to customize the text color and font styles of the Grid widget’s subtitle.

--grid-widget-subtitle-font-color:#0000ff;
--grid-widget-subtitle-fontsize:20px;
--grid-widget-subtitle-fontweight:1000;

Grid Widget content

The following variables allows you to customize the background, text color and font styles of the Grid widget’s Content. The variables are as follows:

--grid-widget-content-background:#8ab9f1;
--grid-widget-content-font-fontcolor:#00008b;
--grid-widget-content-font-fontsize:18px;
--grid-widget-content-font-fontweight:1000;

Grid Widget Content selection

The following variables allows you to customize the background, text color and font styles of the Grid widget’s Content selection.

--grid-widget-content-selection-background:#8ab9f1;
--grid-widget-content-selection-font-color:#00008b;
--grid-widget-content-selection-font-fontsize:20px;
--grid-widget-content-selection-font-fontweight:1000;

Grid Widget Filter Bar

The following variables allows you to customize the background, border, text color and font styles of the Grid widget’s FilterBar.

--grid-widget-filterbar-background:#8ab9f1;
--grid-widget-filterbar-border:#0000ff;
--grid-widget-filterbar-font-color:#00008b;
--grid-widget-filterbar-font-fontsize:16px;
--grid-widget-filterbar-font-fontweight:1000;

Grid widget Header

The following variables allows you to customize the background, text color and font styles of the Grid widget column header.

--grid-widget-header-background:#8ab9f1;
--grid-widget-header-font-color:#00008b;
--grid-widget-header-font-fontsize:20px;
--grid-widget-header-font-fontweight:1000;

Grid widget Alternative Row

The following variables allows you to customize the alternative row text and background color of the grid widget.

--grid-widget-alternative-row-bg-color:#8ab9f1;
--grid-widget-alternative-row-text-color:#00008b;

Grid Widget Container

The following variables allows you to customize the Background color, Border radius and border color of the grid widget.

--grid-widget-container-border-radius:10px;
--grid-widget-container-border-color:#00008b;
--grid-widget-container-bg-color:#8ab9f1;

NOTE: It is crucial to emphasize that if you intend to customize the appearance of a specific widget using specific theme variables, refrain from customizing the grid widget in the properties.