Customising site appearance

Written by Paul Vecchiato

Last published at: July 22nd, 2020

To customise the appearance of your site:

  1. Select SITES from the top menu
  2. Click Design next to the site you want to customise.

The design tools will open in a new browser tab. 

Changing the site layout

Show/Hide Header and Footer

To show or hide a sites header/footer.

  1. Go to the Design tab
  2. Click the Layout tab
  3. Select or deselect check boxes in front of Show Header and Show Footer options.

Changing the content area width

The site width is the total width of the content area for your site.  Your widgets all fit within this width, and resize accordingly. Each template has a default width which is designed to display correctly for most users, for example 976px.

To change the content area width:

  1. Go to the Design tab
  2. Select the Layout tab
  3. Drag the Width slider to the desired width, or enter the width, in pixels, in the Width field.

The preview will display the new site width.

Changing the page alignment and margin

By default the content area of your site is placed in the centre of the browser window.

To change the alignment of the content area:

  1. Go to the Design tab
  2. Select the Layout tab
  3. Select Left, Centre or Right alignment.

Changing the site background colours

You can change a site's background colours based on its different sections - Header, Site, Footer and further customise the backgrounds depending upon the area of the section i.e. Outer or Inner.

To change the site's colour palette:

  1. Go to the Design tab
  2. Click a colour swatch from the section>>area of the section you want to modify - Header, Site, Footer
  3. Select the Colour tab
  4. Select a colour from the Colour Palette or create a new colour
  5. Click outside the popup box to see applied changes
  6. Repeat for each colour swatch in each area.

Text - Body of the content

Style Description
Heading 1 First Heading or the Main Heading of the content
Heading 2 Level two heading
Heading 3 Level three heading
Link Any hyperlink created within the site content are placed under the link category
Hover The text changes that appear on hovering your mouse cursor over a link can be customised under this tab
Visited The links that have been visited or clicked can be customised to be displayed in a different font
The availability and visibility of the fonts will depend upon style sheet of the selected design template.

Setting a background image

  1. Go to the Design tab
  2. Select colour swatch from an area of the site you want to insert a background image to display a dialog box
  3. Select the Image tab
  4. Locate your image file and select open
  5. Select a position for your image
  6. Select the tile option for your image.

Changing the background image

  1. Go to the Design tab
  2. Select Remove Background Image (x) image field
  3. Locate your new image file and select open.

Removing the background image

  1. Go to the Design tab
  2. Click the Remove Background Image (x) icon on the image field.

Changing the site fonts

You can define the font to be used for the text and headings on your site. A select list of fonts is provided to ensure your site appears correctly on all browsers and devices.

Modifying the text or heading font

  1. Go to the Design tab
  2. Select the Fonts tab
  3. Select a font level (Text, Heading 1, Heading 2, Heading 3, Link, Hover, Visited)
  4. Select a font style
  5. Enter the font size.

Changing font colour

  1. Click the font colour swatch
  2. Click a colour on the colour wheel or enter a hexadecimal colour
  3. Click the close (x) icon.