Theme and colour

Use this guide to change the theme and colour of your website.

Theme and colour define the look and feel of your entire website. It's important to choose a theme and colour that suits your school.

Step 1: Log in to AEM

Log in to Adobe Experience Manager using the more simpler method;

or use the traditional method;

Your school's home page will already be selected.
Select the icon to the left of Home. The tick will appear and your selection will turn blue.
Select Edit in the menu bar that appears across the top of the screen.

Look to the dark grey bar across the top of your page.
Select the slider icon in the top left corner. This is the Page Information button.
Select Open Properties from the drop-down.

Select the Theme tab to change the theme and colour of your website.
Choose the theme from the Theme drop-down. See examples of available themes.
Each theme will change the dimensions of the Banner image on the homepage. See Image dimensions for more information about the correct size of banner images.
Primary Theme Colour is used as the main colour on your website. Select the Coloured square to change the colour.
Secondary Theme Colour does not show up on all parts of the website, it shows up mainly on 'Make a payment' link and theme 3. Select the Coloured square to change the colour.
Please note: Only use theme 5 with dark primary colours. If your theme 5 has black in it, switch to theme 1 or 2.
Select Save & Close to save and view your changes.

You can use the colour selector to make fine adjustments to the colour of your website.
The number #466E3a is a hex colour code.
The RGB sliders offer fine tuning of colours using Red, Green and Blue values from 0-255.
The A Slider sets the transparency. 0 is completely transparent and 100 is completely opaque.
The Swatches offer predefined colours. The white swatch with a diagonal red line will clear the colour. This will give your site a default Grey colour.
You can find Hex and RGB values for any colour using Adobe's Colour wheel.

You will need to change dimensions of the banner image on the homepage as each theme uses a different banner image size. See image dimensions for more information.
Follow the banner image instructions on how to update banner on your school website.
Please note: You will find dimensions of your image in Assets when you click on the image. Dimensions provide the image size by width and height in pixels.

For changes to be updated on your live school website you will need to publish the page.
Select the slider icon in the top left corner. This is the Page Information button.
Select Publish Page from the drop-down.
If you don't see Publish Page you are an Author and will need to select Start Workflow instead. Go to our Author publish a page for more information.

You may also find useful