s y m p h o n y

I've put together the following notes for anyone wanting to use this template. They basically explain the different areas of the design. Don't be put off by the size of the side-bar explanations, it is quite simple in reality.

Some styles are defined via the "Global Style Changes" section of the stylesheets. There are a few important things to note:

• Many colours are defined here. Check here before you delve into the other style properties to change colours.
• If you remove one of the classes, take care to subsitute the relevant styles into other classes.
• The basefont of this website is currently Tahoma. No other fonts are used at present. If you want a variety of colours, you are going to need to put the font-family attribute into all the relevant classes. Also note that the overall font size for the site is defined here. All other font sizes within other classes are percentages of this defined font-size.

This is the bar running above the title. To add to this, just add links in the same format as shown in the code.

This is the internal nav bar running just below the website title. To add to this, just add links in the same format as shown in the code.

The side bars are in some ways the most complex parts of this design. As you will see from the style-screen stylesheet, there are a number of different styles, some of which apply to both the LHS and RHS bars, but also quite a few that are specific to the side. I will procede to go through these now.

The styles LHS-bar and RHS-bar are the basic ones through which the others are referenced, as they are applied by ID. By and large, you shouldn't need to edit these except via the "Global Changes" section.

The next two major styles within the side bars are .normal and .light. These apply to the individual boxes on the side bars which are at present coloured gray and light gray. The lines that seperate each box are also defined in here, as are the padding attributes. Changes to the bgcolour of these should be completed via the "Global Changes" section in the stylesheet.

The style .no-padding is provided for those sections using the sub nav system as shown in the first box on the LHS-bar. The navigation is defined using a list, and has to have this otherwise the padding controls on the list will override. However, you will need to add "padding-left:5px" to the title of the section (see next para).

Titles to the sections on the side-bars are put within spans which are pre-defined as being bold. If this is a problem (ie. you wish to use spans for other purposes within the side bars) redefine it as another class.

As I've already mentioned, the navigation is by way of unordered lists. You should just be able to follow the format I've already set up - see code for more details. Unless you are really sure of what you are doing, do not edit the styles for these unordered lists and the items within them - apart from the a tags. Also ensure that you use the .subnav class when creating a new subnav section - again see the code for more details.

The content, when compared to the side-bars, is very simple! Just add new content using my existing content as a guide. So long as you don't touch the content-container class unless you have good reason to, everything should be fine. This is defined up in "Global Styles" to keep it away from "impulse" edits!

If you have any problems, or discover any bugs, please do not hesitate to contact me (andrew_j_t@tiscali.co.uk). I really do appreciate feedback, and I will always do my best to help!

Good Luck and have fun!