Overview

The Site Theme includes all site wide theme settings (e.g. text colors, heading size, etc). It also includes the Font settings for the site, the site Favicon, and any custom CSS rules. These settings and styles are applied to every page of the site. CSS in the Portal is truly cascading, so CSS applied to a page, or to an individual block will overwrite CSS at a higher level (e.g. site).

How do I get to the Themes?

You can get to the Themes in a couple ways.

If you are on a page in the Portal, open the context menu and click Themes.

If you are on the admin page, click Themes in the menu.

Here you will see all the available themes in the Portal.

With any of the existing themes you have several options.

  • Apply - Apply this theme to the Portal
  • Edit - Edit the theme
  • Duplicate - Duplicate the theme
  • Delete - Delete the the theme

Duplicating a theme

When you first start to theme your site you'll want to make a copy of the default theme using the 'Duplicate Theme' link at the bottom of the editor. This way you can make changes to the theme and save them as your own. If you ever need to switch back to the default theme, it will be in the list.

Creating / Editing Themes

Theme

Name your theme with the Theme Name.

In the Theme Settings, you can set site wide CSS variables.

For example, if you want to change the background color of every page, you would edit the --body-bg-color CSS variable. If you plan to use a page template with a header and/or sidebar, adjust the height, width and background colors of these here.

The Chart Theme select menu allows you to choose the chart theme that will be applied to all chart blocks on your Portal. This is an easy way to ensure all your charts and graphs match the look and feel of your brand and the rest of the Portal. You can also override the settings from the chart theme in the configuration of an individual chart block.

CSS

Apply site wide CSS on this tab.

Fonts

Customize the font stack in the Portal.

Favicon

Upload a custom favicon by clicking on the existing favicon image.