Changing Your Website Design (Template Picker and Colour Scheme)

Styling Your Website

Please note: this article is only applicable to websites built after November 2018.

This article will tell you how to use the various styling tools within the website editor to change the look of your website.

In this article:

Considerations/Prerequisites

  • You may like to consider planning your styling before you start.
  • Consider using colours and styles that compliment your logo or practice colours if you have them.

To open the Styling Tools log in to the website editor and click the grey arrow icon in the top left hand corner. A side menu will appear. The Styling tools are found under the yellow section titled “Customise”.

Detail

Within the website editor you can alter:

  • Your website template
  • Your website colour scheme
  • The style of the elements
  • The underlying css that controls the look of the website (Advanced users only).

Change the template

template-picker.png

  1. Click Template Picker. A new window will opening containing the available templates. The highlighted template is the one you are currently using.
  2. When you hover the mouse over a template 2 buttons will appear.
  3. Click Preview to see a preview of how your website will look using this template in the main window.
  4. Click Live to apply this template to your website.

Change the style

style-picker.png

  1. Click Style Picker. A new window will opening containing the available styles. The highlighted style is the one you are currently using.
  2. When you hover the mouse over a style 2 buttons will appear.
  3. Click Preview to see a preview of how your website will look using this style in the main window.
  4. Click Live to apply this style to your website.

Change the colour scheme

colour-scheme.png

  1. Click Colour Scheme. A new window will opening containing the available schemes. The large square at the top shows the scheme you are currently using.
  2. Click a new colour scheme to see a preview of how your website will look using this scheme in the main window.
  3. Click Save to apply this colour scheme to your website.

Add CSS custom styling to your website (* Advanced Users Only *)

  1. Click CSS Editor. A new window will appear containing an editing area for you to add your css code.
  2. Add the code then click the preview button to test it in the main window.
  3. When you are happy with the results click Make Live to apply this to your website.

Dos and Don’ts

  • Carefully consider the colours you choose taking care not to ignore accessibility concerns.
  • Use the Preview function to check your choice before making it live.
  • Stick to common fonts and name alternatives when customising using the CSS editor as a browser can only render the page using the fonts on the computer the website is being viewed on. This means that if you use a unusual font many viewers may not see this and the website will not appear as you intended.
  • Use simple fonts for good accessibility.

Common Problems/Mistakes

I’ve selected a style but it’s not showing on the preview.
There is most probably an over-riding element selected. For instance giving a row a background colour will hide the selected widget style.

Common Questions/FAQs

Rows and Widgets - Overview
Working with Rows
Using Widgets

Keywords/meta tags

template, colour, scheme, style, design, css

Articles in this section

See more