Extras- Site Wide CSS

The first option in the 'Extras' section of the Admin page is Add Site Wide CSS. CSS stands for cascading style sheets, and these style sheets define the look of the site in terms of text font, size and colour, background colours etc. Here we can override the default settings for the site, to achieve a specific look.

Doing this from scratch requires a reasonable knowledge of web editing, but is easier to understand when we have an example that can be modified to achieve the desired result. In our example we describe how to customise the menu colours.

Background reading for this can be found at http://www.w3.org/MarkUp/Guide/Style, but should not be necessary. It is however useful to visit this link for the detailed description of colours halfway down the page, and to use the colour code calculator there.

1. Fundamentals

The menu colours are determined by adding code such as the following in the Site Wide CSS section of the Extras options on the admin page. 

#menu a {background: #355EB0; border-bottom: 1px solid #3BBC84; color: #FFFFFF;}
#menu a:hover, #menu a.on {background: #3BBC84; color: #355EB0;}

In this instance the menu background is a pastel blue colour (hex colour code: #355EB0) with text in white (#FFFFFF) with each menu item separated by a solid pastel green line (#3BBC84) 1 pixel wide. Highlighted menu items are pastel blue text on a pastel green background.

Breaking down the two lines of code above, we see where these parameters are defined:

- first line defines the behaviour of the normal (unhighlighted) menu items

#menu a {background: #355EB0; - background colour defind here
border-bottom: 1px - separating line width (1px) defined here
solid - separating line style defined here
#3BBC84; - separating line colour defined here
color: #FFFFFF;} - text colour defined here

- second line defines the highlighted menu items, which are highlighted when the mouse hovers over the menu item

#menu a:hover, #menu a.on {background: #3BBC84; - background colour defined here
color: #355EB0;} - text colour defined here.

2. About colours

Colours are specified as their hexadecimal (base 16) values, a 6 character code where the leading two characters correspond to the red value, the middle two correspond to the green value and the last two correspond to the blue value, all preceded by the # symbol. This code is generally shown by the colour picker/ink dropper in Photoshop or Paintshop Pro etc. when a colour is selected, or can be calculated from the decimal RGB values using the calculator on the link at the top of this page.

However a limited range of colours can be specified simply by their name, e.g. 'white' is equivalent to the color code '#FFFFFF'.

The colour names that can be used are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. NB gray uses the US spelling.

Color names and hex colour codes
black = "#000000" green = "#008000"
silver = "#C0C0C0" lime = "#00FF00"
gray = "#808080" olive = "#808000"
white = "#FFFFFF" yellow = "#FFFF00"
maroon = "#800000" navy = "#000080"
red = "#FF0000" blue = "#0000FF"
purple = "#800080" teal = "#008080"
fuchsia = "#FF00FF" aqua = "#00FFFF

3. Taking it further

By default the menu text is slanting, upper case and in the Verdana font. Additional parameters can be added to the two lines of CSS code that can change this such as that shown in bold in the example below:

#menu a {background: #999999; border-bottom: 1px solid #999999; color: #ffffff; font-family: arial, helvetica, sans-serif; font-style:normal; text-transform: lowercase}
#menu a:hover, #menu a.on {background: #999999; color: #00ff00; font-family: arial, helvetica, sans-serif; font-style:normal; text-transform: lowercase;}

The 'font-family: arial, helvetica, sans-serif; font-style:normal; text-transform: lowercase' instructions specify the menu font should be arial, or helvetica if arial is not present, or any sans-serif font if neither are present. If modifying this you are strongly recommended to use only 'font-family: arial, helvetica, sans-serif;' or 'font-family: helvetica, arial, sans-serif;'.

The 'font-style:normal' instruction specifies that the menu text should be normal and not slanting.

The 'text-transform: lowercase' instruction specifies that the menu text should all be lower case. Other options in place of lowercase are uppercase and capitalize (first letter of every word is uppercase). Note US spelling of capitalize.

Click for Map