Expanded Category Sidebox, spacing between categires

Hi,
With http://www.zen-cart.com/index.php?main_page=product_contrib_info&cPath=40_52&products_id=392

Is it possible to add separation space between categories?

Category 1

• sub-category
• sub-category
  <insert additional space here>
  Category 2

I looked at the CSS styles, but there are only class names for the <a> link and they are not block-level elements, so padding,margin settings don't seem to work. Could the code be updated to include a div or other block element around the categories so that padding/margin can be added in the css?

thanks!
-justin

I am not much for design but wouldn't you add spacing or padding to the:

A.category-top, A.category-top:visited {
color: #008000;
text-decoration: none;
}

Yes, you can add padding to these elements:

A.category-top, A.category-top:visited {
color: #008000;
text-decoration: none;
padding-bottom: 10px;
}

or you could try this:

#categorylistbox .category-top a {
color: #008000;
text-decoration: none;
padding-bottom: 10px;
}

Thanks for the feedback. The above examples didn't work, so after a bit of research:
http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions
http://www.w3.org/TR/REC-CSS2/visuren.html#q5

Here is what worked the best for me (it could be made simpler, but I explicitly stated margin vs padding):

.category-top {
display:block;
/*uncomment to help with visual display
border-width:1px;
border-style:dashed;
*/
padding-top:0px;
padding-bottom:0px;
margin-top:10px;
margin-bottom:0px;
}

Glad you got it solved and I'm sure the information will benefit others as well.

This has worked perfectly for me too, thanks! :D

My only other query is how can I now centre the category titles? I feel they may look better if centred, especially the ones that appear on two lines.

Thanks

also, have just noticed that the spacing between the main cats is perfect but it doesnt seem to put a space bewteen the last sub cat 'Wall Art, Mirrors & Decorative' and the next main cat 'lifemax' how can I make a space between these two without making the space between the other main cats increase. (I dont want the gaps too big)

Thanks.

Hi,

Actually, i couldnt understand to which file is this code to be added and where.

I couldnt locate the file and the place where this code is to be added.

Please help and thanks in advance all gurus.

Regards
Chetan

I'm waiting with baited breath on this one too. Have been sitting confused for a day or two not being able to figure how to make my categories look nice...

You would add the rules mentioned to your template's stylesheet.css.
Actually, just making the links display: block; will introduce another problem, in that there is a <br /> between every category to keep the original inline elements on their own lines, and this will add extra space when the links are turned to block display. You need to edit /includes/templates/your_template/sideboxes/tpl_categories.php and remove the <br /> that follows the category link building. If you are uncomfortable editing PHP code, you can use Categories Dressing which takes care of that and has a multitude of other styling/organization possibilities.

Thanks for that - discovered it myself a couple of minutes ago, but am glad you addressed my next question before I asked it about the extra <br /> !

Thanks for the replies everyone.
Now, that i know that the code needs to be added in the stylesheet.css , the other question is where in stylesheet.css should i paste this code ?

.category-top {
display:block;
/*uncomment to help with visual display
border-width:1px;
border-style:dashed;
*/
padding-top:0px;
padding-bottom:0px;
margin-top:10px;
margin-bottom:0px;
}

Should i paste it at the bottom of the stylesheet.css or what ?

Thanks
Chetan

After a lot of trial and error.
I added it at the end of code.
Disabled the category counts and now its as required.
Just that now i want to change the colour of the category texts.

Thanks a tonne all for helping.

Chetan