Change Colours

There are now two functions for changing your site colour-scheme; which one you see after selecting the option will depend on whether or not the U3A 'new brand' option has been activated for your site.

New Brand Colour Changes

There are 12 predefined colours which can be applied to different areas of your pages. The four main colours in the brand specification are light blue, dark blue, yellow and white; the remainder are classed as secondaries. The document advises users to "avoid using too many different secondaries in the same design", and use contrasting colours for text and background, i.e. "a light colour on a dark background, or a dark colour on a light one."

There is an additional option to select a logo which will be shown if there is no specific logo registered for your site. The two logos marked with an asterisk (white and dark blue) have transparent backgrounds and look fairly unobtrusive. The rest are somewhat larger and come with a coloured background. They can be selected to match or contrast with your other colour choices.

Clicking the 'Default Colours' option in the editing menu will cause a reversion to the original brand colour-scheme and default logo.

After saving your choices, you may need to use the 'View Full Site' option and reload the page to see the changed result

.

Original Colour Changes

This option allows you to change the standard colours to make your own site more distinctive. The process involves first mixing a colour, then applying it to the appropriate section of a small sample page to judge its suitability. Once you are happy with a colour scheme, you may Save it on the database and it will be used subsequently for your whole site. You are free to change it again at any time, or revert to the current default colour-scheme.

Mixing Colours

You mix colours by selecting varying levels of red, green, and blue., from the three bars on the left of the screen. The result is shown in the square marked "current colour", and there are arrows to indicate the chosen levels of red, green and blue. Some general rules for colour mixing are:

A few experiments will give a better idea of the principles than any number of words!

Applying Colours

Once you have a colour you want, click on the appropriate menu item to apply it to one of the following:

If you make a mistake or change your mind, click Undo colour change to restore to a previous state. The system keeps a history of your choices during the session, so you may "undo" and "redo" them in the usual way.

It also possible to "capture" an existing colour. Suppose a colour on your sample page is nearly right but you would like to to adjust it slightly without re-mixing it from scratch. If you click on the appropriate area of the sample page, its colour will be transferred to the "current colour" square, and the arrows re-set to indicate the corresponding levels of red green and blue.

Colour Contrast

Changing a colour normally affects the level of contrast between text and background. For readability it is necessary to have a fairly high contrast, i.e. dark text on a light background or vice-versa. You will obviously want to judge readability with your own eyes, but there is a table showing the degree of contrast as a numerical measure for both colour and brightness. (Black with white gives 100%; two identical colours give 0%.) Aim for a contrast at least 50% - 60% for headings and buttons. Of the two measures, brightness is the more important.

Save and View

Once you have a colour scheme that you like, click the button marked Save and View!. Your chosen colours will be recorded permanently in the database, and a "real" web page in those colours will be displayed. If you don't like what you see, click Change colours and try again, or click Default colours to revert back to the colour scheme which appeared when you first made your site.