Enhancing Number Card Widget Customization with Custom Theme Variables
Bold BI offers support for customizing the appearance of the Number Card widget by using custom theme variables. These variables allow you to customize various aspects of the Number Card 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 Number Card 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 Number Card widget through the utilization of Number Card widget theme variables.
Number Card Widget Customization Using Theme Variables
You have the ability to customize the appearance of the Number Card 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, Number Card value label, border styles and background color.
Number Card Widget Header Title
The following variables allows you to customize the font color, size and weight of the Number card’s Header.
--numbercard-widget-header-title-font-color:#0000ff;
--numbercard-widget-header-title-fontsize:25px;
--numbercard-widget-header-title-fontweight:1000;
Number Card Widget Sub Title
The following variables allows you to customize the font color, size and weight of the Number card’s subtitle.
--numbercard-widget-subtitle-font-color:#0000ff;
--numbercard-widget-subtitle-fontsize:20px;
--numbercard-widget-subtitle-fontweight:1000;
Number Card widget Title
The following variables allows you to customize the font color, size and weight of the Number card’s title.
--numbercard-widget-title-font-color:#0000ff;
--numbercard-widget-title-fontsize:25px;
--numbercard-widget-title-fontweight:1000;
Number Card Widget Value
The following variables allows you to customize the font color, size and weight of the Number card’s value.
--numbercard-widget-rightvalue-font-color:#0000ff;
--numbercard-widget-rightvalue-fontsize:30px;
--numbercard-widget-rightvalue-fontweight:1000;
Number Card Border style
The following variables allows you to customize the inner seperation’s border color in Number card widget.
--numbercard-widget-border:#00008b;
Number Card Widget Background
The following variables allows you to customize the background color in Number card widget container.
--numbercard-widget-container-bg-color:#8ab9f1;
Number card widget Container Border and Radius
The following variables allows you to customize the container border radius and border color of Number card widget.
--numbercard-widget-container-border-radius:10px;
--numbercard-widget-container-border-color:#0000ff;
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 Number card widget in the properties.