Skip to main content Skip to navigation


Instructions here on how to change the colour of the area around the logo and image, the image, the links to the right of the image. Colours on the web are referred to by their hexadecimal code, so white for instances is #ffffff and black is #000000. You can use most graphics package to open up an image and find the hexidecimal code for it's colours.

To change the colour

  1. Within sitebuilder go to the files tab.
  2. Open for editing the file called change_colours.css
  3. You need to make two changes, in places following the comments /* 1 */ and /* 2 */
  4. Where you see the colour references starting with # change them to your new colour.

To change the image

  1. Upload your new image, it should be roughly the same size as the current image.
  2. Within sitebuilder go to the current page and open it for editing, edit centre content.
  3. Select the current image chose insert an image from the green arrowed menu.
  4. Find your new image in the list.
  5. Tick the rounded corners box.
  6. If you need to make the image smaller at this point, tick the thumbnail box and set the size.
  7. Click Insert.

Change Colours file looks like this.

/**** Change these colors *****/

/* red = #a11d22 black=#000000 grey=#D1D1D2 */

/* 1 */
.hp-layout td.left { background: #a11d22 ; }

/* 2 */
#mainContent .hp-layout a:link, #mainContent .hp-layout a:visited { color: #a11d22; }