Font color change in header and footer help!!!!

[Marlake]

Dear all:

I am new at Zen cart.
I have been trying to change the font color of "Home", "Log In in the Header, "New products" and "Home" in the footer.

I want to change the color from black to WHITE. I have been able to change some of the sideboxes but all of the others remain the same (black).
You Can take a look of this problem at www.mhi-ramps-and-lifts.com.

May I get some help on how should I write the progarm on the stylesheet?
Thanks !!!

[clydejones]

Dear all:

I am new at Zen cart.
I have been trying to change the font color of "Home", "Log In in the Header, "New products" and "Home" in the footer.

I want to change the color from black to WHITE. I have been able to change some of the sideboxes but all of the others remain the same (black).
You Can take a look of this problem at www.mhi-ramps-and-lifts.com.

May I get some help on how should I write the progarm on the stylesheet?
Thanks !!!

open includes/templates/debitemplate/css/stylesheet.css

change the following declaration as indicated by the highlighted portion:

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile.gif);
padding: 0.5em 0.2em;
font-weight: bold;
color: #FFFFFF;

}

[Marlake]

Hi Clyde:
I tried what you told me to do but it remains the same.
Could you try something else? Sorry!

[dbltoe]

those are links (<a> tags) under the <ul> and <li> tags of navMain and navSupp

Try using something like

#navMain ul li a, #navSupp ul li a {color: #FFFFFF;}

You will also need to do the same for the sidebox header.

[Marlake]

Hi:
What I have so far is this:



#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile.gif);
padding: 0.5em 0.2em;
font-weight: bold;
color: #FFFFFF;

}

Where exactly should I put the changes you have mentioned?
Thanks,
Marlake

[dbltoe]

did you try as I suggested? Otherwise the a tag is overwritten earlier in the style sheet.

[Marlake]

No I have not tried, THat is why I would like to know where exactly should I put the changes you suggested. Could you tell me (in red) where should I put the changes you mentioned?
Thanks,
Marlake

/*navigation*/

.navSplitPagesResult {}
.navSplitPagesLinks {}

.navNextPrevCounter {
margin: 0em;
font-size: 0.9em;
}
.navNextPrevList {
display: inline;
white-space: nowrap;
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile.gif);
padding: 0.5em 0.2em;
font-weight: bold;
color: #FFFFFF;

}
#navCatTabsWrapper {
background-color: #ffffff;
color: #9a9a9a;
background-image:none;
}

#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
text-align: center;
line-height: 1.5em;
}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
white-space: nowrap;
}


#navCatTabs ul li a {
color: #9a9a9a;
}

#navEZPagesTOCWrapper {
font-weight: bold;
float: right;
height: 1%;
border: 1px solid #9a9a9a;
}

#navEZPagesTOC ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
line-height: 1.5em;
}

#navEZPagesTOC ul li {
white-space: nowrap;
}

#navEZPagesTOC ul li a {
padding: 0em 0.5em;
margin: 0;
}

#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin: 0.5em;
}

#navMainSearch {
float: right;
}

#navBreadCrumb {
padding: 0.5em 0.5em;
background-color: #000000;
font-size: 0.95em;
font-weight: bold;
margin: 0em;
}

#navEZPagesTop {
background-color: #abbbd3;
background-image: url(../images/tile.gif);
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}

#navColumnOne, #navColumnTwo {
background-color: transparent;
}

[dbltoe]

No I have not tried, THat is why I would like to know where exactly should I put the changes you suggested. Could you tell me (in red) where should I put the changes you mentioned?
Thanks,
Marlake

/*navigation*/

.navSplitPagesResult {}
.navSplitPagesLinks {}

.navNextPrevCounter {
margin: 0em;
font-size: 0.9em;
}
.navNextPrevList {
display: inline;
white-space: nowrap;
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile.gif);
padding: 0.5em 0.2em;
font-weight: bold;
color: #FFFFFF;

}
#navCatTabsWrapper {
background-color: #ffffff;
color: #9a9a9a;
background-image:none;
}

#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
text-align: center;
line-height: 1.5em;
}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
white-space: nowrap;
color: #FFFFFF;
}


#navCatTabs ul li a {
color: #9a9a9a;
}

#navEZPagesTOCWrapper {
font-weight: bold;
float: right;
height: 1%;
border: 1px solid #9a9a9a;
}

#navEZPagesTOC ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
line-height: 1.5em;
}

#navEZPagesTOC ul li {
white-space: nowrap;
}

#navEZPagesTOC ul li a {
padding: 0em 0.5em;
margin: 0;
}

#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin: 0.5em;
}

#navMainSearch {
float: right;
}

#navBreadCrumb {
padding: 0.5em 0.5em;
background-color: #000000;
font-size: 0.95em;
font-weight: bold;
margin: 0em;
}

#navEZPagesTop {
background-color: #abbbd3;
background-image: url(../images/tile.gif);
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}

#navColumnOne, #navColumnTwo {
background-color: transparent;
}

Normally I enter extra code at the bottom of the css so as not to have to find it later but this should work.

[Marlake]

Good news and bad news:

The good news: "Home", "log in" in the header and "home" in the footer already changed to white! Thanks!!!!

Bad news: (maybe because I did not ask you for that)

The font color in the sidebox that show new products: "New products (more)" is still black.

Also on the listings of the products, the 3 words: "product image" "item name" and "price" , the font is still black.

Could you help me out on these too?
Thanks,
Marlake

[dbltoe]

Let's teach you how to fish.

Get a copy of firefox along with the firebug add-on.

Load firefox first then add the firebug. It should put a symbol at the bottom right-hand corner of firefox. You can use that to open firebug or open it out of the tools menu.

Open your site in firefox, open firebug, click on inspect in firebug and move the cursor to the area of your site that you want to change. Click on the item you want to change and the css info will show in the right-hand window of firebug. It even tells you what line it's on in the css.

You can use the left window to click on various divs to find info on them as well.