Enhancing Period over Period Widget Customization with Custom Theme Variables

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

Period Over Period Widget Customization Using Theme Variables

You have the ability to customize the appearance of the Period over Period 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, Date range label, VS label, relative header, header background, compare range label, border styles and background color.

Widget Title

The following variables allows you to customize the font color, size and weight of the Period over Period’s Title.

--pop-widget-title-font-color:#2971D8;
--pop-widget-title-fontsize:18px;
--pop-widget-title-fontweight:1000;

Widget Subtitle

The following variables allows you to customize the font color, size and weight of the Period over Period’s subtitle.

--pop-widget-subtitle-font-color:#2971D8;
--pop-widget-subtitle-fontsize:17px;
--pop-widget-subtitle-fontweight:700;

Period Over Period Widget Date Range and Compare Range Label

The following variables allows you to customize the font color, size, weight and background of the Period over Period’s Date range and compare range label.

/* Date Range Label */
--pop-widgetcontainer-daterangelabel-background:#8FEAD8;
--pop-widgetcontainer-daterangelabel-font-color:#05787A;
--pop-widgetcontainer-daterangelabel-fontsize:16px;
--pop-widgetcontainer-daterangelabel-fontweight:1000;

/* Compare Range Label */
--pop-widgetcontainer-comparerangelabel-background:#DB789F;
--pop-widgetcontainer-comparerangelabel-font-color:#841642;
--pop-widgetcontainer-comparerangelabel-fontsize:16px;
--pop-widgetcontainer-comparerangelabel-fontweight:1000;

Period Over Period Widget VS Label

The following variables allows you to customize the font color, size, weight and border color of the Period over Period’s VS label.

--pop-widgetcontainer-vslabel-font-color:#C32020;
--pop-widgetcontainer-vslabel-fontsize:16px;
--pop-widgetcontainer-vslabel-fontweight:700;
--pop-widgetcontainer-vslabel-border-color:#954242;

Period Over Period Widget Date Range Relative Header

The following variables allows you to customize the font color, size, weight and background of the Period over Period’s Date range relative header.

--pop-widget-dialog-daterange-relativeheader-background:#D8F8C2;
--pop-widget-dialog-daterange-relativeheader-label-font-color:#6EAD41;
--pop-widget-dialog-daterange-relativeheader-label-fontsize:13px;
--pop-widget-dialog-daterange-relativeheader-label-fontweight:1000;

Period Over Period Widget Calendar PopUp Background

The following variables allows you to customize the header background of Period over Period.

--pop-widget-dialog-header-Background:#B4E5F3;

Period Over Period Widget Date Range Relative Label

The following variables allows you to customize the font color, size and weight of the Period over Period’s date range relative label.

--pop-widget-dialog-daterange-relativelabel-font-color:#0000FF;
--pop-widget-dialog-daterange-relativelabel-fontsize:20px;
--pop-widget-dialog-daterange-relativelabel-fontweight:800;

Period Over Period Widget Date range Relative Combo Box

The following variables allows you to customize the font color, size and weight of the Period over Period’s Date range relative combo box.

--pop-widget-dialog-daterange-relativecombobox-background:#9ED8D0;
--pop-widget-dialog-daterange-relativecombobox-textbox-font-color:#126357;
--pop-widget-dialog-daterange-relativecombobox-textbox-fontsize:20px;
--pop-widget-dialog-daterange-relativecombobox-textbox-fontweight:1000;

Period Over Period Widget Date Range Relative Combo Box Popup

The following variables allows you to customize the font color, size and weight of the Period over Period Date range relative combo box popup.

--pop-widget-dialog-daterange-relativecombobox-popup-background:#7381C3;
--pop-widget-dialog-daterange-relativecombobox-popup-font-color:#111F63;
--pop-widget-dialog-daterange-relativecombobox-popup-fontsize:20px;
--pop-widget-dialog-daterange-relativecombobox-popup-fontweight:1000;

Period Over Period Widget Date Range Calendar

The following variables allows you to customize the calendar highlight and selection of the Period over Period’s date range calendar.

--pop-widget-daterange-calender-highlight-color:#8EC88D;
--pop-widget-daterange-calender-selection-color:#BFD305;

Period Over Period Widget Date Range and Compare Range Calendar Week Header

The following variables allows you to customize the font color, size and weight of the Period over Period’s date range calendar week header.

/* Date Range Calendar Week Header */

--pop-widget-daterange-calender-weekheader-font-color:#9372D5;
--pop-widget-daterange-calender-weekheader-fontsize:18px;
--pop-widget-daterange-calender-weekheader-fontweight:1000;

/* Compare Range Calendar week Header */

--pop-widget-comparerange-calender-weekheader-font-color:#9372D5;
--pop-widget-comparerange-calender-weekheader-fontsize:18px;
--pop-widget-comparerange-calender-weekheader-fontweight:1000;

Period Over Period Widget Calendar Content Data Text

The following variables allows you to customize the font color, size and weight of the Period over Period’s calendar content data text.

--pop-widget-daterange-calender-content-hover-color:#AC97D6;
--pop-widget-daterange-calender-content-datatext-font-color:#4A1CA7;
--pop-widget-daterange-calender-content-datatext-fontsize:20px;
--pop-widget-daterange-calender-content-datatext-fontweight:1000;

Period Over Period Widget Compare Range Relative Header

The following variables allows you to customize the font color, size and weight of the Period over Period’s compare range relative header.

--pop-widget-dialog-comparerange-relativeheader-background:#3CA3B1;
--pop-widget-dialog-comparerange-relativeheader-label-font-color:#0C3237;
--pop-widget-dialog-comparerange-relativeheader-label-fontsize:13px;
--pop-widget-dialog-comparerange-relativeheader-label-fontweight:700;

Period Over Period Widget Compare Range Relative Label

The following variables allows you to customize the font color, size and weight of the Period over Period’s compare range relative label.

--pop-widget-dialog-comparerange-relativelabel-font-color:#5B2ED9;
--pop-widget-dialog-comparerange-relativelabel-fontsize:15px;
--pop-widget-dialog-comparerange-relativelabel-fontweight:1000;

Period Over Period Widget Compare Range Relative Combo Box

The following variables allows you to customize the font color, size and weight of the Period over Period’s compare range relative combo box.

--pop-widget-dialog-comparerange-relativecombobox-background:#8CD1DB;
--pop-widget-dialog-comparerange-relativecombobox-textbox-font-color:#0D2E33;
--pop-widget-dialog-comparerange-relativecombobox-textbox-fontsize:20px;
--pop-widget-dialog-comparerange-relativecombobox-textbox-fontweight:1000;

Period Over Period Widget Compare Range Calendar

The following variables allows you to customize the calendar highlight and selection color of the Period over Period.

--pop-widget-comparerange-calender-highlight-color:#D94747;
--pop-widget-comparerange-calender-selection-color:#6C1919;

Period Over Period Widget VS Label

The following variables allows you to customize the font color, size and weight of the Period over Period’s VS label.

--pop-widget-dialog-vslabel-font-color:#2990BC;
--pop-widget-dialog-vslabel-fontsize:15px;
--pop-widget-dialog-vslabel-fontweight:1000;

Period Over Period Widget Footer Background

The following variables allows you to customize the footer background of the Period over Period.

--pop-widget-dialog-footer-background:#918A8F;

Period Over Period Widget OK Button

The following variables allows you to customize the font color, size, weight and background color of the Period over Period’s OK button.

--pop-widget-dialog-okbutton-background:#77B5D0;
--pop-widget-dialog-okbutton-hovercolor:#1E86B3;
--pop-widget-dialog-okbutton-font-color:#530F0F;
--pop-widget-dialog-okbutton-fontsize:13px;
--pop-widget-dialog-okbutton-fontweight:700;

Period Over Period Widget Cancel Button

The following variables allows you to customize the font color, size, weight and background color of the Period over Period’s cancel button.

--pop-widget-dialog-cancelbutton-background:#D96060;
--pop-widget-dialog-cancelbutton-hover-bg-color:#862929;
--pop-widget-dialog-cancelbutton-font-color:#FFFFFF;
--pop-widget-dialog-cancelbutton-fontsize:14px;
--pop-widget-dialog-cancelbutton-fontweight:1000;

Period Over Period Widget Container Styles

The following variables allows you to customize the border radius, border color and background of the Period over Period.

--pop-widget-container-border-radius:5px;
--pop-widget-container-border-color:#260A0A;
--pop-widget-container-bg-color:##AADEE8;

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 Period over Period widget in the properties.