Design: Using Custom CSS

There are times when you need to tweak the appearance of your public dashboard above what is provided. You can use the CSS Overwrite setting located in Site Settings to do that.

Here are some frequently requested style changes:

1. Increase the Height of the Logo Image
2. Centering the Status and Progress indicators on the home page
3. Adjust the font size of Status and Legend

Increase the Height of the Logo Image

By default, the logo image's height is set to 60px. The code below will increase the height of the logo image to 100px.

.page-wrapper .page .header .logo-header {max-height: 100px};

Status and Progress indicators on the home page

Sharing the Overall Progress and Status of your plan on your homepage can be enabled using the 'Overall Status/Progress' option on the Public Dashboard Admin page. Below are some options to adjust the look of the indicator. 

Centering the Status and Progress

By default, the Status and Progress indicators on the home page of your public dashboard are left-justified. The code below will center these elements on the page.

.page.homepage .health-status {
   margin: 15px auto 0;
}

Adjust the font size of Status and Legend

The font size of 'Status' and the Status Legend can also be increased or decreased if desired using the code below:

.health-status-chart-legend {
   font-size: 12px;
}

.health-status-chart .health-status-chart-status {
   font-size: 12px;
}

 

Increase the size of the Progress circle on interior pages

The size of the progress circles can also be adjusted if needed using the code below:

.progress-ring-wrapper {
    transform: scale(1.3);
} 

Note: the scaling factor can be adjusted to your preference. As the circle is scaled higher it affect other elements on the page:

Note: We will add to this article as requests come in. Check back often!