Help with layout please.

[gjh42]

You are going to have to set one basic link style and then an alternate style for the other variety. Whichever is more common probably should be the basic.
The sidebox links may be a bit simpler to specify as different from the basic style.

[peggy]

You are going to have to set one basic link style and then an alternate style for the other variety. Whichever is more common probably should be the basic.
The sidebox links may be a bit simpler to specify as different from the basic style.

Yes I kinda thought that was the obvious solution. Thing is I dont know ow do do that as I am new to CSS and anything I have tried hasn't worked. Do you think you could help me out an tell me how to go about it? As in, "what code goes where"?

[gjh42]

Start off with the basic link colors:

a:link, #navEZPagesTOC ul li a {
	color: #ffffff;
	text-decoration: underline;
	font-weight: bold;
	}

a:visited {
	color: #ffffff;
	text-decoration: underline;
	font-weight: bold;
	}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
	color: #fbce50;
	}

a:active {
	color: #0000FF;
	}

#ffffff is white, #000000 is black, #ff0000 is red, #00ff00 is green and #0000ff is blue.

Search through your stylesheet for
color:
and you will find all places where text color is defined. Many of them you will not want to change, but check out any you are not sure of and see what they control.
Some elements that are now the default white will not be specified in the stylesheet, so you will need to add them. Find things like

.sideBoxContent a {
	background-color: #c69c42;
	padding: 0.4em;
	}

and add
color: #ffffff;
if you want to make sure they are white.
(Or try .leftBoxContent a and .rightBoxContent a.)

After each change, go back and see what is different in your site.

[peggy]

Start off with the basic link colors:

a:link, #navEZPagesTOC ul li a {
	color: #ffffff;
	text-decoration: underline;
	font-weight: bold;
	}

a:visited {
	color: #ffffff;
	text-decoration: underline;
	font-weight: bold;
	}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
	color: #fbce50;
	}

a:active {
	color: #0000FF;
	}

#ffffff is white, #000000 is black, #ff0000 is red, #00ff00 is green and #0000ff is blue.

Search through your stylesheet for
color:
and you will find all places where text color is defined. Many of them you will not want to change, but check out any you are not sure of and see what they control.
Some elements that are now the default white will not be specified in the stylesheet, so you will need to add them. Find things like

.sideBoxContent a {
	background-color: #c69c42;
	padding: 0.4em;
	}

and add
color: #ffffff;
if you want to make sure they are white.
(Or try .leftBoxContent a and .rightBoxContent a.)

After each change, go back and see what is different in your site.

Well I don't understand what you mean. I already know how to change the colours of the text... it is the LINKS I am talking about and that css styling for the links you quoted control the whole page right??? Which is fine for where the links which are white are on a dark background but the MIDDLE content is on a light background and ALL the links links are affected so you cant see the light links on the light background!!
Am I making myself any clearer?

[gjh42]

The top set of declarations controls the basic link colors; the other elements I mentioned are for specific groups of links. Any declaration which has an "a" in the selector refers to a link, or to a sub-element inside a link.

So

.leftBoxContent a {color: #008822;}

makes link text in left box contents dark green, and

.leftBoxContent a:hover {color: #55ff55;}

makes link text in left box contents light green when hovering the mouse over it. Search through the color definitions and find the places where link colors are set, and change them if necessary.

[peggy]

.sideBoxContent a {
background-color: #c69c42;
padding: 0.4em;
}

I did it....phew..there wasnt a code as above so that kinda threw me.
I just added one though and it worked..then of course they didnt change color when I put my mouse over them so I had to figure out how to do that.



I added extra code as below to come to a solution.
thanks again..its been a long journey...lol

.sideBoxContent a{
color: #ffffff;
}

.sideBoxContent a:hover{
color: #fbce50;
}

[gjh42]

Glad you've gotten the results you want! It took me a long time to figure out the subtleties of the way stylesheet selectors work. It may be helpful to visit www.w3schools.org and try their CSS tutorials. They also have interactive examples that you can edit and see the results immediately - very handy for understanding a particular thing without the distraction of a whole site around it.

PS - for post 21, notice that the class used is
.centerBoxContentsNew
which only applies to the new products box. There is a similar class for every other version of the center box, which is why it is easier to style sideboxes as a group. There may be a class that applies to all center boxes, but there are many other possibilities in the center column too.

[gjh42]

Oops - too late for editing - it's www.w3schools.com.

[peggy]

PS - for post 21, notice that the class used is
.centerBoxContentsNew
which only applies to the new products box. There is a similar class for every other version of the center box, which is why it is easier to style sideboxes as a group. There may be a class that applies to all center boxes, but there are many other possibilities in the center column too.

Ok..I think it is finally starting to sink in (don't hold your breath though)

I bookmarked the CSS try its

Thanks again for your patience.