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

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 https://www.mhi-ramps-and-lifts.com.

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

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 https://www.mhi-ramps-and-lifts.com.

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

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;

}

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

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.

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:smile:

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

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;
}

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;
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.

Good news and bad news:

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

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

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.

H:
I have been able to install firfix (should I use that as my defaul bar instead of google?
)

I do not know what happens with firebug, I cannot install it , I have downloaded the file but something is stopping that program from being installed.
Any ideas?
Thanks
Marlake:unsure:

firefox is a browser like Internet Explorer --- only IT works correctly.

You should open firefox then click on the link for firebug and click install. It will install for you.

Hi: I have done that many times:

Go to mozilla firefox
open the firebug website while i am in firebox
and then I click install
a window shows up telling me that firbug is "unsigned" but allows me to press install anyway.
Then another window shows up telling me that I have to restart mozilla and there is a button at the end of that window.
I press it to restart mozilla firefox, but no.... no firebug anywhere I do not see a firebug symbol that may indicate that firebug is already installed...:unsure:

Marlake:

Hi: I have done that many times:

Go to mozilla firefox
open the firebug website while i am in firebox
and then I click install
a window shows up telling me that firbug is "unsigned" but allows me to press install anyway.
Then another window shows up telling me that I have to restart mozilla and there is a button at the end of that window.
I press it to restart mozilla firefox, but no.... no firebug anywhere I do not see a firebug symbol that may indicate that firebug is already installed...:unsure:

click tools in the FF browser menu bar then hover over the firebug option