need help changing the color of the ez pages navagation bar

[meesh]

Hi, I am a newbie to zencart. I am trying to change the back ground color of my ez pages navigation bar. I want to change it from the original green to a light pink. I changed the color in my style sheet, but when I view my cart, as the page is loading the navigation bar is pink but then suddenly it changes back to green.

I also tried changing the color of the top navigation bar above my header to blue just to see what would happen, and it is doing the same thing. I tried viewing it in google chrome and firefox and both are the same.


here is a link to my store: http://imaggenation.com/zencart/index.php?main_page=

I am curious if anyone else can see it changing from pink and blue back to green.

How do I fix this problem?

I have tried for hours to figure this out but at last I need some advice. I appreciate your help.

[jwitt98]

It looks like you did change the backgound color, but you left the green background image.

stylesheet.css (line 329)

#navEZPagesTop {
background-color:#FFCCFF;
background-image:url(../images/tile_back.gif);
font-size:1.3em;
font-weight:bold;
margin:0;
padding:0.5em;

You will have to remove the line above highlighted in red to see the pink background. Unfortunately after you do this, you will loose the cool looking gradient effect. If you have a photo editing program, you could open and change the hue of the background image to pink.

/images/tile_back.gif

[meesh]

Thanks so much, that worked perfectly!

Do you know how to change the font color on the ez navigation bar?

Also, if you look at my store the sale prices in the right sidebox are red and I would like to change that font so you can see it better. How can I do that?

link to my store :http://imaggenation.com/zencart/index.php?main_page=

I really appreciate all of the much needed help.

[jwitt98]

Changing the font color on the navigation bar involves a little more. Those are actually links which are styled differently from regular text.
There are 4 styles set for these links
a: link (this sets the main color of the link)
a: hover (this sets the color of the link when your mouse hovers over it)
a: active (this sets the color of the link when you click down on it)
a: visited (this sets the color of visited links)

In your main sytle sheet, these are global setting and will affect all your links on every page of your site.
If you only want to target the links in your navigation bar, you will have to create a more specific selector in your stylesheet, like so:
#navEZPagesTop a:link {
color: #12345
}
#navEZPagesTop a:hover {
color: #23456
}
#navEZPagesTop a:active {
color: #34567
}


The sales price color along with other specially priced items is set here:
stylesheet.css (line 461)

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
color:#FF0000;
}

I think you might benefit from the firefox developers add on called Firebug. It's totally free and it allows you to right click on any element on your page, or any web page for that matter, and inspect the html and css of that element. Just Google firebug