Help - Custom Colour Selector
The custom colour selector screen is spit into three main parts as shown in the picture below.
A) The upper left section (Preview) represents the end-user website screen. It has a number of hotspots that allow you to select elements on the page, such as the main BodyText or the Main Page Background. A number of the colours are specific to certain modules; the Graph Axis Colour is only found on the Graph Module, for example. You should select a page element before choosing a colour.
B) The right side of the screen (Custom Colour Selection) is a list of all page elements in alphabetical order, allowing you to see all of the colours in one place. It is also possible to select page elements from here – the MainPageBar in section A can be difficult to select because if its size, for example.
C) The bottom left section allows you to select and assign colours to page elements; you should select a page element before attempting to set a colour.
Any changes you make to the Preview window will be lost if you click Cancel at the bottom of the screen. Clicking Import allows you to import a colour scheme from either another website on your account, or from one of our pre-defined designs.
The colour selector has a number of elements as shown in the image below. Colours are defined by their HTML colour. This uses 6 alpha-numeric digits to define the mix of red, blue and green, with the first and second, third and fourth, and finally the fifth and sixth characters representing each colour respectively. Further information about web colours can be found on wikipedia.org.
1) Clicking on an element in one of the other sections changes the title to the selected element name.
2) Clicking on an element in one of the other sections also sets the Original colour to that currently assigned to the element. Clicking the Original colour box sets the New colour to the original.
3) The first swatch displays 49 standard colours. Hovering the mouse over a colour will show you its HTML colour code, and clicking a colour will update the New colour box..
4) The second swatch presents colours in two dimensions. Selecting the radio buttons allows you to change the main two colours that are displayed, while the selector (Blue in this example) allows you to change the amount of the base colour that should be included using the << and >> links. Again, hovering the mouse over a colour will show you its HTML colour code, and clicking a colour will update the New colour box.
5) The New colour box shows the colour that will be applied to the page element when clicking either Apply >> or Preview >>. Not only can the colour be altered with the use of the two swatches, but also directly with the use of the R, G and B links. These alter the mix of red, green and blue respectively with the use of the << and >> links.
6) The Apply >> and Preview >> links are used to set the colours in the Preview window, with one main difference. Clicking Apply >> will allow the selection to be remembered when another page element is selected, while the original colour will be reapplied having clicked Preview >>, when another page element is selected.