Enhancing List Box Widget Customization with Custom Theme Variables

Bold BI offers support for customizing the appearance of the List Box widget by using custom theme variables. These variables allow you to customize various aspects of the List Box 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 List Box 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 each widget. By utilizing these files, you can personalize any widget and attain the outcome that you like across the dashboards. This article offers comprehensive guidance on modifying the List Box widget through the utilization of List Box widget theme variables.

List Box Widget Customization Using Theme Variables

You have the ability to customize the appearance of the List Box 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, Sub Title, List Box value, Selection, and Hovering styles.

List Box widget Header

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

--listbox-widget-title-font-color:#ff4800;
--listbox-widget-title-fontsize:25px;
--listbox-widget-title-fontweight:1000;

List Box Widget Sub Title

The following variables allows you to customize the text color and font styles of the List Box’s Sub Title.

--listbox-widget-subtitle-font-color:#ff4800;
--listbox-widget-subtitle-fontsize:20px;
--listbox-widget-subtitle-fontweight:900;

List Box Widget

List Background

The following variables allows you to customize the border color, background, text color and font styles of the List Box’s list.

--listbox-widget-dropdownlist-background:#8ab9f1;
--listbox-widget-dropdownlist-font-color:#00008b;
--listbox-widget-dropdownlist-fontsize:20px;
--listbox-widget-dropdownlist-fontweight:800;

List Hovering Styles

The following variables allows you to customize the background, text color and font styles of the List Box’s list while hovering.

--listbox-widget-dropdownlist-hover-background:#8ab9f1;
--listbox-widget-dropdownlist-hover-font-color:#00008b;
--listbox-widget-dropdownlist-hover-fontsize:20px;
--listbox-widget-dropdownlist-hover-fontweight:1000;

List Selection Styles

The following variables allows you to customize the background, text color and font styles of the List Box’s list selection.

--listbox-widget-dropdownlist-selection-background:#ff4800;
--listbox-widget-dropdownlist-selection-font-color:#ffffff;
--listbox-widget-dropdownlist-selection-fontsize:20px;
--listbox-widget-dropdownlist-selection-fontweight:800;

List Box Widget Checkbox Variables

The following variables allows you to customize the background, border and Tick color when select the items in the list box widget.

--listbox-widget-checkbox-tick-color:#ffffff;
--listbox-widget-checkbox-unchecked-bg:#ffab89;
--listbox-widget-checkbox-unchecked-border:#ff4800;
--listbox-widget-checkbox-checked-bg:#ff4800;
--listbox-widget-checkbox-checked-border:##9d2c00;

List Box Widget Container

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

--listbox-widget-container-border-radius:10px;
--listbox-widget-container-border-color:#9d2c00;
--listbox-widget-container-bg-color:#ffab89;  

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 List Box widget in the properties.