different font color for each category in sidebox

Found the thread on how to make two category boxes so I'll have one box for Theme and one box for Product.

NOW I need to figure out how to do this: each category in the side boxes are a different color with a right side border to match. I'm new to Zen Cart and not totally functional in CSS so don't even know how to begin something like this. Suggestions? I'll gladly buy you ALL coffee and donuts!

tpl_categories.php has a commented section describing how to make individual categories have their own styling. You can do this for each category by adding a case section in tpl_categories.php and a rule in the stylesheet for each class you so define.

Say you call one category "category-holiday" as described, you would then add to your stylesheet

a.category-holiday {color: #aabbcc;}

Adjust the color as desired.

Glenn, thank you for pointing me in the right direction. I'll take a look at all of that. I was afraid you were going to say it couldn't be done. I'll of course post again if I run into problems.

Now how do I buy you coffee & donuts?

The Donations button at the top of the page will benefit the project as a whole - unless I've spent hours working for one person, I like that option best:)

Cool, thanks!

gjh42:

tpl_categories.php has a commented section describing how to make individual categories have their own styling.

Okay, I really don't know what the heck I'm doing. I managed to get two different headers working in the categories box. I've tried setting up tpl_categories.php per the instructions (just did it for the first five categories) and set up a separate style sheet for the new classes. But no matter what I do with the style sheet it is not working out. Can someone please take a look and tell me specifically how to set up the style for at least the first category (Princesses Mermaids & Fairies)? When I tried to set up the second category style, its colored ALL of my categories with that font color, I lost the rollover action on the top 5 categories, the right side and bottom borders are appearing in other areas of my page (logo, breadcrumb, footer, first product name on a category page, some new product names and more) but not in the navigation! Also, Safari is not picking up any of the new styles.

I need the sidebox navigation to look like this

but what I get is this (in Firefox):

I'm using the latest version of Zen Cart, I'm on a Mac, web site is here: http://www.herdoos.com/shop

You are missing the . for your new classnames:```
/includes/templates/herdoos/css/stylesheet_herdoos_cats.css

/category special styles/
cat-category-princesses { }
cat-category-princesses a:link, a:visited { color: #808dff; font-weight: bold; text-decoration: none; text-align: right; margin-right: 12px; padding-top: 6px; padding-bottom: 6px; border-right: 4px solid #808dff; border-bottom: 1px solid #fbb9cc; }
cat-category-princesses a:hover { color: #f06; font-weight: bold; text-decoration: none; text-align: right; margin-right: 12px; padding-top: 6px; padding-bottom: 6px; border-right: 4px solid #f06; border-bottom: 1px solid #fbb9cc; }
cat-category-cheer { color: #ff9600; font-weight: bold; text-align: right; margin-right: 12px; padding-top: 6px; padding-bottom: 6px; border-right: 4px solid #ff9600; border-bottom: 1px solid #fbb9cc; }
cat-category-cheer a:link, a:visited { color: #ff9600; font-weight: bold; text-decoration: none; text-align: right; margin-right: 12px; padding-top: 6px; padding-bottom: 6px; border-right: 4px solid #ff9600; border-bottom: 1px solid #fbb9cc; }
cat-category-cheer a:hover { color: #f06; font-weight: bold; text-decoration: none; text-align: right; margin-right: 12px; padding-top: 6px; padding-bottom: 6px; border-right: 4px solid #f06; border-bottom: 1px solid #fbb9cc; }

cat-category-princesses a:link, a:visited { color: #808dff;
cat-category-cheer a:link, a:visited { color: #ff9600;

These rules each have one selector that is valid (a:visited); cat-category-princesses a:link is not valid, and some browsers may throw out the whole rule because of this, while others may apply the rule to the valid selectors and ignore the invalid ones. You may have intended to limit the styling to .cat-category-princesses a:visited, but you need to spell out the whole tree every time; what you are styling is simply a:visited, which applies sitewide.

Thanks for the more in-depth explanation, I finally got it together. I appreciate your taking the time to explain how to do it since being a novice I didn't understand "a.category-holiday {color: #aabbcc;}" .

Most of us writing in with questions don't know what we're doing but have a sincere desire to learn, and you helped a lot.

Now if we could just get someone to clearly explain how to add an extra field to the contact form… :blink: