Skip to content

Change the site colours

The site's colours come from a palette of ten colours, set in a single place. Changing a colour in the palette changes it everywhere at once: activities, pages, header, menu, coloured blocks.

For administrators only

The colours make up the site's visual identity. Only administrators change them; editors can view the screen and copy the CSS classes (see Colour a block). If you cannot make changes, ask the site administrator.

Change an existing colour

  1. Open Settings > Colours.
  2. In the Palette, find the colour to change (by its number and its name).
  3. Click the Select Color button on that row.
  4. Choose the new colour: in the square, with the hue bar, or by pasting the code given in the visual identity guidelines (a # followed by six characters, for example #e67e22).
  5. Click Save Changes, at the bottom of the screen.

The message "Settings saved." confirms the operation. The site's cache is cleared automatically: visitors see the new colours on their next visit.

Do not change the name, only the colour

If orange becomes a softer orange, change the colour, not the name orange: renaming a colour would break the blocks on the pages that use it (see Pitfalls).

Change the site's main colour

The default colour is used for the header, the footer, the menu and pages with no colour of their own.

  1. In Settings > Colours, Colour roles section, find Default colour.
  2. Choose another colour from the palette in the list.
  3. Click Save Changes.

The sub-menus follow: they use this colour, slightly lightened (Submenus colour setting).

Add a colour to the palette

The palette has ten slots, some of which may be empty. To use one:

  1. Find a slot with no colour.
  2. Enter a name in English, in lower case, with no accents or spaces (green, light-blue).
  3. Choose its colour.
  4. Click Save Changes.

The colour then appears in the choice lists for activities, pages and roles.

Colour a block on a page

  1. In Settings > Colours, click Background (colour of the block's background) or Text (colour of the text) on the row of the colour you want. The class is copied.
  2. In the Avada builder, open the block's settings, General tab.
  3. Paste the class into the CSS Class field, then save the page.

For white text on a coloured background, also add the text-white class (Copy button below the palette). Details and examples: Background and Text buttons.

Choose the colour of an activity

The colour of an activity is chosen from the palette, on the activity's screen: see Activities and venues.

Pitfalls

  • Renaming a colour breaks the pages whose blocks use its old class: they lose their colour. Only do it if it is really necessary.
  • Emptying a slot that is still in use removes that colour from everything that used it. First choose another colour everywhere it was used.
  • A "custom" colour (outside the palette) on a page or an event does not follow changes to the palette.

If it does not work

  • The site has not changed: did you click Save Changes? Then reload the page with Ctrl + F5 (on a Mac: Cmd + Shift + R).
  • A block has lost its colour: its class no longer matches a colour in the palette (name changed, slot emptied).

Going further