SideBox Header colours

[quentinjs]

I spent way to much time last night trying to make this work instead of sleeping.. when I should have posted a message here as I'm my problem would have been answered in 5 min.

I want the sidebox headers (where there is a link - new products and shopping cart for example). to be:

* Visited - White
* Link - Yellow
* Hover - Red

alas I sorta had the "cart" working but the "new products" totally ignored the css, which totally puzzled me. Any thoughts? I'm sure this is a no brainer, if I new what I was doing wrong.

/* QJS - added */
h3.leftBoxHeading A:visited (color:white)
h3.leftBoxHeading A:link (color:white)

.leftBoxHeading a:active {
	color: white;
	text-decoration: none;
	border-bottom: 1px solid #9a9a9a;
	} 

h3.leftBoxHeading a:hover {
	color: red;
	text-decoration: none;
	border-bottom: 1px solid #ffffff;
	} 

/* QJS - added */
h3.leftBoxHeading a:visited {
	color: white;
	text-decoration: none;
	border-bottom: 1px solid #9a9a9a;
	} 

[gjh42]

Oops sorry, posted in wrong thread...

[daneh]

quentinjs,
In your CSS stylsheet you should see something that looks like this:

a:link, #navEZPagesTOC ul li a {
	color: #3300FF;
	text-decoration: none;
	}
 
a:visited {
	color: #3300FF;
	text-decoration: none;
	}

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

a:active {
	color: #0000FF;
	}

I believe that should control the colors you mention. I could be wrong....I am still learning too
If you want specific areas to have different colors for the links, you can simply remove that area from the above code, paste it below the code, and specify colors.
If you have firefox, grab the Web Developers and Firebug addons. They will help in locating the exact code you need and the colors associated with the code.

I am still learning how to use them, but they have saved me a ton of time.

[gjh42]

The problem is that the link is an inline element inside the heading, so changing its background has no effect on the heading as a whole.
Add this to your stylesheet_new.css:

h3.leftBoxHeading a {display: block; background-color: #aabbcc;}

and extend as usual for visited, hover and active (in that order).

[quentinjs]

So this is what I know...

.leftBoxHeading  a ( color: white; )  /* DOESN'T WORK */
.leftBoxHeading  a:visited { color: green; }  /* DOESN'T WORK */
.leftBoxHeading  a:hover { color: red; } /* works*/ 
.leftBoxHeading a:active { color: white; }  /* works */

but this does...

#shoppingcartHeading a {color: white;}

the ID will override and colour it correctly, but not as a class. even as

H3.leftBoxHeading  a ( color: white; )  /* DOESN'T WORK */
H3.leftBoxHeading  a:visited { color: green; }  /* DOESN'T WORK */
H3.leftBoxHeading  a:hover { color: red; } /* works*/ 
H3.leftBoxHeading a:active { color: white; }  /* works */

it doesn't seem to work.... so why does the class not work, but the ID does ?