Main page content starts here
DESIGNER NOTES :: Introduction
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.
A word on the Global Styles
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.
External Navigation Bar
This is the bar running above the title. To add to this, just add links in the same format as shown in the code.
Main Navigation Bar
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.
Side Bars
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.
Content
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!
A Final Note
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!