Configure portal styling

Portal styling controls the visual appearance of a portal, including its colour scheme, typography, and button styles. Configuring styling before building CMS pages ensures that colours, fonts, and buttons are available to widgets as you add them.

The portal must exist before theming can be configured. See Add and manage portals if you have not yet created the portal.

To configure portal styling:

  1. Navigate to your portal.

  2. Select the cog icon at the top right of the portal view, then select Portal Settings.

  3. In the top navigation bar, select Theming.

    The Theming panel opens on the right-hand side of the view.

Configure site appearance colours

The Site Appearance section of the Theming panel controls the portal’s colour scheme. These colours are used across the portal and become available as options when configuring widget backgrounds.

  1. In the Theming panel, select the Colours block under Site Appearance.

  2. Update any of the following colour fields as required:

    • Primary Colour: The main brand colour, used for buttons and interactive elements.

    • 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.

      Select your darkest shade of text colour. Five lighter contrasting colours are generated automatically.

    • Background Colour: The default page background colour.

      Select your lightest shade of background colour. Five darker contrasting colours are generated automatically.

      Colours must be entered in RRGGBB hexadecimal format. If the value entered is not in this format, a validation warning displays beneath the field.

  3. To preview how your colours will appear on text and buttons, expand the Accessibility Checker at the bottom of the panel.

  4. Select Save Changes.

Configure CMS text appearance

CMS text appearance controls the typography used in text widgets across your CMS pages. Three text styles are available: Text, Text 1, and Text 2.

  1. In the Theming panel, select Text under CMS Appearance.

  2. Expand the font family dropdown at the top to set a shared font family for all text styles, or expand each text style individually to configure it separately.

  3. For each text style, configure the following as required:

    • Font family.

    • Font weight (100 Thin to 900 Heavy).

    • Size (0–140px).

    • Line height (0–70px).

    • Letter spacing (0–70px).

    • Text format: Italic and/or bold.

    • Text transform: None, Uppercase, Lowercase, or Capitalise.

  4. Select Save Changes.

    Changes apply dynamically to all text widgets in the portal’s CMS pages.

Configure heading styles

Up to six heading levels can be configured. Heading styles correspond to the heading options available in the text widget editor.

  1. In the Theming panel, select Headings under CMS Appearance.

  2. Expand the heading level you want to configure (Heading 1 through Heading 6).

  3. For each heading level, configure the following as required:

    • Font family.

    • Font weight.

    • Font size (px slider).

    • Line height (px slider).

    • Letter spacing (px slider — negative values are permitted).

    • Text format: Italic and/or underline.

    • Text transform: None, Uppercase, Lowercase, or Capitalise.

      Changes preview live in the panel and update on any open CMS pages.

  4. Select Save Changes.

Configure button styles

Button styles control the appearance of button widgets in CMS pages. Three button types can be configured: Primary, Secondary, and Tertiary.

  1. In the Theming panel, select Buttons under CMS Appearance.

  2. Select the button type you want to configure.

  3. Configure the available options:

    Colours

    Enter background and text colours in RRGGBB format. Adjust background opacity using the slider (default 100%).

    Borders

    Select a border side option: None, Bottom, or All. Enter a border colour in RRGGBB format and a border width in px. Adjust the border radius to curve the button corners — enter values for Top Left, Top Right, Bottom Left, and Bottom Right in px (default 0px produces a rectangular button).

    Padding

    Enter padding values for Top, Right, Bottom, and Left in px.

    Typography

    Configure font family, font weight, font size, line height, letter spacing, text format (italic/underlined), and text transform.

    Changes preview live in the panel as you make them.

  4. Select Save Changes.

    The configuration applies to all button widgets of that type across the portal’s CMS pages.

  5. Repeat for the remaining button types as required.

Create colour palettes

Colour palettes define named sets of brand colours that can be displayed in CMS pages using the colour palette widget. Creating palettes here makes them available for selection when configuring that widget.

Colour palettes are available in brand portals only. See Add widgets to a CMS page for details on displaying palettes using the colour palette widget.

  1. In the Theming panel, select Colour Palettes under CMS Appearance.

    Any previously created palettes display here.

  2. Select + Add New Palette.

  3. In the Create Colour Palette modal, enter a name for the palette.

  4. Configure the first colour:

    1. Enter a colour name in the Colour Name field.

    2. Enter a hex value in RRGGBB format in the Colour field, or select the colour swatch to open the colour picker.

  5. Select + Add Colour to add further colours to the palette. Repeat as required.

  6. Select Create.

    The modal closes and the new palette displays in the Colour Palettes list.

To add further palettes, select + Add New Palette and repeat the process.

To edit or delete an existing palette, select the …​ menu next to the palette name.

Related pages