Home | E-mail 


 

Detailed Instruction for CSS changes

The colors, font and style of the dynamic menu text is controlled by a style sheet. You'll need to open file stylesheet.css to make the changes necessary to get the look you want for link colors and underlines.

To open stylesheet.css, just double click on the file in the site files window. Now just play around with colours until you get the combination you need.


This is how menu.css looks in its raw form. Dreamweaver does of course provide a graphical interface to this file:

A.menu:link {
COLOR: #333333;
TEXT-DECORATION: none
}
A.menu:active {
COLOR: #333333;
TEXT-DECORATION: none
}
A.menu:visited {
COLOR: #333333;
TEXT-DECORATION: none
}
A.menu:hover {
COLOR: #336699;
TEXT-DECORATION: none
}
TD.menu {
COLOR: #333333;
FONT-FAMILY: Verdana,Arial;
FONT-SIZE: 13px
}
DIV.menu {
COLOR: #333333;
FONT-FAMILY: Verdana,Arial;
FONT-SIZE: 13px
}
A.bottomnav:link {
COLOR: #ffffff;
TEXT-DECORATION: none
}
A.bottomnav:visited {
COLOR: #ffffff;
TEXT-DECORATION: none
}
A.bottomnav:active {
COLOR: #ffffff;
TEXT-DECORATION: none
}
A.bottomnav:hover {
COLOR: #ffcc99;
TEXT-DECORATION: none
}
TD {
FONT-FAMILY: Verdana,Arial;
FONT-SIZE: 13px
}
HR {
COLOR: #336699;
HEIGHT: 2px
}

You will notice that the stylesheet uses 2 "classes" called menu, which applies to the menu links, and bottomnav which applies to the navigation at the foot of the page.

There's no underline to keep things tidy - if you want to put a line, change the word "none" to "underline"

The links for the menu are set to grey "#333333" - change this to "#000080" if you want them to be dark blue for example.

The mouseover colour is set to a shade of blue - if you want it to be black, change it to "#000000" for example. (NB. This doesn't show in NN4 but is ignored so it's not a problem)

That's about it - it's really not as daunting as it may seem. It's a good chance to get your hands dirty with some CSS practice!  


Copyright information and details


NEW STUFF
You can place any information you like in these break-out boxes. These boxes can be found in your template. We've included two but you can put as many or few as you want.
 
NEW STUFF
You can place any information you like in these break-out boxes. These boxes can be found in your template. We've included two but you can put as many or few as you want.
 

 

Home ] menu ] css ] template ] contact ]