How to align text in side category box. Hard to read them.

I am working on https://www.jaylyns.com and trying to realign the categories in the side box. Some categories are really long and wrap to the next line but align with main category. At first glance it looks like the wrapped text are the categories. Does anyone know how to make this look more presentable and less confusing to the custoemrs. Thanks for your help.

jaylyns:

I am working on www.jaylyns.com and trying to realign the categories in the side box. Some categories are really long and wrap to the next line but align with main category. At first glance it looks like the wrapped text are the categories. Does anyone know how to make this look more presentable and less confusing to the custoemrs. Thanks for your help.

includes/ templates/ your_template/ css/ stylesheet.css

Add the following declaration if not found in the sheet.

1. #categories a {display: block;}

Be aware that this has a side effect: block display will combine with the <br /> coded into tpl_categories.php to put an extra space between categories. You can either edit /includes/templates/your_template/sideboxes/tpl_categories.php to remove the <br />, or you can install Categories Dressing which does this and much more.

That did not fix this. It still does not indent the word wrap on long categories. Any other ideas? Please help.

jaylyns:

That did not fix this. It still does not indent the word wrap on long categories. Any other ideas? Please help.

J,
Resize your side box back as before, I am working on the fix please..

Block display is not meant to indent text by itself; it makes the text a block element that can have spacing and other styling applied to it.

You can make the categories spaced so that it is clear which is which, and do whatever indenting or outdenting you want.

Got it looking much better. Thanks for all your help. One question though. Is there a way to have different bullets for different levels of subcategories? Thanks again.

Not within admin settings, but it would be a relatively simple coding addition in top_categories.php to add a class that indicates the subcat level and then style a background bullet accordingly.

This is described in the Changing color of Categories and Sub-Categories thread, post 20 ("simpler" version).

Once you have the classes as shown there, you would add to the stylesheet

a.category-subs1, a.category-products1 {
color: #7733ff;/if you want the text a different color/
padding-left: 1.5em;/adjust to taste/
background: url(../images/yourbullet2.gif) center left;
}

a.category-subs2, a.category-products2 {
color: #336699;/if you want the text a different color/
padding-left: 1.5em;/adjust to taste/
background: url(../images/yourbullet1.gif) center left;
}

Fine-tuning:

a.category-subs1, a.category-products1 {
color: #7733ff;/*if you want the text a different color*/
padding-left: 1.5em;/*adjust to taste*/
background: url(../images/yourbullet1.gif) 0.1em 50% no-repeat;
}

a.category-subs2, a.category-products2 {
color: #336699;/*if you want the text a different color*/
padding-left: 3.0em;/*adjust to taste*/
background: url(../images/yourbullet2.gif) 1.5em 50% no-repeat;
}

You would probably want to set the subcategories indent and separator to nothing in admin > Configuration > Layout Settings if you use this bullet method.