Forums / Addon Templates / Simple dividing line in category navigation

Simple dividing line in category navigation

Views: 1,260

Results 1 to 2 of 2
31 Oct 2011, 9:30 PM
#1
mek113 avatar

mek113

New Zenner

Join Date:
Apr 2011
Posts:
99
Plugin Contributions:
0

Simple dividing line in category navigation

I just want a simple dividing line between the categories in the left column navigation. I'm not having any luck finding the right style in the css stylesheet to make this happen. I've downloaded the Categories Dressing Add-on but that's way more complicated than what I need.
Here is a temporary link to my shopping cart: http://70.40.209.211/

1 Nov 2011, 6:51 AM
#2
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Simple dividing line in category navigation

That's because there is no element in the stock Zen Cart categories sidebox that can accept a divider-type style. Categories Dressing's origin was in my desire for exactly this, and it grew to meet other needs.

To get dividers, you can use your stylesheet to make the category links into block elements so they take the whole width of the sidebox, and apply top or bottom borders to them. You then need to eliminate the <br /> in the code between links or else you get an unwanted extra line-space.
One version of this would be

#categories a {display: block; border-bottom: 1px solid #aabbcc;}
#categories a+br {display: none;}

A more focused version would be

.category-top, .category-subs, .category-products {display: block; border-bottom: 1px solid #aabbcc;}
.category-top+br, .category-subs+br, .category-products+br {display: none;}

You can get fancier according to your needs and your knowledge of CSS.