Set up the site colour theme

What is a colour theme?

Your colour theme is the set of colours which you use across your site, and should be tied to your campaign’s brand and external marketing. This helps you have a consistent look and feel for your campaign.

The campaign platform comes with 3 preset themes you can choose from. You can also set a custom theme using your own colours.

Use a preset theme

Each preset theme has 6 shades of red, green or blue and all include black, white and grey. Colours with a higher number (400 to 600) are darker. If you choose one of these colours for your site components they will automatically use white text make it easier for users to read (Image 1).

Image 1: colour shades available for each preset theme and how text is displayed for readability.

These colours will be used for:

To choose your preset theme colours:

  1. In the left sidebar, hover over the Appearance button and click ‘Theme Options’.
  2. Click the button under Colours so it says ‘Preset’.
  3. Under Theme colour palette click the drop-down arrow and select the colour theme you want for your campaign.
  4. Under Accent colour click the drop-down arrow and select the colour you want for your site accents.
  5. Under Navigation background click the drop-down arrow and select the colour you want for your top navigation menu.
  6. Review your settings (Image 2).

Under ‘Publish’ click ‘Publish’ (or ‘Update’).

Image 2: example settings for using a preset colour theme on your site.

Use a custom theme

You can create a custom theme for your site to match your campaign brand or marketing. When you decide your colours, check they meet contrast accessibility standards. You also need to consider how text will appear on these colours and identify which colours need white and black text.

To choose your custom theme colours:

  1. In the left sidebar, hover over the Appearance button and click ‘Theme Options’.
  2. Click the button under Colours so it says ‘Custom’.
  3. Under Custom colours click ‘Add colour’.
  4. Click ‘Select colour’ and then add the hexadecimal value into the box.
  5. Name your colour and add ‘400’, ‘500’ or ‘600’ to the end if you identified it’s dark enough to need white text.
  6. Repeat steps 3 to 5 until you’ve added all the colours you need.
  7. Review your settings (Image 3).
  8. Under Publish click ‘Publish’ (or ‘Update’).

Once you have saved these options you can use these colours across your site. Edit your custom theme again to add them to the Accent and Navigation settings in the Theme Options.

Previous section:

Set up the header navigation menu

Next section:

Set up site privacy and cookie options

In this section