Skip to content

The site colours

The site colours are not chosen freely, screen by screen: they all come from a single palette, defined once and for all. This page explains this principle and its consequences. The details of the screen are in Colours.

In one minute

  • The palette has ten colours, placed in slots numbered 1 to 10. It is set in Settings > Colours.
  • Everywhere else (an activity, a page, a post category), you choose one of these colours from a list. You never enter a colour code.
  • The site remembers the number of the chosen slot, not the colour itself.

Hence the main consequence: changing a colour in the palette changes it everywhere at once. If the centre's orange becomes a softer orange, all the activities, pages and blocks that use it follow, without your having to go back over them one by one.

Who can change the colours

The colours make up the site's visual identity: only administrators can change them. Editors open the same screen in read-only mode, to copy the colours' CSS classes from it (see below).

If you feel a colour should change, contact the site administrator.

Where each colour is used

A colour from the palette can be used in four places.

Activities. Each activity is given a colour. Its sessions take this colour in the public calendar, in the "Upcoming" blocks and on the event page. An event can, exceptionally, be given a colour of its own (see below).

Pages and post categories. A page can be given its own colour; otherwise, it takes the site's default colour. The same goes for a post category.

Roles. Some parts of the site have an assigned colour, chosen from the palette:

Role What it colours
Default colour The site's dominant colour: header, footer, menu, pages without a colour of their own.
Calendar buttons colour The navigation buttons of the public calendar.
Scrollbars colour The scrollbars of the page and of the scrolling banners.

Sub-menus do not have a colour of their own: they use the default colour, slightly lightened. They therefore stay in tune with the menu when that colour changes.

Blocks in Avada pages. A block on a page (a section, a text, a title…) can take a colour from the palette (see below).

Colouring a block on a page

In pages built with Avada, you colour a block by adding a CSS class to it: a small keyword, pasted into the CSS Class field of the block's settings. Each colour in the palette has two classes, to copy from the Colours screen:

  • background-color- followed by the colour's name, to colour the block's background (background-color-orange);
  • text-color- followed by the colour's name, to colour its text (text-color-orange).

The text-white class writes the text in white, on a coloured background.

The steps to follow and examples are in Background and Text buttons.

A colour's name matters

The classes are built from the colour's name. If orange is renamed amber, the background-color-orange class no longer exists, and the blocks that used it lose their colour. Changing a slot's shade, on the other hand, breaks nothing. See Name.

Exceptions

Two settings accept a colour outside the palette:

  • a page: "Page colour" > "Choose another colour";
  • an event: "Custom colour", when it needs to stand out from its activity.

These colours do not follow changes to the palette. Keep them for genuine exceptions.

When the change becomes visible

As soon as an administrator saves a change to the colours, the site's cache is emptied: visitors see the new colours on their next visit. If your own browser still shows the old ones, reload the page with Ctrl + F5 (on a Mac: Cmd + Shift + R).

Going further