Enhancing Combo box Widget Customization with Custom Theme Variables

Bold BI offers support for customizing the appearance of the Combobox widget by using custom theme variables. These variables allow you to customize various aspects of the Combobox 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 Combobox 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 Combobox widget through the utilization of Combobox widget theme variables.

Combobox Widget Customization Using Theme Variables

You have the ability to customize the appearance of the Combobox widget by utilizing the theme variables, which allow for adjustments to be made to the widget container’s styles such as background and border color, as well as the colors and font styles of the Widget Header, Sub Title, title, and Combobox dropdown list.

Combobox Widget Title Variables

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

--combobox-widget-title-font-color:#0000ff;
--combobox-widget-title-fontsize: 25px;
--combobox-widget-title-fontweight:1000;

Combobox Widget Sub Title Variables

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

 --combobox-widget-subtitle-font-color:#0000ff;
 --combobox-widget-subtitle-fontsize:25px;
 --combobox-widget-subtitle-fontweight:1000;

Combobox Widget Dropdown Variables

The following variables allows you to customize the text color, border color, background, and font styles of the dropdown in the combobox widget.

--combobox-widget-dropdownlist-border-color:#00008b;
--combobox-widget-dropdownlist-background:#8ab9f1;
--combobox-widget-dropdownlist-font-color:#00008b;
--combobox-widget-dropdownlist-fontsize: 15px;
--combobox-widget-dropdownlist-fontweight:800;

The following variables allows you to customize the text color, background, and font styles of the dropdown while a dropdown item is hovering in the combobox widget.

--combobox-widget-dropdownlist-hover-background:#00008b;
--combobox-widget-dropdownlist-hover-font-color:#ffffff;
--combobox-widget-dropdownlist-hover-fontsize:15px;
--combobox-widget-dropdownlist-hover-fontweight:800;

The following variables allows you to customize the text color, border color, background, and font styles when a dropdown item is selected in the combobox Widget.

--combobox-widget-dropdownlist-selection-background:#00008b;
--combobox-widget-dropdownlist-selection-font-color:#ffffff;
--combobox-widget-dropdownlist-selection-fontsize:15px;
--combobox-widget-dropdownlist-selection-fontweight:900;

Dropdown Checkbox Variables

These variables allow you to customize the dropdown checkbox tick mark, background and border color in the combobox Widget.

--combobox-widget-checkbox-tick-color:#ffffff;
--combobox-widget-checkbox-unchecked-bg:#ff9999;
--combobox-widget-checkbox-unchecked-border:#ff0000;
--combobox-widget-checkbox-checked-bg:#ff6700;
--combobox-widget-checkbox-checked-border:#ff4500;

Combobox Placeholder Text and Down Arrow Icon Variables

The following variables allows you to customize the Placeholder’s text color and down arrow while hovering in the combobox Widget.

--combobox-widget-dropdownlist-downarrow-color:#0000ff;
--combobox-widget-placeholder-text-color:#0000ff;
--combobox-widget-border-color:#00008b; 

Combobox Container Variables

The following variables allows you to customize the border radius and border color in the combobox Widget.

--combobox-widget-container-border-radius: 15px;
--combobox-widget-border-color:#000000;
--combobox-widget-container-bg-color:#ADD8E6;

Customizing the Combo box widget using theme variables in Bold BI is a straightforward process that allows you to tailor the appearance of your widgets to your specific needs. By following the steps outlined in this article, you can easily customize the Combo box widget to match your desired aesthetic and functionality.

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 Combo box widget in the properties.