How to Customize Grid Column Header Styling (Background, Font, Weight) via Custom CSS

Version: DashboardFox v12
Role: Admin
Permission: Admin access

Overview

You can customize the appearance of column headers (background color, text color, font size, and font weight) for grid visualizations by adding a few lines of Custom CSS in the Branding configuration. Because DashboardFox uses two different grid components under the hood, the CSS selector you need depends on which grid type you are styling.

Which Grid Am I Styling?

• Default Data Grid — The standard grid visualization used for most reports. Use the .jqx-grid-column-header selector.

• Aggregate Grid Visualization — The grid used specifically for aggregate/summary visualizations. Use the .dx-datagrid-headers + .dx-header-row selectors.

If you use both grid types, you can include both CSS blocks in the same Custom CSS area.

Option 1: Styling the Default Data Grid Headers

Use this snippet to change the background color, text color, font size, and bold the column headers on the standard Data Grid.

.jqx-grid-column-header {
    background-color: #48cae4 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

Adjust the hex color values (#48cae4 for the header background, #ffffff for the text) to match your brand colors.

Option 2: Styling the Aggregate Grid Visualization Headers

The Aggregate Grid uses a different underlying component, so a different selector is required. Note that targeting only .dx-datagrid-headers will change the header background, but the text color, size, and weight will not apply because those properties are set on inner elements. You must also target .dx-header-row > td and its inner text wrapper.

.dx-datagrid-headers {
    background-color: #005fac !important;
}
 
.dx-datagrid-headers .dx-header-row > td,
.dx-datagrid-headers .dx-header-row > td > .dx-datagrid-text-content {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

Adjust the hex color values (#005fac for the header background, #ffffff for the text) to match your brand colors.

How to Apply the CSS in Branding

Step 1: Navigate to Branding in the Admin area.

Step 2: Create a new branding profile or edit an existing one. Give it a descriptive name (e.g., "Bold Grid Headers").

Step 3: Scroll down to the Advanced Customizations section.

Step 4: Paste your CSS snippet(s) into the Custom CSS text area.

Step 5: Assign the branding profile to the appropriate audience:

• All Users — applies globally, or

• A specific Group or User — applies only to that audience.

Step 6: Click Save & Apply.

The styling will take effect the next time the user logs in and views the applicable grid visualization.

Tips

• Both CSS blocks can be pasted into the same Custom CSS area if your environment uses both grid types.

• Always include !important on each property — the default grid stylesheets use specific selectors that will otherwise override your changes.

• Double-check hex color codes are exactly 6 digits (e.g., #ffffff, not #fffff). A 5-digit value is invalid and will be silently ignored by the browser.

• If you want to test on yourself first, assign the branding profile to your own user before rolling it out to a group or all users.