Categories Dressing

[jvanree]

Thank you for fixing my code!!! I will give it another try!

[jvanree]

Glenn YOU ARE MY HERO!!!! It worked!!!!

[nilsen]

Hi Glenn,
my test server is www.ensof-design.com/zc/
I've put in a few dummy categories, you'll see a gray rectangle where he background image is supposed to be
Thanks again for your unendeless patiance :)
Nils

[gjh42]

You have put the CSS for category 5 near the top of your main stylesheet, and the original category styling rules are still in place at the bottom of the stylesheet. In this case, they nullify the specific rule you added:

/*

sidebox links

*/

A.category-top {color: #900 !important; width: 100%; margin: 0px 5px 0px 0px !important; background-color: #ddd !important; padding: 2px 0px 2px 0px; border: 1px solid #fff; background-image: none !important; display: block; text-decoration: none;}

Specific styling should generally go after common/universal styling rules. In this case, since the template uses !important to enforce the background-image: none;, it might still control. You should probably just remove that property from that location.

[ljdream00]

Hi There!!!

Is there any way for me to have all of my sideboxes formatted the same without downloading the BetterCategories Mod.

I downloaded the categories dressing and got my categories sidebox just the way I want it, now I need to also change my Information, More Information, Documents sideboxes to look just like my new and improved categories sidebox...any suggestions?

I'm so proud of myself, it ONLY took one year...but I'm finally changing my template monster site to a zencart site and I'm trying to get the format close to each other, so far so good.

[gjh42]

You can change stylesheet coding to make the sideboxes all look the same as Categories, but behavior (like bullets) will generally require separate coding. Some of them may be easy and some not so much.

For starters, look carefully at the Cat Dressing stylesheet and (with the Firefox Web Developer toolbar) see what Categories elements are represented by what classes, and what analogous Information etc. elements are represented by what classes. Style those classes the same as their Cat Dressing counterparts.

[ljdream00]

okay update!, I really tried to just use the cat-dressing mod for all of my sideboxes but it was still challenging for me, so I downloaded the BetterCatMod and it worked out for me. Funny though...I tried the BetterCatMod a few weeks ago and I couldn't make my boxes appear the way I wanted them too to save my life, what a difference a few weeks make.

Sometimes I really feel like a true newbie with this coding stuff.

You can change stylesheet coding to make the sideboxes all look the same as Categories, but behavior (like bullets) will generally require separate coding. Some of them may be easy and some not so much.

For starters, look carefully at the Cat Dressing stylesheet and (with the Firefox Web Developer toolbar) see what Categories elements are represented by what classes, and what analogous Information etc. elements are represented by what classes. Style those classes the same as their Cat Dressing counterparts.

[nilsen]

Hi Glenn,
thanks a lot! it works now great. 2 more questions:
1. How do I get the text of the cat. name to show on the background? I see now only the background and no text...
2. How can I make the "current" cat that was clicked to show a specific image, so the users know where they r?
1000 thanks
Nils

[gjh42]

When you have an individual category background image, the code works to show only the background and no text. It assumes that you want special fonts or something that the ordinary text can't do. The simplest way to address this is to add the text to the image in Photoshop.

If you want all the categories to have the same background image, don't use the catbg#.gif names, but style a.category-top-text with the background-image.

[gjh42]

Highlighting the current category will differ depending on what exactly you want to do.
If you want all current categories to use the same image, this can be adapted:

Add to your stylesheet:

a.category-top-text .category-subs-selected, a.category-top-text .category-subs-parent {
    background-image: url(../images/yourcurrentbg.gif);
    }

You may need to add
display: block;
to this.

Individual bg images for specific current categories will require a bit of thought. I'll look at the best way to do that.