Theming options reference
This page specifies all fields and options available in the portal Theming panel.
To configure portal styling, see Configure portal styling. To open the Theming panel, select the cog icon at the top right of any portal view, select Portal Settings, then select Theming in the top navigation bar.
Quick reference
| Section | Subsection | What it controls |
|---|---|---|
Site Appearance |
Colours |
The portal’s colour scheme: primary, secondary, text, and background colours |
CMS Appearance |
Text |
Typography for body text in CMS text widgets |
CMS Appearance |
Headings |
Typography for heading levels 1–6 in CMS text widgets |
CMS Appearance |
Buttons |
Appearance of primary, secondary, and tertiary button widgets |
CMS Appearance |
Colour Palettes |
Named brand colour palettes for use in the colour palette widget (brand portals only) |
Site appearance
The Site Appearance section controls the portal’s colour scheme. Colours configured here are applied globally across the portal and become available as background colour options when configuring individual widgets.
Colours
The Colours section controls the portal’s colour scheme. These colours are applied across the portal and are available as options when configuring widget backgrounds.
All colour values must be entered in RRGGBB hexadecimal format.
If a value is not in this format, a validation warning displays beneath the field.
| Field | Description |
|---|---|
Primary Colour |
The main brand colour, used for buttons and interactive elements across the portal. |
Colour on Primary |
The text or icon colour displayed on top of the primary colour. |
Secondary Colour |
A supporting brand colour. |
Colour on Secondary |
The text or icon colour displayed on top of the secondary colour. |
Text Colour |
The default text colour across the portal. Enter the darkest shade required. Five lighter contrasting shades are generated automatically. |
Background Colour |
The default page background colour. Enter the lightest shade required. Five darker contrasting shades are generated automatically. |
Accessibility Checker
The Accessibility Checker is collapsed by default at the bottom of the Colours section. Expand it to preview how the configured colours appear in combination.
| Combination | What it previews |
|---|---|
Contrast on Primary |
Colour on Primary displayed against the Primary Colour |
Contrast on Secondary |
Colour on Secondary displayed against the Secondary Colour |
Primary on Tile |
Primary Colour displayed against the Background Colour |
Secondary on Tile |
Secondary Colour displayed against the Background Colour |
Page Text on Tile |
Text Colour displayed against the Background Colour |
CMS appearance
The CMS Appearance section controls the typography and visual style of content elements within CMS pages. Settings here define the options available to content editors when they configure text widgets, button widgets, and colour palette widgets.
Text
The Text section controls the typography used in text widgets across the portal’s CMS pages. Three text styles are available: Text, Text 1, and Text 2.
A shared font family can be set for all three styles using the font family dropdown at the top of the section. Each style can also be configured individually.
The following fields are available per text style:
| Field | Range / options | Description |
|---|---|---|
Font Family |
Dropdown of available fonts |
The typeface used for this text style. |
Font Weight |
100 Thin – 900 Heavy |
The weight of the typeface. |
Size |
0–140px (slider) |
The font size. |
Line Height |
0–70px (slider) |
The spacing between lines of text. |
Letter Spacing |
0–70px (slider) |
The spacing between individual characters. |
Text Format |
Italic, Bold |
Applies italic and/or bold formatting. |
Text Transform |
None, Uppercase, Lowercase, Capitalise |
Controls capitalisation of the text. |
Changes apply dynamically to all text widgets in the portal’s CMS pages once saved.
Headings
The Headings section controls the typography for heading levels 1–6 in CMS text widgets. Heading styles correspond to the heading options available in the text widget editor.
Changes preview live in the panel and update on any open CMS pages as you configure them.
The following fields are available per heading level:
| Field | Range / options | Description |
|---|---|---|
Font Family |
Dropdown of available fonts |
The typeface used for this heading level. |
Font Weight |
Dropdown of available weights |
The weight of the typeface. |
Font Size |
px slider |
The font size. |
Line Height |
px slider |
The spacing between lines. |
Letter Spacing |
px slider (negative values permitted) |
The spacing between individual characters. Negative values reduce spacing. |
Text Format |
Italic, Underline |
Applies italic and/or underline formatting. |
Text Transform |
None, Uppercase, Lowercase, Capitalise |
Controls capitalisation of the heading text. |
Buttons
The Buttons section controls the appearance of button widgets in the portal’s CMS pages. Three button types can be configured: Primary, Secondary, and Tertiary.
Each button type has four subsections: Colours, Borders, Padding, and Typography. Changes preview live in the panel as you configure them.
Colours
| Field | Range / options | Description |
|---|---|---|
Background Colour |
RRGGBB hex value |
The fill colour of the button. |
Background Opacity |
0–100% (slider) |
The opacity of the button background. Defaults to 100%. |
Text Colour |
RRGGBB hex value |
The colour of the button label text. |
Borders
| Field | Range / options | Description |
|---|---|---|
Border Sides |
None, Bottom, All |
Controls which sides of the button have a visible border. |
Border Colour |
RRGGBB hex value |
The colour of the border. Displayed when Border Sides is set to Bottom or All. |
Border Width |
px value |
The thickness of the border in pixels. |
Border Radius — Top Left |
px value (default 0px) |
The radius of the top-left corner. A value of 0px produces a sharp corner. Increasing the value curves the corner. |
Border Radius — Top Right |
px value (default 0px) |
The radius of the top-right corner. |
Border Radius — Bottom Left |
px value (default 0px) |
The radius of the bottom-left corner. |
Border Radius — Bottom Right |
px value (default 0px) |
The radius of the bottom-right corner. |
Padding
| Field | Range / options | Description |
|---|---|---|
Top |
px value |
Padding above the button label. |
Right |
px value |
Padding to the right of the button label. |
Bottom |
px value |
Padding below the button label. |
Left |
px value |
Padding to the left of the button label. |
Typography
| Field | Range / options | Description |
|---|---|---|
Font Family |
Dropdown of available fonts |
The typeface used for the button label. |
Font Weight |
Dropdown of available weights |
The weight of the typeface. |
Font Size |
px slider |
The font size of the button label. |
Line Height |
px slider |
The line height of the button label. |
Letter Spacing |
px slider |
The spacing between characters in the button label. |
Text Format |
Italic, Underline |
Applies italic and/or underline formatting to the button label. |
Text Transform |
Uppercase, Lowercase, Capitalise |
Controls capitalisation of the button label. |
Colour palettes
The Colour Palettes section is where named sets of brand colours are created and managed. Palettes defined here are available for selection when configuring the colour palette widget on a CMS page.
| Colour palettes are available in brand portals only. |
Colour palettes define named sets of brand colours that can be displayed in CMS pages using the colour palette widget. Palettes created here are available for selection when configuring the colour palette widget.
| Field | Description |
|---|---|
Palette Name |
The display name of the palette. Required. |
Colour Name |
The display name for an individual colour within the palette. Required per colour. |
Colour |
The hex value of the colour in |
Multiple colours can be added to a palette using + Add Colour. Multiple palettes can be created for a portal.