Home page and System dashboards

Theme Editor

The Theme Editor allows you to customise page appearance without CSS by adjusting colours, borders, shadows, and other presentation settings in the Presentation tab, or by editing CSS in the Source tab. Themes apply consistently across panels within a section, and users with appropriate access can create and manage themes for Custom Pages and System dashboards.
Themes are applied at the section level, allowing different themes per section or a single theme across the entire page. They are stored at the instance level, meaning any Custom Page or System dashboard themes you create are available across sites and homepages, respectively, within your HighQ instance. However, they are not interchangeable (i.e. System dashboard themes are not visible within sites and Custom Page themes are not visible at system level).
note
Themes can be applied to Custom Pages only, not to legacy dashboards.
There are two modes for customising themes:
  • Presentation tab
     - Use visual controls such as colour pickers, toggles, and sliders to adjust settings without writing code. Changes are reflected in real-time in the Preview tab.
  • Source tab
     - Edit the underlying CSS directly for advanced customisation. Editing CSS in the Source tab disables the Presentation and Preview tabs. To re-enable them, select
    Reset
     to restore the previously saved theme settings.
Themes are validated for uniqueness when saved. If a theme name already exists, the system appends an integer to create a unique name (for example,
ThemeName (2)
).
note
If you provide unacceptable or invalid CSS in the Source tab, the system applies the System default theme instead.

Accessing the theme editor

To access the theme editor:
  1. Navigate to a Custom Page (or System dashboard) and enter
    Edit
     mode.
  2. Locate the section you want to customise.
  3. Select the
    Apply theme
     icon in the top left corner of the section, next to the Column config icon. A tooltip reading
    Apply a theme
     appears when you hover over the icon. The name of the currently applied theme displays next to the icon.
  4. The
    Apply theme
     modal opens, displaying the Presentation, Preview, and Source tabs.

Setting the theme foundation

Before customising settings, choose whether to create a new theme or update an existing one.
In the
Apply theme
 modal, select one of the following options:
  • Create new theme
     - When this option is selected, the
    Based on existing theme
     dropdown acts as a starting point for the new theme. The selected theme is used as a template, and the new theme is saved under the name you define.
  • Use/update existing theme
     - When this option is selected, you can either select an existing theme and apply it without changes, or modify one or more settings, then save and apply the updated theme.
If no theme has been applied to the section, the drop-down defaults to
System default
.

Customising Section presentation

In the
Presentation
 tab, locate the section presentation controls, set the background colour using the colour picker (or enter a Hex value), and select
Reset
 to revert to white if required.

Customising Panel presentation

In the
Presentation
 tab, locate the Panel presentation controls and configure the following settings:
  • Title text color
     - Select the colour picker to set the panel title text colour, or enter a Hex value directly into the field (for example, #D64000).
  • Background color
     - Select the colour picker to set the panel background colour or enter a Hex value directly into the field. The default value is #ffffff (white). Select the Opacity control to make the panel background partially or fully transparent.
  • Show borders
     - Use the dropdown to select On or Off to show or hide panel borders (default is On). When set to On, an additional colour picker appears; select it or enter a hex value to set the border colour (default: #b3b3b3).
  • Show rounded corners
     - Use the dropdown to select On or Off to enable or disable rounded corners on the panel (default: On). When set to Off, corners display as right angles.
  • Show drop shadows
     - Use the dropdown to select On or Off to enable or disable a drop shadow behind the panel (default is Off). When set to On, an additional colour picker appears, select it or enter a Hex value to set the shadow colour, and use the opacity slider to adjust the shadow intensity between 0% and 100% (the default being 50%).

Customising Panel button presentation

In the
Presentation
 tab, use the colour pickers to set the border, text, and background colours for panel buttons in both their static (default) and mouse-over (hover) states.
If required, select
Reset
 to restore all button colours to their default settings.

Applying a theme to all sections

Selecting this option applies the selected theme to all sections on the Custom Page. Any sections added in the future will also adopt this theme.
If this option is not selected, the theme applies to the current section only.

Previewing the theme

Select the
Preview
 tab in the Apply theme modal to review a live preview that updates with changes from the Presentation tab and displays a generic view of customisable elements, including text, backgrounds, borders, rounded corners, opacity, and drop shadows in both selected and unselected states.
note
The preview shows a generic representation of styling elements only. It does not display your actual panel content.

Using the Source tab for advanced CSS customisation

Select the
Source
 tab to view and edit the CSS generated from your Presentation settings. Once you make any changes in the Source tab, the Presentation and Preview tabs are disabled. Your updated CSS is applied when you select
Save
.
If required, select
Reset
 to restore default or previously selected theme settings and re-enable the disabled tabs.
note
The system validates CSS for XSS and CSS compliance. If you provide malicious or inappropriate CSS, the System default theme is applied instead. If you save a custom CSS theme and return to edit it later, the Source tab opens directly with the Presentation and Preview tabs disabled.
After making your customisations, select
Save
 in the Apply theme modal. The system validates your input based on your selected theme foundation.

Themes in Site and Custom Page templates

  • When you create a site template, all themes used within Custom Pages in that site are captured.
  • When you create a Custom Page template, all themes used within that Custom Page are captured.
  • When importing a template, the system checks that theme names are unique. If a theme name already exists, the system appends an integer to create a unique name.

This article applies to:

  • Product: HighQ
  • Subject: Dashboards