Help making category-top bold

[dinki]

Forgive me if this has been posted previously but I didn not find what I was looking for when searching.

I would like to make all top level categories bold in the categories sidebox while leaving the subcategories the way they appear now. Can someone point me to the correct css file to edit to accomplish this? If it's easier to hack in a bold html tag I'll do it that way, but I wasn't able to find the file I need to edit to accomplish this.

Also, does anyone know of a good and easy way to force multi-line subcategories to autoindent the second line to be even or perhaps indent more than the second line?

[webomat]

Forgive me if this has been posted previously but I didn not find what I was looking for when searching.

I would like to make all top level categories bold in the categories sidebox while leaving the subcategories the way they appear now. Can someone point me to the correct css file to edit to accomplish this? If it's easier to hack in a bold html tag I'll do it that way, but I wasn't able to find the file I need to edit to accomplish this.

Also, does anyone know of a good and easy way to force multi-line subcategories to autoindent the second line to be even or perhaps indent more than the second line?

Hi Dinki,

The stylesheet.css file contains this section:

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

Add the red line to it and you're done w/the Category Bold issue. "-)

If you haven't done the override for your template yet, be sure to save the stylesheet:

... includes/templates/[your template name]/css/stylesheet.css

Easy way to find out what to style is to look at the page online and then View Source. (The way you do that depends on your browser.) Find the section, see what IDs or Classes are applied and then look through the Stylesheet files and modify as necessary. If you don't find a defined style for a specific ID, add your own! There are IDs defined in the pages that aren't styled, to allow us to customize without hacking into anything. "-)

HTH!

Becky

[dinki]

Ah, perfect! I wasn't looking in my [YOUR TEMPLATE]/css/stylesheet.css file. Now I can tell what is a main category and what is a subcategory. Thanks!

Any thoughts on the indent 'problem' due to long subcategory names? Take a look at my work -in-progress zen cart conversion. If you take a look at subcategory ' Native American & Southwestern ' . You'll notice that the Southwestern portion is displayed on the second line and is left justified the same as the main category names. Ideally, it would look a lot better if this would look like this:

Native American &
   Southwestern

Any idea on how to get this to display this way without tearing a lot of things apart? I would guess that many shop owners would prefer this type of listing.

[webomat]

Ah, perfect! I wasn't looking in my [YOUR TEMPLATE]/css/stylesheet.css file. Now I can tell what is a main category and what is a subcategory. Thanks!

Any thoughts on the indent 'problem' due to long subcategory names? Take a look at my work -in-progress zen cart conversion. If you take a look at subcategory ' Native American & Southwestern ' . You'll notice that the Southwestern portion is displayed on the second line and is left justified the same as the main category names. Ideally, it would look a lot better if this would look like this:

Native American &
  Southwestern

Any idea on how to get this to display this way without tearing a lot of things apart? I would guess that many shop owners would prefer this type of listing.

Hi Dinki,

Hmmm... first off, that "indent" is set via the Admin > Configurations > Layout Settings > Categories Subcategories Indent.

So my first thought would be to remove those two non-breaking spaces and then use CSS to style the class ( class is .category-products ). I don't know if doing so would impact anything else. I'd try adding some padding-left to it and check it in various browsers to see how it looks. Sometimes IE balks at padding.

However, there's no easy way to force the wrap to indent "again" as it were, at least that I know of. The above would only result in it wrapping to look like

Native American &
Southwestern


WAIT! Just hit me... you might not like it tho. "-) You could try right justifying your subcategories -- you might have to play around with the CSS styling to get it to look like it does now, with the exception that you would see this:

Native American &
     Southwestern

It's a bit more indent than your example but it might work for you.

Nice looking design on your site!

Cheers,

Becky

[webomat]

WAIT! Just hit me... you might not like it tho. "-) You could try right justifying your subcategories -- you might have to play around with the CSS styling to get it to look like it does now, with the exception that you would see this:

Native American &
     Southwestern

It's a bit more indent than your example but it might work for you.

I just thought of something else... you might end up needing to make that change above ~only~ for that subcategory by adding your own class to the existing class... otherwise the subcategory listings will all look "jagged" on the left because not every line is the same length. :-(

Like this... class="categorie-products myclasshelperclass"

Just some additional thoughts. Gotta love CSS -- it makes things easier and more work at the same time. "-)

Cheers!

[dinki]

Hmm.. It seems as though some sort of test for character length would have to be implemented to determine if the subcategory name will span more than one line. That probably won't be the easiest thing to do though as the font size of the user's browser probably has alot to do with if the string needs to span to the second line.


I think that maybe if I try to convert the subcategories into an html unordered list that elements of the list should 'auto-indent' themselves correctly. I'll post my findings if I figure out how to do this.

[dinki]

Yes, I do believe that using the unordered list is the way to go. If you look at my wip site now you'll see what I mean. Now all the category names line up even if they span two lines. Unfortunately I haven't figured out exactly where to put the li and ul elements as even the main categories are part of the list.

If I'm not mistaken I should be able to use CSS to alter the spacing of the list elements and remove the symbol/choose a different symbol, right? Any help on the css portion would be greatly appreciated....

[webomat]

Yes, I do believe that using the unordered list is the way to go. If you look at my wip site now you'll see what I mean. Now all the category names line up even if they span two lines. Unfortunately I haven't figured out exactly where to put the li and ul elements as even the main categories are part of the list.

If I'm not mistaken I should be able to use CSS to alter the spacing of the list elements and remove the symbol/choose a different symbol, right? Any help on the css portion would be greatly appreciated....

Yeah, I've been fiddling this too... I've got it working to some extent in all 3 PC browsers (Opera, IE and Firefox) and validating. But it's not exactly right -- I need to think the logic thru more carefully on the PHP side. I'm not structuring it properly to get the nested lists working correctly.

Let's compare notes tomorrow!

Cheers