How to Guide - Customise Your Site


Our standard SQOD template and colour scheme is displayed here.

This can be customised to align with your organisations branding and this guide is intended to support you through the process. Customisation features are available to Customer Administrators and accessed by switching to the Administration portal, see 'Switch to Admin' here:

From here, you can navigate to the 'Site Customisations' section to the left of the screen:


Simply select the Pencil and Paper icon, located to the right hand side of the screen:

and you will be presented with the customisation page with multiple options:


If you wish to have your logo added, you can choose a file and upload this into the logo file here:

Once uploaded , a thumbnail image will display:


Once this is in place, click one of the update options from the bottom of the page.

Nb. the 'Update & Continue Editing' will keep you in the editing format and the 'Update Site Customisation' will mean you need to select the Pencil and Paper icon again to continue with further editing.


The images below show the SQOD logo on the main page has changed from SQOD to the uploaded image:

The process repeats to change the 'Main Background Image' option:

Again a preview image is shown after the upload:

The original and updated background are displayed here:

The next available section for editing are the colours utilised through out the site. Each has a name and a preview box showing the colour selected for that section:

When clicking on the colour preview rectangle you are presented with colour palette options and from here can enter the colour code if you know it, or use the eye dropper to select the colour from your website directly; a very easy process.


As you can see, when the eye dropper is selected you are presented with a circle with gridlines inside. Then navigate to the specific colour on a site you wish to copy.



In this example we would like this banner colour to be used throughout our SQOD platform:

Once the colour is in the centre of the circle, simply left click which saves save the colour option and the preview rectangle will update:

Once you have selected update at the bottom of the page, the standard banner in the Admin portal will change from this:

to this:


Steps repeat in this way. We have included before and after screenshots showing the options and which part of the platform they change:



Nova Font Colour

Before:

After:


Main Background Colour

Before:

After:

Nb., the main background colour only changes if the background image uploaded doesn’t have a colour already. In this example the background image is on a white background which overrides the background image colour selection.


Body Link Colour

Before:

After:


Header Background Colour

Before:


After:


Navigation Text Colour

Before:

After:


Navigation Link Colour:

Before:

After:


Heading Colour

Before:

After:


Subheading Colour

Before:

After:


Footer Background Colour

Before:

After:


Footer Font Colour

Before:

After:


Footer Link Colour

Before:

After:


CTA Colour

Before:


After:

Before:

After:



CTA Font Colour

Before:

After:




Date Colour

Before:

After:

Date Font Colour

Before:

After:

Report Text Colour

Before:

After:

Report Background Colour

Before:

After:

Report CTA Colour

Before:


After:

Report CTA Font Colour

Before:

After:




End.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.