Applying Styles

Cascading Style Sheets (CSS) can be used to style the way the dashboard elements are presented on the screen. You can apply CSS at an overall dashboard and/or page level.

Dashboard-Level Styles

To define default styles for a dashboard:

1. Click on the Dashboard Name in the Navigation Menu in the Left Panel
2. In the Properties Menu in the Right Panel, click on Dashboard Settings
3. If required, replace the HumanListening logos by clicking Upload logo (see Branding below)
4. Enter your CSS in the Custom Css field

Dashboard Settings also includes Skip Apply Button. Turn this on to apply filter selections in the published dashboard as soon as a viewer changes them, without the viewer needing to click an Apply button.

Example Dashboard CSS

Here’s an example of common dashboard styling:

/* Importing Custom Font - @import must come first, or the font won't load */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* Background Color of Dashboard */
.page-container {
    background-color: #ffffff !important;
}

/* Heading Styles - Font, Size, Color and Font Weight */
h1 {
    font-family: 'Roboto', sans-serif !important;
    font-size: 25px;
    color: #002748 !important;
    font-weight: 700 !important;
}

h2 {
    font-family: 'Roboto', sans-serif !important;
    font-size: 20px !important;
    color: #002748 !important;
    font-weight: 700 !important;
}

h3 {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px;
    color: #002748;
    font-weight: 700;
    margin-block-start: 0em !important;
    margin-block-end: 0em !important;
    padding: 35px 0;
}

h4 {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #444444 !important;
}

h6 {
    font-family: 'Roboto', sans-serif !important;
    color: #444444 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-block-start: 1.2em;
    margin-block-end: 1.2em;
}

/* Paragraph Styles - Font, Size, Color and Font Weight */
p {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    color: #444444 !important;
    font-weight: 400 !important;
}

/* Single Value Tile - main value */
.dashboard-tile-body {
    font-family: 'Roboto', sans-serif !important;
    font-size: 40px !important;
    color: #e67e23 !important;
    font-weight: 700 !important;
    margin-block-start: 0em;
    margin-block-end: 0em;
}

/* Heading Style for Mobile - Font, Size, Color and Font Weight */
@media only screen and (max-width: 600px) {
    h1 {
        font-family: 'Roboto', sans-serif !important;
        font-size: 40px !important;
        color: #002748 !important;
        font-weight: 700 !important;
    }
}

/* Comment Component - Changes Background Color */
.comment-content-container {
    background-color: #999 !important;
    padding-bottom: 10px;
}

.comment-header-container .mat-toolbar-row {
    background-color: #999 !important;
}

.comment-header-counter {
    background-color: #999 !important;
    color: #fff !important;
    border-radius: 3px;
    padding: 0px 5px;
    text-align: center;
}

Page-Level Styles

To define default styles for a specific page:

1. Click on the Page Name in the Navigation Menu in the Left Panel
2. In the Properties Menu in the Right Panel, click on Page Settings
3. Enter your CSS in the Custom Css field

Page styles override dashboard styles

Any styles specified at the page level will only apply to the selected page and will override dashboard-level styles.

Page Settings also contains a Data Settings group, which controls low base blocking for the page. See Dashboard pages for details.

Branding

Uploading Your Logo

To add your organization’s branding:

1. Navigate to Dashboard Settings
2. Under Desktop Logo, click Upload logo
3. Drop your image file into the upload box, or browse to select it. Logos must be JPG or PNG files smaller than 10 MB.
4. To set the logo used on mobile devices and on the dashboard tile, click Upload logo under Mobile/Tile Icon (recommended size 36px x 36px)
5. The desktop logo will appear in the header of your published dashboard

To go back to the default HumanListening logo, click Reset logo under the logo you want to reset.

Logo best practices

For best results, use a PNG with a transparent background so the logo sits cleanly on your dashboard header.

CSS reference

The tables below list the CSS selectors you can use in the Dashboard Settings or Page Settings CSS fields to style your published dashboard.

Page layout

Selector	What it targets
.page-container	The overall page background
.filter-container	The filter bar at the top of the page
.dashboard-filter-screen-size-md, .dashboard-filter-screen-size-sm, .dashboard-filter-screen-size-xs	An individual filter in the filter bar, on desktop, tablet and mobile respectively

Typography

Selector	What it targets
h1 – h6	Heading elements
p	Paragraph text
.dashboard-tile-header	The header of a Single Value Tile
.dashboard-tile-body	The body of a Single Value Tile, which holds the main value
.dashboard-tile-footer	The footer of a Single Value Tile

Using custom fonts

To use a custom font, add an @import statement at the top of your CSS:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Then apply it to the elements you want to style, e.g. h1 \{ font-family: 'Roboto', sans-serif !important; \}

Comment components

Selector	What it targets
.comment-content-container	The comment body area
.comment-header-container .mat-toolbar-row	The comment header bar
.comment-header-counter	The comment counter badge

Chart elements

Dashboard Publisher uses Highcharts for all chart components. You can target chart elements using the following selectors.

Titles and labels

Selector	What it targets
.highcharts-title	Chart title
.highcharts-subtitle	Chart subtitle
.highcharts-data-label	Data labels on chart points
.highcharts-axis-labels	Axis label text (both axes)
.highcharts-axis-title	Axis title text

Series and data

Selector	What it targets
.highcharts-series	All data series
.highcharts-series-0, .highcharts-series-1, etc.	A specific data series (zero-indexed)
.highcharts-point	Individual data points

Legend

Selector	What it targets
.highcharts-legend	The legend container
.highcharts-legend-item	An individual legend entry

Grid and axes

Selector	What it targets
.highcharts-grid-line	Grid lines across the plot area
.highcharts-axis-line	The axis line itself
.highcharts-tick	Tick marks on the axis

Background and borders

Selector	What it targets
.highcharts-background	The chart background
.highcharts-plot-background	The plot area background
.highcharts-plot-border	The plot area border

Tooltips

Selector	What it targets
.highcharts-tooltip	The tooltip container
.highcharts-tooltip-box	The tooltip background box

Chart styling examples

Change the chart title font and color:

.highcharts-title {
    fill: #002748 !important;
    font-size: 16px !important;
    font-family: 'Roboto', sans-serif !important;
}

Style axis labels:

.highcharts-axis-labels text {
    fill: #666666 !important;
    font-size: 11px !important;
}

Change grid line color:

.highcharts-grid-line {
    stroke: #e6e6e6 !important;
    stroke-width: 1px;
}

Make the chart background transparent:

.highcharts-background {
    fill: transparent !important;
}

Style legend text:

.highcharts-legend-item text {
    fill: #333333 !important;
    font-size: 12px !important;
}

Responsive styles

Dashboards support three viewport sizes. Use media queries to apply different styles for each:

Viewport	Breakpoint
Mobile	max-width: 599px
Tablet	min-width: 600px, max-width: 959px
Desktop	min-width: 960px

/* Adjust heading size for mobile */
@media only screen and (max-width: 599px) {
    h1 {
        font-size: 18px !important;
    }
}

Styling tips

• Use !important when necessary to override default styles — most dashboard elements require it
• Test your styles across Desktop, Tablet, and Mobile modes using the layout bar
• Keep accessibility in mind — ensure sufficient color contrast between text and backgrounds
• Import custom fonts at the top of your CSS using @import statements
• Dashboard-level CSS applies to all pages; page-level CSS applies only to that page and overrides dashboard-level styles

---

Frequently asked questions

What image formats can I use for logos?

Dashboard Publisher accepts JPG and PNG files for logo uploads. Other formats are not supported and will return an “Unsupported file type” error. For mobile and tile icons, the recommended size is 36px x 36px.

How many default colors are available for charts?

Dashboard Publisher provides 10 default colors for chart components. In the Colours property section, click the arrow next to a color to open a color picker and change it. You can also add a color with the + button, or remove colors you don’t need. The same 10 default colors are used across all chart types.

How do I change the tile icon for a dashboard?

1. Open the dashboard in Dashboard Publisher.
2. Click on the dashboard name in the Navigation Menu.
3. In the Properties Menu, expand Dashboard Settings.
4. Under Desktop Logo, click Upload logo to set the desktop logo (displayed in the upper left corner of the published dashboard).
5. Under Mobile/Tile Icon, click Upload logo to set the icon used on mobile devices and on the dashboard tile.

Both logos default to the HumanListening logo, and Reset logo restores the default. The recommended size for the mobile/tile icon is 36px x 36px.

What should I do if a logo upload fails?

Logo uploads can fail for several reasons:

1. Check the file format — only JPG and PNG files are supported. If you’re using a different format, convert it first.
2. Check the file size — logos must be smaller than 10 MB.
3. Try again later — if you see “File upload and prepare failed”, the issue may be temporary. Wait a moment and retry.