How to change font color for Product Listing

Not sure how to word this but what I need to do is change the font color for the product listing nav bar without changing the color of the links in the sideboxes.

For example on this page http://thepixelpatch.com/store/index.php?main_page=index&cPath=3_10

If you look at the text links in the left sidebox ( Information ) they are green. On the red Product Listing bar at the top, the text is also green but since that bar is a dark color I need to change the font color. This is the code in the stylesheet that changes the font color

 
a:link, #navEZPagesTOC ul li a {
color: #475136;
text-decoration: none;
font-size: 1.2em; 
}

But it changes both of them. How can I seperate these two ?

Thanks !

a:link, #navEZPagesTOC ul li a {
color: #475136;
text-decoration: none;
font-size: 1.2em;
}can be done several ways. One version would be:

a:link {
color: #475136;
font-size: 1.2em;
text-decoration: none;
}

#navEZPagesTOC ul li a {
color: #475136;
font-size: 1.2em;
text-decoration: none;
}

Change colors to suit

Hey I looked at your site and was wondering how you made your side boxes to look the way you do. They are outlined and not a solid color. I really like that and would like to know how you did it.
Thanks

Since Jbraz is not around at the moment...```
.leftBoxHeading, .rightBoxHeading {
margin: 0em;
background: url(../images/boxhead.jpg);
background-repeat: no-repeat;
padding: 20px;
}

.leftBoxContainer, .rightBoxContainer {
background-image: url(../images/boxmid.jpg);
background-repeat: repeat-y;
margin-top: 1.5em; /* THIS IS THE DISTANCE BETWEEN THE SIDEBOXES /
margin-bottom: 1em; / THIS IS SPACE BETWEEN BOTTOM SIDEBOX AND BOTTOM NAV BAR */
}

.sideBoxContent {
background-color: transparent; /* THIS IS THE SIDEBOXES BACKGROUND COLOR */
background-image: url(../images/boxbottom.jpg);
background-repeat: no-repeat;
background-position:bottom;
padding-top: 1em;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 5em;
}

dbltoe:

can be done several ways. One version would be:

a:link {
color: #475136;
font-size: 1.2em;
text-decoration: none;
}

#navEZPagesTOC ul li a {
color: #475136;
font-size: 1.2em;
text-decoration: none;
}

Change colors to suit

Thanks !! I had tried this but for some reason it didn't work. Maybe I did something wrong so will try it again. Thanks !

Laurieudy -- I used images for the top and bottom of my sideboxes and then set a border around the sidebox. I also set a background for the box content. GJH42 shows my CSS code there. L You can see, I have to make notes to myself on the stylesheet to let me know what everything does as I discover it. I do not know CSS that well so just have to play with things to see what the changes are so I have to make notes to remember. I wish there was somewhere or someone who could go through the CSS from the Classic template and make notes on what each thing changes or does for a CSS dummie like me. :) And another thing that would make it easier is if there were an image somewhere that shows what each thing is on the template because I have a hard time knowing what each thing is called. But I guess I can just keep muddling along until I figure it out. :) And hopefully try to help someone else when I can.

dbltoe - OK, I tried that again and it doesn't work. Any other suggestions ?

What color did you use for #navEZPagesTOC ul li a?

Is
#navEZPagesTOC ul li a
mentioned anywhere else in your stylesheet?

I suppose it would have helped to actually examine your site to understand what you wanted as distinct from what you asked...

Your problem has nothing to do with #navEZPagesTOC; add this to your stylesheet:

.productListing-rowheading a {color: #ffffff;}

Glen is correct, of course. I was slowly working on it while he was. Us old folks just need to move faster. Best thing is that you're on the right track.
One thing, you are using #FFF8EF in the other areas of the nav bars. Might want to make sure they're consistent.

gjh42:

I suppose it would have helped to actually examine your site to understand what you wanted as distinct from what you asked...

Your problem has nothing to do with #navEZPagesTOC; add this to your stylesheet:

.productListing-rowheading a {color: #ffffff;}

THANK YOU !!!!!!!!! :) That did it !

LOL Thank you too DBLTOE ! Yeah I agree, us old foggies need to get up to speed. I been working on it for the past 5 days. Change one thing, upload, refresh, change back, change something else, save, upload, refresh, etc... You get the picture. LOL ! I had allready figured there was something I needed to add, just didn't know what it needed to be.

I am still working on all the font colors so hopefully in the end they will all be consistant. :) This CSS is new to me and I just have to muddle along.

Thanks for the help !!!!

Get yourself a copy of the firefox browser with the firebug add on. It will let you change while running the site. If the change works, you add it to the css. Great combo.

dbltoe:

Get yourself a copy of the firefox browser with the firebug add on. It will let you change while running the site. If the change works, you add it to the css. Great combo.

Actually, I have it and have been using it too. I tried to find the code for that using it but I think what the problem is, besides me being a complete CSS dummy L , is the code wasn't there and needed to be added ? Not sure about that but that's what I am guessing. For someone who doesn't know CSS very well, it's fairly easy to find things that are allready in the codeing and change it, the hard part comes when new code needs added and you just don't know what the heck to add. L

firebug should put an icon in your lower right-hand border of the browser. Or, use Tools --> Firebug -- Open Firebug. Using Inspect will allow you to see what's going on. The firebug window on the right will allow you to make changes to an EXISTING css call.:cool:

dbltoe:

firebug should put an icon in your lower right-hand border of the browser. Or, use Tools --> Firebug -- Open Firebug. Using Inspect will allow you to see what's going on. The firebug window on the right will allow you to make changes to an EXISTING css call.:cool:

Thanks ! I have used that to inspect several things and it has helped alot ! :)

I have a question though. My searchbox text input area was a little too wide for my template, it went to the right of the sidebox border so I used the Firebug to inspect it. Firebug found this in the CSS.

 
element.style {
width:145px;
}

and this in the html

 
<input type="text" style="width: 145px;" maxlength="100" size="18" name="keyword"/>

I searched everywhere in the CSS for that code and it wasn't there. I also checked the tpl_search.php for that exact code and it wasn't there. Here is what is in the tpl_search.php file

 
$content .= zen_draw_input_field('keyword', '', 'size="18" maxlength="100" style="width:  ' . ($column_width-30) . 'px"') . '<br />' . zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON);
$content .= '<br /><a href="' . zen_href_link(FILENAME_ADVANCED_SEARCH) . '">' . BOX_SEARCH_ADVANCED_SEARCH . '</a>';
} else {
$content .= zen_draw_input_field('keyword', '', 'size="18" maxlength="100" style="width:  ' . ($column_width-30) . 'px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . '<br /><input type="submit" value="' . HEADER_SEARCH_BUTTON . '" style="width: 50px" />';

I used the Developers Tool in the Admin of Zencart to search and I also used PowerGREP which searches through files for specified text. Couldn't find it anywhere. So I went ahead and added the element.style code to my CSS and added the ( 130px ) to the tpl_search.php file like this...

 
$content .= zen_draw_input_field('keyword', '', 'size="18" maxlength="100" style="width: 130px ' . ($column_width-30) . 'px"') . '<br />' . zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON);

It worked and changed the size of the text input area to what I need , but now Firefox shows this error

Warning: Expected end of value for property but found '145px'.  Error in parsing value for property 'width'.  Declaration dropped.

So, my questions are.. where in the world is this 145px coming from ? Where did Firefox find the element.style code ? It is there now because I added it but why did it show it was there before I added it when it wasn't ? And I still can't find the 145px in any zencart file.

I found this doing a search on the Firefox error..

http://www.litfuel.net/plush/?postid=101

And am wondering if it is something in the Javascript ? Am totally lost at this point. It works fine, I just hate having that error there and not know if it is going to make something not work in the future or something.

Code:

$content .= zen_draw_input_field('keyword', '', 'size="18" maxlength="100" style="width: ' . COLOR="Red"[/COLOR] . 'px"') . '<br />' . zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON);
$content .= '<br /><a href="' . zen_href_link(FILENAME_ADVANCED_SEARCH) . '">' . BOX_SEARCH_ADVANCED_SEARCH . '</a>';
} else {
$content .= zen_draw_input_field('keyword', '', 'size="18" maxlength="100" style="width: ' . COLOR="Red"[/COLOR] . 'px"Without going into a lengthy php/html workshop, most of Zen files are mixtures of php and html code. Notice that both statements above have included the php variable of $column_width. The $ is usually the giveaway that it's a variable from the database. ALL_CAPS is generally a variable set in a define statement inside a file. Your column width is probably set at 175 in admin --> Configuration --> Layout Settings. The default is generally 150.
Note that between the parentheses above, there is also a -30 added to the $column_width. This math takes place as the file is parsed and before it is presented to the browser. Hence 175 becomes 145 when you see it in the source.
Most important point in this lesson is to learn to search the developers tool kit in the admin for items that are presented in html and you will have to search for things positioned near or around the number in a file in order to find out if it is a variable. In this case I searched for size="18" I could have searched for maxlength but that seemed too generic and I felt I would get too many "hits." !8, on the other hand, seemed unique enough to maybe limit the number of "hits" to search through to find the width I was looking for.

SO... If we want the box to be wider, we can change the 30 to 15 -- whatever works OR... We can be happy with the width and change the HEADER_SEARCH_DEFAULT_TEXT. Using the developers toolkit, we find that in the header.php file. You would save it to /includes/languages/english/CUSTOM/header.php (Where CUSTOM is your override/custom template directory.
Remember that any changes you make to any of these files should be saved in your override directory to protect them from being overwritten on upgrade.
BTW The style code comes from the fact that the tpl_search file has the style calls built into the file. Some say embedded styles. Not always the best but the Zen folks are gradually weeding them out.

Oh come on , think of how many people you would make happy if ya gave a PHP/HTML workshop free ! :smile:

Ok, I understand it now. Naturally if I know next to nothing about CSS, I know absolutely nothing about PHP. I have been able to figure alot of things out just by reading and playing, but the variables are a different ballgame. Right after I learn CSS I will tackle PHP. Of course by then I will be too darn old to see . L

Actually I had tried to change the number in the $column_width-30 , but I was going the wrong direction. Thinking the smaller the number, the smaller the box. I don't know why I didn't try going with a larger number. Duh me !

Thank you so much dbltoe for helping !! I know it probably gets annoying having people like me who know nothing about PHP and very little about CSS come here and ask a ton of questions. But believe me, I am trying to learn and not just have it done for me. I want to be able to do it all myself someday. :smile:

You're welcome.
After a while you recognize those who want to learn versus those who want to be spoon fed.
For those willing to try, I'm willing to help.
Just buy a cup of coffee for the Zen team every now and then. That's what keeps them going.