Making Only One Sidebox Look Different

[Xena]

I am trying to do something that I'm sure CAN be done, I'm just a bit stuck on the last part.
I'm trying to make my Categories sidebox look completely different from all the other side boxes. Now I've got the background and the footer (using CSS) working just fine by changing the class name in tpl_categories and adding that class to my stylesheet.
The problem/s I'm now facing are, how do I edit the heading and how do I edit the font colours of both the heading and the links? I want to add a background image behind the heading (did it for the footer of the sidebox using a background image set to bottom position) but I can't for the life of me figure out where to change the class in a template file so the category header can be it's own class. Same for the header font and container links. As the category sidebox is going to be almost black, I need the heading and links to be white, whereas all the other headings and link in the sideboxes need to be black.

Convoluted much lol
Any help would be greatly appreciated :)

[stevesh]

Search the Plugins for categories dressing. Also, Zencart uses a standard method for assigning class and id names, even though not all are included in the default stylesheet, so if you want to change the Categories sidebox, you would look for/add #categories in/to the stylesheet, and for the heading, #categoriesHeading.

As always, installing the Firefox browser and the Firebug or Web Developer plugin for Firefox make finding stuff like this easy.

[Xena]

Thanks for the info :) #categoriesHeading worked perfectly to add the background image to the head of the Category tab.
I did try using Firebug, but because the categories tag wasn't in the css it wasn't showing up *rolls eyes* Always the little things that make a whole project just stop.

Still having issues trying to get the links a different colour, but I had downloaded Categories Dressings the other day so I'll give it a whirl and see if that solves my problem.

Thanks again for your help

[stevesh]

Here are your category box links rules:

/* categories box parent and child categories */
A.category-top, A.category-top:visited {
color: #008000;
text-decoration: none;
}
A.category-links, A.category-links:visited {
color: #004080;
text-decoration: none;
}
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
color: #FF0000;
text-decoration: none;
}
SPAN.category-subs-parent {
font-weight: bold;
}
SPAN.category-subs-selected {
font-weight: bold;
}
/* end categories box links */

[Xena]

You are now officially my hero ... and have saved me from going bald I threw in a few changes ...
/* categories box parent and child categories */
A.category-top, A.category-top:visited {
color: #ffffff;
text-decoration: none;
}
A.category-links, A.category-links:visited {
color: #ffffff;
text-decoration: none;
}
A.category-top:hover {
color: #8E2A68;
text-decoration: none;
}
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
color: #979797;
text-decoration: none;
}
A.category-products:hover {
color: #8E2A68;
text-decoration: none;
}
SPAN.category-subs-parent {
font-weight: bold;
}
SPAN.category-subs-selected {
font-weight: bold;
}
/* end categories box links */

... and it works perfectly. Thank you!!!


Thought I'd post my changes in case someone else finds this thread useful :)

[gjh42]

If you simply want to make each level of category/subcat look different, the stock rules tweaked will work just fine. Categories Dressing would be needed if you wanted to change individual categories.

[Xena]

I got it to look exactly right doing as Stevesh said above, but I like the look of Categories Dressing to do a few other things as well :)