Skip to main content

Customising Site appearance

To customise the appearance of your Site:

  1. Navigate to the Sites Library
  2. Click into the Site you wish to customise
  3. Click Design next to the Site you want to customise.

The design tools will open in a new browser tab.

Changing the Site layout​

To show or hide a Site's header or 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 center 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, Center or Right alignment.

Changing the Site background colors​

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

To change the Site's color palette:

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

Text - Body of the content​

StyleDescription
Heading 1First Heading or the Main Heading of the content
Heading 2Level two heading
Heading 3Level three heading
LinkAny hyperlink created within the Site content are placed under the link category
HoverThe text color changes that appear when hovering your mouse cursor over a link can also be customised under this tab
VisitedThe 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 color 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 color​

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