Custom Themes

You can select a colour theme for your branch/website.  In T4, colour choices are known as Custom Themes. If you don't define a custom theme, your pages will inherit the colour theme from the first Custom Theme above your branch.

Each Custom Theme is made up of four colours from the College colour palette. ‘Primary’, ‘Secondary A’, ‘Secondary B’ and ‘Accent’.

Instructions

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. In the site structure, navigate to the the top page of your site structure

2. Click the blue Actions button and select Create section and add a new hidden section called 'Custom Theme'. The name is case sensitive and it must not contain additional spaces or characters.  See the screenshot below;

Site structure screen showing the Custom Theme folder

Note: the white folder indicates that a section that is hidden from the navigation.

3. Uncheck the Show in navigation box in the form and click the Save changes 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.

3. Go to your Custom Theme section in the site structure, click on the blue Actions button and select Create content.  

Create content option from the Actions menu

5. Choose the Custom Theme content type from the list. (Find out more information about adding a content type to a section);

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

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

8. Leave the Show local footer? box ticked. See Local footer for guidance.

Adding a custom theme screen

9. Click Save and approve to save.

Save and approve option

9. Preview the results and publish the branch when you're happy. you will need to publish the entire branch for the changes to filter down.

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

The nine colour themes

Blue

Blue

Primary - Blue

CMYK 100.70.0.0;
PMS-293;
RGB-0.110.175;
HEX-#006EAF

Dear teal

Secondary A - Dark Teal

CMYK-100.0.25.50;
PMS-3155;
RGB-15.130.145;
HEX-#0F8291

Imperial Blue

Secondary B - Imperial Blue

CMYK-100.61.0.45;
PMS-541;
RGB-0.62.116;
HEX-#003E74

Pool Blue

Accent - Pool Blue

CMYK-75.0.0.0;
PMS-306;
RGB-12.161.205;
HEX-#00ACD7

Brick/Navy/Teal

Brick

Primary - Brick

CMYK-20.100.100.20;
PMS 207;
RGB-165.25.0;
HEX-#A51900

Navy

Secondary A - Navy

CMYK-100.55.0.85;
PMS-539;
RGB-0.33.71;
HEX-#002147

Dear teal

Secondary B - Dark Teal

CMYK-100.0.25.50;
PMS-3155;
RGB-15.130.145;
HEX-#0F8291

Tangerine

Accent - Tangerine

CMYK-0.45.100.0;
PMS-151;
RGB-236.115.0;
HEX-#EC7300

Green

Dark green

Primary - Dark Green

CMYK-100.0.100.15;
PMS-348;
RGB-2.137.59;
HEX-#02893B

Dear teal

Secondary A - Dark Teal

CMYK-100.0.25.50;
PMS-3155;
RGB-15.130.145;
HEX-#0F8291

Blue

Secondary B - Blue

CMYK 100.70.0.0;
PMS-293;
RGB-0.110.175;
HEX-#006EAF

Kermit green

Accent - Kermit Green

CMYK-70.0.100.0;
PMS-368;
RGB-102.164.10;
HEX-#66A40A

Orange/Green/Imperial Blue

Orange

Primary - Orange

CMYK-0.76.100.0;
PMS-166;
RGB-210.64.0;
HEX-#D24000

Dark green

Secondary A - Dark Green

CMYK-100.0.100.15;
PMS-348;
RGB-2.137.59;
HEX-#02893B

Imperial Blue

Secondary B - Imperial Blue

CMYK-100.61.0.45;
PMS-541;
RGB-0.62.116;
HEX-#003E74

Pool Blue

Accent - Pool Blue

CMYK-75.0.0.0;
PMS-306;
RGB-12.161.205;
HEX-#00ACD7

Pink

Magenta pink

Primary - Magenta Pink

CMYK-0.100.9.4;
PMS-Rubine Red;
RGB-200.30.120;
HEX-#C81E78

Violet

Secondary A - Violet

CMYK-34.100.0.0;
PMS-2405;
RGB-150.0.120;
HEX-#960078

Plum

Secondary B - Plum

CMYK-100.100.0.3;
PMS-2105;
RGB-50.30.109;
HEX-#321E6D

Purple

Accent - Purple

CMYK-88.86.0.0;
PMS-2098;
RGB-101.48.152;
HEX-#653098

Purple/Violet/Navy/Pool blue

Purple

Primary - Purple

CMYK-88.86.0.0;
PMS-2098;
RGB-101.48.152;
HEX-#653098

Violet

Secondary A - Violet

CMYK-34.100.0.0;
PMS-2405;
RGB-150.0.120;
HEX-#960078

Navy

Secondary B - Navy

CMYK-100.55.0.85;
PMS-539;
RGB-0.33.71;
HEX-#002147

Pool Blue

Accent - Pool Blue

CMYK-75.0.0.0;
PMS-306;
RGB-12.161.205;
HEX-#00ACD7

Red

Brick

Primary - Brick

CMYK-20.100.100.20;
PMS 207;
RGB-165.25.0;
HEX-#A51900

Orange

Secondary A - Orange

CMYK-0.76.100.0;
PMS-166;
RGB-210.64.0;
HEX-#D24000

Imperial Blue

Secondary B - Imperial Blue

CMYK-100.61.0.45;
PMS-541;
RGB-0.62.116;
HEX-#003E74

Tangerine

Accent - Tangerine

CMYK-0.45.100.0;
PMS-151;
RGB-236.115.0;
HEX-#EC7300

Teal/Blue/Plum

Dear teal

Primary - Dark Teal

CMYK-100.0.25.50;
PMS-3155;
RGB-15.130.145;
HEX-#0F8291

Blue

Secondary A - Blue

CMYK 100.70.0.0;
PMS-293;
RGB-0.110.175;
HEX-#006EAF

Plum

Secondary B - Plum

CMYK-100.100.0.3;
PMS-2105;
RGB-50.30.109;
HEX-#321E6D

Seaglass

Accent - Seaglass

CMYK-75.0.25.0;
PMS-3115;
RGB-55.159.159;
HEX-#379f9f

Violet/Blue/Navy

Violet

Secondary A - Violet

CMYK-34.100.0.0;
PMS-2405;
RGB-150.0.120;
HEX-#960078

Blue

Secondary A - Blue

CMYK 100.70.0.0;
PMS-293;
RGB-0.110.175;
HEX-#006EAF

Navy

Secondary B - Navy

CMYK-100.55.0.85;
PMS-539;
RGB-0.33.71;
HEX-#002147

Pool Blue

Accent - Pool Blue

CMYK-75.0.0.0;
PMS-306;
RGB-12.161.205;
HEX-#00ACD7