Enhancing Pivot Grid Widget Customization with Custom Theme Variables
Bold BI offers support for customizing the appearance of the Pivot Grid widget by using custom theme variables. These variables allow you to customize various aspects of the Pivot Grid 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 Pivot Grid 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 Pivot Grid widget through the utilization of Pivot Grid widget theme variables.
Pivot Grid Widget Customization Using Theme Variables
You have the ability to customize the appearance of the Pivot Grid 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 Pivot grid widget Title, Subtitle, Content, header, drill down, grouping button, grouping button icon, filter dialog list, cancel button and Ok button
Widget Title
The following variables allows you to customize the font color, size and weight of the Pivot Grid widget’s Title.
--pivotgrid-widget-title-font-color:var(--widget-primary-font-color);
--pivotgrid-widget-title-fontsize:var(--widget-fontsize);
--pivotgrid-widget-title-fontweight:var(--widget-fontweight);
Widget Subtitle
The following variables allows you to customize the font color, size and weight of the Pivot Grid widget’s subtitle.
--pivotgrid-widget-subtitle-font-color:var(--widget-primary-font-color);
--pivotgrid-widget-subtitle-fontsize:var(--widget-fontsize);
--pivotgrid-widget-subtitle-fontweight:var(--widget-fontweight);
Pivot Grid Border
The following variables allows you to customize the border of the Pivot Grid widget.
--pivotgrid-widget-border:var(--primary-border-color);
Pivot Grid Content
The following variables allows you to customize the font color, size, weight and background color of the Pivot Grid widget’s content.
--pivotgrid-widget-content-background:var(--widget-primary-background);
--pivotgrid-widget-content-font-fontcolor:var(--widget-secondary-font-color);
--pivotgrid-widget-content-font-fontsize:var(--widget-fontsize);
--pivotgrid-widget-content-font-fontweight:var(--widget-fontweight);
Font Styles When Selecting Content
The following variables allows you to customize the font color, size, weight and background of the Pivot Grid widget content while selection.
--pivotgrid-widget-content-selection-background:var(--widget-selection-background-color);
--pivotgrid-widget-content-selection-font-color:var(--widget-selection-font-color);
--pivotgrid-widget-content-selection-font-fontsize:var(--widget-fontsize);
--pivotgrid-widget-content-selection-font-fontweight:var(--widget-fontweight);
Pivot Grid Header
The following variables allows you to customize the font size, color, weight and background color of the Pivot Grid widget header.
--pivotgrid-widget-header-background:#F3F7FA;
--pivotgrid-widget-header-font-color:var(--widget-secondary-font-color);
--pivotgrid-widget-header-fontsize:var(--widget-fontsize);
--pivotgrid-widget-header-fontweight:var(--widget-fontweight);
Font and Background Style for Grouping Button
The following variables allows you to customize the font color, size, weight and background of the Pivot Grid widget’s grouping button.
--pivotgrid-widget-groupingbutton-background:#718096;
--pivotgrid-widget-groupingButton-font-color:#696969;
--pivotgrid-widget-groupingButton-fontsize:var(--widget-fontsize);
--pivotgrid-widget-groupingButton-fontweight:var(--widget-fontweight);
Grouping Button Icon Style
The following variables allows you to customize the font size, color and weight of the Pivot Grid widget’s grouping button icon.
--pivotgrid-widget-groupingButton-icon-font-color:var(--widget-icon-font-color);
--pivotgrid-widget-groupingButton-icon-fontsize:var(--widget-fontsize);
--pivotgrid-widget-groupingButton-icon-fontweight:var(--widget-fontweight);
When Hovering Over the Grouping Button Icon
The following variables allows you to customize the font color, size, weight and background of the Pivot Grid widget grouping button icon while hover.
--pivotgrid-widget-groupingButton-icon-hover-background:#647287;
--pivotgrid-widget-groupingButton-icon-hover-font-color:var(--widget-icon-font-color);
--pivotgrid-widget-groupingButton-icon-hover-fontsize:var(--widget-fontsize);
--pivotgrid-widget-groupingButton-icon-hover-fontweight:var(--widget-fontweight);
Filter Dialog List Styles
The following variables allows you to customize the font color, size, weight, border color and background color of the Pivot Grid widget’s filter dialog list.
--pivotgrid-widget-filterdialog-list-bordercolor:var(--secondary-border-color);
--pivotgrid-widget-filterdialog-list-background:var(--widget-primary-background);
--pivotgrid-widget-filterdialog-list-font-color:var(--widget-secondary-font-color);
--pivotgrid-widget-filterdialog-list-fontsize:var(--widget-fontsize);
--pivotgrid-widget-filterdialog-list-fontweight:var(--widget-fontweight);
Font and Background When Hovering Over the List
The following variables allows you to customize the font color, size, weight and background of the Pivot Grid widget’s filter dialog list.
--pivotgrid-widget-filterdialog-list-hover-background:var(--widget-datavalue-hover-background);
--pivotgrid-widget-filterdialog-list-hover-font-color:var(--widget-secondary-font-color);
--pivotgrid-widget-filterdialog-list-hover-fontsize:var(--widget-fontsize);
--pivotgrid-widget-filterdialog-list-hover-fontweight:var(--widget-fontweight);
Font and Background When Selecting the List
The following variables allows you to customize the font color, size, weight and background of the Pivot Grid widget’s filter dialog list while selection.
--pivotgrid-widget-filterdialog-list-selection-background:var(--widget-selection-background-color);
--pivotgrid-widget-filterdialog-list-selection-font-color:var(--widget-selection-font-color);
--pivotgrid-widget-filterdialog-list-selection-font-fontsize:var(--widget-fontsize);
--pivotgrid-widget-filterdialog-list-selection-font-fontweight:var(--widget-fontweight);
Filter Dialog List Footer Background
The following variables allows you to customize the down arrow color and footer background of the Pivot Grid widget’s filter dialog.
--pivotgrid-widget-filterdialog-list-footer-background:var(--widget-datavalue-hover-background);
Filter Dialog Header
The following variables allows you to customize the font color, size, weight and background of the Pivot Grid widget’s filter dialog header.
--pivotgrid-widget-filterdialog-header-background:var(--widget-datavalue-hover-background);
--pivotgrid-widget-filterdialog-header-font-color:var(--widget-secondary-font-color);
--pivotgrid-widget-filterdialog-header-fontsize:var(--widget-fontsize);
--pivotgrid-widget-filterdialog-header-fontweight:var(--widget-fontweight);
Filter Dialog Cancel Button
The following variables allows you to customize the font color, size, weight and background of the Pivot Grid widget’s cancel button.
--pivotgrid-widget-cancelbutton-background:var(--secondary-btn-bg-normal-color);
--pivotgrid-widget-cancelbutton-font-color:var(--secondary-btn-text-normal-color);
--pivotgrid-widget-cancelbutton-fontsize:var(--widget-fontsize);
--pivotgrid-widget-cancelbutton-fontweight:var(--widget-fontweight);
Cancel Button Background and Font Style While Clicking
The following variables allows you to customize the font color and background of the Pivot Grid widget cancel button while click.
--pivotgrid-widget-cancelbutton-press-background:var(--secondary-btn-bg-normal-color);
--pivotgrid-widget-cancelbutton-press-font-color:var(--secondary-btn-text-normal-color);
Cancel Button Background and Font Style While hovering
The following variables allows you to customize the font color, size, weight and background of the Pivot Grid widget’s cancel button while hovering.
--pivotgrid-widget-cancelbutton-hover-background:var(--secondary-btn-bg-hover-color);
--pivotgrid-widget-cancelbutton-hover-font-color:var(--secondary-btn-text-hover-color);
--pivotgrid-widget-cancelbutton-hover-fontsize:var(--widget-fontsize);
--pivotgrid-widget-cancelbutton-hover-fontweight:var(--widget-fontweight);
Filter Dialog OK Button
The following variables allows you to customize the font color, size, weight and background of the Pivot Grid widget OK button.
--pivotgrid-widget-okbutton-background:var(--primary-btn-bg-normal-color);
--pivotgrid-widget-okbutton-font-color:var(--primary-btn-text-normal-color);
--pivotgrid-widget-okbutton-fontsize:var(--widget-fontsize);
--pivotgrid-widget-okbutton-fontweight:var(--widget-fontweight);
OK Button Background and Font Style While Clicking
The following variables allows you to customize the font color and background color of the Pivot Grid widget’ OK button while clicking.
--pivotgrid-widget-okbutton-press-background:var(--primary-btn-bg-normal-color);
--pivotgrid-widget-okbutton-press-font-color:var(--primary-btn-text-normal-color);
OK Button Background and Font Style While Hovering
The following variables allows you to customize the font color, size, weight and background of the Pivot Grid widget OK button while hovering.
--pivotgrid-widget-okbutton-hover-background:var(--primary-btn-bg-hover-color);
--pivotgrid-widget-okbutton-hover-font-color:var(--primary-btn-text-normal-color);
--pivotgrid-widget-okbutton-hover-fontsize:var(--widget-fontsize);
--pivotgrid-widget-okbutton-hover-fontweight:var(--widget-fontweight);
Pivot Grid Container Styles
The following variables allows you to customize the border radius, color and background color of the Pivot Grid widget’s container styles.
--pivotgrid-widget-container-border-radius:var(--widget-container-border-radius);
--pivotgrid-widget-container-border-color:var(--widget-container-border-color);
--pivotgrid-widget-container-bg-color:var(--widget-primary-background);
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 Pivot Grid widget in the properties.
