Categories Dressing

Uhmm...sorry for the trouble.

Another question, can you only add 1 group of links? Or can I duplicate the above and have another group of links below or above the Manufacturers?

There is theoretically no limit to the number of different link "heading" groups you can add to a category in this manner. They just all have to be in the one define statement.

That is a very nice implementation of the heading function... it's satisfying to see some of the features I built being used to their fullest.

I see...so you can only have 1 define per category number.
Just wondering, how do I get hover effect for the headings the same as normal category links? At the moment, we are only getting text-hover effect.
Lastly, how do I add white space at the bottom of each group?

Thanks for this great mod! :)

Managed to get the space issue done by changing the style for the Popular Series heading.
Only issue left is the hover effect. Need the hover to be the whole block instead of just the text link.

Add to
.catBoxHeading2 a {
display: block;
}

Added the above but the hover still only affect the text instead of the whole block like in the "popular series" sidebox. I also added code below but didn't made any difference.

.catBoxHeading2 a:hover {background:#ffffff url(../images/bc_cat_no_sub_hover.gif) no-repeat;}

...holding...

Your compressed CSS seems to have eliminated a lot of the stylesheet_categories_dressing.css entries, and I don't see the .catBoxHeading2 a:hover {} rule at all, unless that is somewhere else in the compressed mass of code.

Code:

---

* html #categories li, * html #categories li a{height:1em;background-image:url(/includes/templates/custom/images/pixel_trans.gif)}
.catBoxHeading1{font-family:tahoma,arial,helvetica,verdana;font-weight:bold;color:#fff;background-image:url(/includes/templates/custom/images/sideheader_bg.gif);padding:5px 0 8px 19px;margin:0}
.catBoxHeading2{font-family:tahoma,arial,helvetica,verdana;color:#fff;padding:0;margin:0}
.catBoxHeading3{font-family:tahoma,arial,helvetica,verdana;font-weight:bold;color:#fff;background-image:url(/includes/templates/custom/images/sideheader_bg.gif);padding:5px 0 8px 19px;margin-top:9px}
.catBoxHeadingImg{padding:0;margin:0}
#categories ul{list-style:none;background:none;border:none;margin:0 0 9px 0;padding:0}
#categories ul a{display:block;background:#f0f0f0 url(/includes/templates/custom/images/bc_cat_no_sub.gif) no-repeat;border-top:2px solid #fff;border-bottom:1px solid #cfd9e2;padding:1px 0 4px 20px}
#categories li.cat-top a:hover{background:#fff url(/includes/templates/custom/images/bc_cat_no_sub_hover.gif) no-repeat}

---

I removed the entries that are not being used (i.e. subcategories).
I have entered the .catBoxHeading2 a:hover now but still nothing happens. No changes in the hover effect.

It needs some more specificity to overcome some other rule. Add #categories

Code:

---

#categories li.cat-top a:hover, #categories .catBoxHeading2 a:hover{background:#fff url(/includes/templates/custom/images/bc_cat_no_sub_hover.gif) no-repeat}

---

Also, if you are deleting unused rules, what about .catBoxHeading3 and .catBoxHeadingImg?