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’.
- The 'Primary' colour- the main element which colours the left hand 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 like the Colour block, Column colour blocks, Banner - bottom block etc.,
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;
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.
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.
9. Click Save and approve to save.
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
Primary - Blue
CMYK 100.70.0.0;
PMS-293;
RGB-0.110.175;
HEX-#006EAF
Secondary A - Dark Teal
CMYK-100.0.25.50;
PMS-3155;
RGB-15.130.145;
HEX-#0F8291
Secondary B - Imperial Blue
CMYK-100.61.0.45;
PMS-541;
RGB-0.62.116;
HEX-#003E74
Accent - Pool Blue
CMYK-75.0.0.0;
PMS-306;
RGB-12.161.205;
HEX-#00ACD7
Brick/Navy/Teal
Primary - Brick
CMYK-20.100.100.20;
PMS 207;
RGB-165.25.0;
HEX-#A51900
Secondary A - Navy
CMYK-100.55.0.85;
PMS-539;
RGB-0.33.71;
HEX-#002147
Secondary B - Dark Teal
CMYK-100.0.25.50;
PMS-3155;
RGB-15.130.145;
HEX-#0F8291
Accent - Tangerine
CMYK-0.45.100.0;
PMS-151;
RGB-236.115.0;
HEX-#EC7300
Green
Primary - Dark Green
CMYK-100.0.100.15;
PMS-348;
RGB-2.137.59;
HEX-#02893B
Secondary A - Dark Teal
CMYK-100.0.25.50;
PMS-3155;
RGB-15.130.145;
HEX-#0F8291
Secondary B - Blue
CMYK 100.70.0.0;
PMS-293;
RGB-0.110.175;
HEX-#006EAF
Accent - Kermit Green
CMYK-70.0.100.0;
PMS-368;
RGB-102.164.10;
HEX-#66A40A
Orange/Green/Imperial Blue
Primary - Orange
CMYK-0.76.100.0;
PMS-166;
RGB-210.64.0;
HEX-#D24000
Secondary A - Dark Green
CMYK-100.0.100.15;
PMS-348;
RGB-2.137.59;
HEX-#02893B
Secondary B - Imperial Blue
CMYK-100.61.0.45;
PMS-541;
RGB-0.62.116;
HEX-#003E74
Accent - Pool Blue
CMYK-75.0.0.0;
PMS-306;
RGB-12.161.205;
HEX-#00ACD7
Pink
Primary - Magenta Pink
CMYK-0.100.9.4;
PMS-Rubine Red;
RGB-200.30.120;
HEX-#C81E78
Secondary A - Violet
CMYK-34.100.0.0;
PMS-2405;
RGB-150.0.120;
HEX-#960078
Secondary B - Plum
CMYK-100.100.0.3;
PMS-2105;
RGB-50.30.109;
HEX-#321E6D
Accent - Purple
CMYK-88.86.0.0;
PMS-2098;
RGB-101.48.152;
HEX-#653098
Purple/Violet/Navy/Pool blue
Primary - Purple
CMYK-88.86.0.0;
PMS-2098;
RGB-101.48.152;
HEX-#653098
Secondary A - Violet
CMYK-34.100.0.0;
PMS-2405;
RGB-150.0.120;
HEX-#960078
Secondary B - Navy
CMYK-100.55.0.85;
PMS-539;
RGB-0.33.71;
HEX-#002147
Accent - Pool Blue
CMYK-75.0.0.0;
PMS-306;
RGB-12.161.205;
HEX-#00ACD7
Red
Primary - Brick
CMYK-20.100.100.20;
PMS 207;
RGB-165.25.0;
HEX-#A51900
Secondary A - Orange
CMYK-0.76.100.0;
PMS-166;
RGB-210.64.0;
HEX-#D24000
Secondary B - Imperial Blue
CMYK-100.61.0.45;
PMS-541;
RGB-0.62.116;
HEX-#003E74
Accent - Tangerine
CMYK-0.45.100.0;
PMS-151;
RGB-236.115.0;
HEX-#EC7300
Teal/Blue/Plum
Primary - Dark Teal
CMYK-100.0.25.50;
PMS-3155;
RGB-15.130.145;
HEX-#0F8291
Secondary A - Blue
CMYK 100.70.0.0;
PMS-293;
RGB-0.110.175;
HEX-#006EAF
Secondary B - Plum
CMYK-100.100.0.3;
PMS-2105;
RGB-50.30.109;
HEX-#321E6D
Accent - Seaglass
CMYK-75.0.25.0;
PMS-3115;
RGB-55.159.159;
HEX-#379f9f
Violet/Blue/Navy
Secondary A - Violet
CMYK-34.100.0.0;
PMS-2405;
RGB-150.0.120;
HEX-#960078
Secondary A - Blue
CMYK 100.70.0.0;
PMS-293;
RGB-0.110.175;
HEX-#006EAF
Secondary B - Navy
CMYK-100.55.0.85;
PMS-539;
RGB-0.33.71;
HEX-#002147
Accent - Pool Blue
CMYK-75.0.0.0;
PMS-306;
RGB-12.161.205;
HEX-#00ACD7