Custom Themes

You can choose a colour theme for your section.  In t4, colour choices are known as Custom Themes. If you don't define a custom theme, your pages will inherit the theme from the parent section.

Each Custom Theme is made up of a maximum of four colours. These are defined as ‘Primary’, ‘Secondary A’, ‘Secondary B’ and ‘Accent’. These colours are applied automatically to the content.

  • The 'Primary' colour- the main element which colours the navigation. It is also used on elements in the page and acts as the default colour for elements where there is colour choice (Banner-bottom block, or Colour block in Sidebar or Highlightbox). 
  • ‘Secondary A’, ‘Secondary B’ and ‘Accent’ - used on content types that are coloured, like the Colour block

'Primary' and 'Secondary' colours are used for elements that have text on them, For example:

Colour themes on coloured blocks

 

The 'Accent' colour will be a bright tone and is only used on highlight elements like arrows and lines, see example above. It is not suitable for having text overlaid on it as content would become inaccessible.  t4 will not allow this to happen.

We have defined eight themes, which you can view below:

Pink Theme

Green Theme

Red Theme

Blue Theme

Teal / Blue / Plum Theme

Violet / Blue / Navy Theme

Orange / Green / Imperial Blue Theme

Brick / Navy / Teal Theme

Give it a try

To add a Custom Theme for a set of pages within the site, it will need to be 'activated' for that section.  Follow the instructions below:

1. Go the top page of your site structure, and create a hidden section called 'Custom Theme'.  The name is case sensitive and it must not contain additional spaces or characters.  See the screenshot below;

2. Uncheck the 'Show in navigation' box in the form and hit the 'add' button;

The system will detect the name of the section, recognise that it is a special folder and no longer treat it is a sub-page.

Screen grab of the folder structure Note: the grey folder denotes a section that is hidden from the navigation.

3. Go to your Custom Theme section in the site structure, hover over the yellow drop down button and click 'Add content'.  Choose the Custom Theme content type. (Find out more information about adding a content type to a section);

4. Give your content the name, 'Custom theme';

5. Choose a colour theme from the dropdown list, e.g. 'Green';

6. Leave the Local footer section as it is. See Local footer for guidance.

Screenshot

7.  Click Add and Approve to save.

8. Preview the results and publish them when you're happy.  

You can add as many Custom Themes as you like to different branches within your website.