Setting a Container Base BG to use a Source Settings colour

Heres a cool way to access the colours setup in the Source Settings such as the Accent, Accent Alt, Secondary, Alt, etc., and apply a colour to be a background colour in a Container. You can use the Custom CSS facility in a Container Base to access teh colour to use for a background.

E.g. To do this for the Secondary colour, you would add the following into the Custom CSS box for say Container Base with ID set to 2, into Background 1:

background-color: var(–second-color);

This sets the BG colour to whatever the Secondary colour is set to in the Source Settings, for every Container that is set to use Base Background 1 with the BG ID set to 2.

The technique is used here at - clicking on any clickable element will take you to another page. The only difference between the 2 pages is that Secondary Colour is light blue in 1 page, and light beige in the 2nd page.

By adding the Source Settings into a Partial used on every page, would make this change across the entire site.


Many of the Source Base colours can already be applied to Container / Grid backgrounds just by selecting the relevant option in the background dropdown. Not all are there though and so this approach would be required for some.

For those that are interested in this kind of approach, I’ve got a page on the Knowledge Base about tapping into the Source Colours:


The knowledge base is terrific!

1 Like