Help with sub category styling

[longstockings]

Hi

I am using a custom template and having a hard time trying to change the background color of just the sub categories. I think I need to change the template for the category sidebox in order to add a new class that I can style but after opening the file and playing about with it I am no closer.

The background should be the full width of the categories sidebox and not interfere with the links which have a hover effect.
http://goo.gl/Itw11o

Any help regarding this issue would be most appreciated.

[gjh42]

Your template has custom coding for the categories sidebox which creates a <ul> list, but it is malformed in that it does not account for nested subcategory lists, but puts all top and subcats at the same structural level. Nobody can tell you how to fix this without looking at the actual tpl_categories.php file, but Categories Dressing from Plugins already builds correctly nested <ul> lists with classes and ids to use for styling. You would have to recreate the current hover styling, but it will allow about any refinements you can imagine.

[gjh42]

The subcategory links do have a distinct class (.category-products) which you can use to give a distinct background on hover. There are other styles which also affect these items, so you might have to do some additional restyling, but this works to give subcats full-width hover backgrounds:
mj_template.css

.category-top:hover, .category-links:hover{
	background:url("../images/topbar-arrow-white.png") no-repeat scroll right center transparent;
}
/*after this rule, add a new rule below: */

.category-products:hover{
	background:url("../images/topbar-arrow-white.png") no-repeat scroll 95% center #ff0000;
	margin-right:0;
}

[longstockings]

Thanks very much. After looking at your example I came up with this which works perfectly.

.category-products:link, .category-subs:link{
background: #f7f7f7;
margin-right:0;
}

.category-products:hover, .category-subs:hover{
background: #93AF32;
margin-right:0;
}