Enhancing Date Picker Customization with Custom Theme Variables
Bold BI offers support for customizing the appearance of the Date Picker widget by using custom theme variables. These variables allow you to customize various aspects of the Date Picker 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 Date Picker 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 Date Picker widget through the utilization of Date Picker widget theme variables.
Date Picker Widget Customization Using Theme Variables
You have the ability to customize the appearance of the Date Picker 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 title, subtitle, Text box, Calendar, Week header, Available dates, Unavailable dates, other months, Icon, Apply and cancel button.
Header Text
The following variables allows you to customize the font color, size and weight of the Date Picker Header title.
--datepicker-widget-title-font-color:#0000ff;
--datepicker-widget-title-fontsize:25px;
--datepicker-widget-title-fontweight:1000;
Sub Header Text
The following variables allows you to customize the font color, size and weight of the Date Picker widget’s subtitle.
--datepicker-widget-subtitle-font-color:#0000FF;
--datepicker-widget-subtitle-fontsize:18px;
--datepicker-widget-subtitle-fontweight:1000;
Placeholder Color
The following variables allows you to customize the text box placeholder color of the Date Picker widget.
--ddatepicker-widget-placeholder-text-color:#ff4800;
Text Box Style
The following variables allows you to customize the text box font size, weight, border, background of the Date Picker widget.
--datepicker-widget-textbox-border:#0000ff;
--datepicker-widget-textbox-background:#8ab9f1;
--datepicker-widget-textbox-fontsize:20px;
--datepicker-widget-textbox-fontweight:1000;
Calendar and Week Header Background
The following variables allows you to customize the calendar background and border color of the Date Picker widget.
--datepicker-widget-calendar-background:#ff7f4d;
--datepicker-widget-calender-border-color:#ff0000;
--datepicker-widget-weekheader-background:#ff4800;
--datepicker-widget-weekheader-font-color:#ffffff;
Week header Font Style
The following variables allows you to customize the week header’s font size, and weight of the Date Picker widget.
--datepicker-widget-weekheader-fontsize:20px;
--datepicker-widget-weekheader-fontweight:1000;
Available Date Font Style
The following variables allows you to customize the available date font color, size, weight, border color and background of Date Picker widget.
--datepicker-widget-availabledates-font-color:#ff4800;
--datepicker-widget-availabledates-fontsize:18px;
--datepicker-widget-availabledates-fontweight:1000;
Font Styles While Hovering Over Available Dates
The following variables allows you to customize font’s color, size, weight and background while hovering the available date of Date Picker widget.
--datepicker-widget-availabledates-hover-background:#72A0C1;
--datepicker-widget-availabledates-hover-font-color:#002D62;
--datepicker-widget-availabledates-hover-fontsize:16px;
--datepicker-widget-availabledates-hover-fontweight:500;
Font Styles When selecting Available dates
The following variables allows you to customize the available date selection font color, size, weight, down arrow and background of Date Picker widget.
--datepicker-widget-availabledates-selection-background:#ff4800;
--datepicker-widget-availabledates-selection-font-color:#ffffff;
--datepicker-widget-availabledates-selection-fontsize:20px;
--datepicker-widget-availabledates-selection-fontweight:1000;
Unavailable Date Background and Font Style
The following variables allows you to customize the unavailable date font color, size, weight and background of Date Picker widget.
--datepicker-widget-unavailabledays-background:#ff4800;
--datepicker-widget-unavailabledays-font-color:#ff7f4d;
--datepicker-widget-unavailabledays-fontsize:20px;
--datepicker-widget-unavailabledays-fontweight:1000;
Other Month Days Background and Font Style
The following variables allows you to customize the other month days font color, size, weight and background of Date Picker widget.
--datepicker-widget-othermonthdays-background:#8ab9f1;
--datepicker-widget-othermonthdays-font-color:##00008b;
--datepicker-widget-othermonthdays-fontsize:20px;
--datepicker-widget-othermonthdays-fontweight:1000;
Date Picker Icon Style
The following variables allows you to customize the icon font size and weight of Date Picker widget.
--datepicker-widget-icon-fontsize:20px;
--datepicker-widget-icon-fontweight:1000;
Apply and Cancel Buttons Background and Font Style
The following variables allows you to customize the Apply and Cancel button font color, size, weight and background of Date Picker widget.
/**** Apply Button Variables ****/
--datepicker-widget-okbutton-background:#ffffff;
--datepicker-widget-okbutton-font-color:#0000ff;
--datepicker-widget-okbutton-fontsize:20px;
--datepicker-widget-okbutton-fontweight:1000;
/**** Cancel Button Variables ****/
--datepicker-widget-cancelbutton-background:#ffffff;
--datepicker-widget-cancelbutton-font-color:#ff4800;
--datepicker-widget-cancelbutton-fontsize:20px;
--datepicker-widget-cancelbutton-fontweight:1000;
Font and Background Color When Clicking Apply Button
The following variables allows you to customize the OK button font color and background of Date Picker widget while clicking.
--datepicker-widget-okbutton-press-background:#FFFFFF;
--datepicker-widget-okbutton-press-font-color:#0000ff;
Font and Background Color When Clicking Cancel Button
The following variables allows you to customize the cancel button background and font color while clicking in Date Picker widget.
--datepicker-widget-cancelbutton-press-background:#ff4800;
--datepicker-widget-cancelbutton-press-font-color:#ffffff;
Apply and Cancel Buttons Background and Font Style While Hovering
The following variables allows you to customize Apply and Cancel button font color, size, weight and background of Date Picker widget while hovering.
/**** Apply Button Hovering Variables ****/
--datepicker-widget-okbutton-hover-background:#cee2f9;
--datepicker-widget-okbutton-hover-font-color:#0000ff;
--datepicker-widget-okbutton-hover-fontsize:20px;
--datepicker-widget-okbutton-hover-fontweight:1000;
/**** Cancel Button Hovering Variables ****/
--datepicker-widget-cancelbutton-hover-background:#ffab94;
--datepicker-widget-cancelbutton-hover-font-color:#ff4800;
--datepicker-widget-cancelbutton-hover-fontsize:20px;
--datepicker-widget-cancelbutton-hover-fontweight:1000;
Date Picker Widget Container
The following variables allows you to customize the Border radius, border color and background color of Date Picker widget.
--datepicker-widget-container-border-radius:5px;
--datepicker-widget-container-border-color:#191970;
--datepicker-widget-container-bg-color:#73C2FB;
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 Date picker widget in the properties.
