Proper Category Spacing

I've been searching the forums up and down for a way to resolve my issue and after exhausting every related post I could find no solution.

The website I'm working with is http://dctractor.com/catalog/
.

What I am trying to do is setup my category box to make it easier to read. I want to accomplish this by creating a bit of space between different categories, but I want subcategories to appear directly below the category, then for there to be a space after the final subcategory and the next category.

In example, I want it to look like this:

Accessories
      -Cleaning Products (Subcat)
      -Covers                (Subcat)

Chain Saws and 
Parts

Engine Parts and 
Accessories

Some solutions I've tried involve adjusting the margins, but then instead of reading how I want it to, it will put a space in between category names that extend across two lines making them read:

Accessories

    -Cleaning Products

    -Covers

Chain Saws and

Parts

This could easily confuse our customers, so it is not acceptable. Is there anyway I can get my categories to read how I want them to?

I hope this made sense, but let me know if I need to clarify.

Thank you in advance.

wouldn't adding a 3-5 pixel margin to .category-top{} give you what you want, or is this what you already tried doing?

You could probably reduce the line-spacing for the whole category listing to give the spacing between categories a more dramatic effect.

rainthebat:

wouldn't adding a 3-5 pixel margin to .category-top{} give you what you want, or is this what you already tried doing?

You could probably reduce the line-spacing for the whole category listing to give the spacing between categories a more dramatic effect.

I believe this is what I've already tried doing and it resulted in the second example I've shown, but it is possible that I didn't do it properly. If you could show me exactly what I mean, I could give it a try and let you know how it turned out.

Unfortunately, I'm a mechanic and business owner by profession, so my web development skills are sub par to say the least.

Well your website is coming along nicely.

I would find this in the style sheet:

/* categories box parent and child categories */
A.category-top, A.category-top:visited {
	color: #008000;
	text-decoration: none;
	}

and add the margin-top part:

/* categories box parent and child categories */
A.category-top, A.category-top:visited {
        margin-top:5px;
	color: #008000;
	text-decoration: none;
	}

Try that out and let me know.

Adding to a.category-top

margin-top: 3px;

will put the space above every top cat. This will allow subs to nestle below.

rainthebat:

Try that out and let me know.

Okay, I've been trying this out, but I haven't been able to get it to show any results. I've triple checked to make sure I put exactly what you said, but it doesn't make any changes to my site. I've tried setting it to 300 pixels to make sure I'm not just failing to see the change.

Is there anything that might be over riding this change that I could be overlooking?

O.k. I see what you mean, that method is ineffective for some reason.

try this one out: display: block;margin-top:3px

example:

A.category-top, A.category-top:visited {
display: block;
margin-top:3px;
color: #008000;
text-decoration: none;
}

Oops, forgot that margin-top etc. will have no effect on inline text elements. You need block display for this to work.

Just adding

display: block;

to a.category-top will then cause the spaces between items to double, because there will now be a duplicate line break in the code.

You could install Categories Dressing which takes care of the details of this, and also allows you to organize the long list of categories with subheadings.

If you just want to get the spacing on your own. add to your stylesheet:

#categories a {display: block;}

Then edit /includes/templates/your_template/sideboxes/tpl_categories.php.
Find```php
$content .= '<br />' . "\n";
}
}

if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' ...

'<br />' . 
to get```php
      $content .= "\n";
    }
  }

  if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' ...

Likewise, remove the breaks from the links at the bottom of the file, like this:```php
if (SHOW_CATEGORIES_BOX_SPECIALS == 'true') {
...
$content .= '<a class="category-links" href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>' . '<br />' . "\n";
}

 . '<br />'
to get```php
    if (SHOW_CATEGORIES_BOX_SPECIALS == 'true') {
      ...
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>' . "\n";
      }

That did it! Thank you so much for taking the effort to resolve this for me, I've been at it for hours.

please please can someone explain how this is done ,as this is exactly what i want done with my site ,where do i look what file what line

thank you

first you need to open up your style sheet in includes/templates/YOUR_TEMPLATE/css and find:

		 				A.category-top

then make it look like this:

 			 				A.category-top, A.category-top:visited {
        display: block;
        margin-top:3px;
	color: #008000;
	text-decoration: none;
	}

to complete the operation, you would need to follow the instructions Glen gave earlier in the thread.

...nevermind... :)

Actually, there is an addition to be made to Rain's post: making a.category-top block display will not help the links or subcats. That is why I said above to add

#categories a {display: block;}

as this covers all cases at once.

Hi, I followed all these instructions, added the
#categories a {display: block;} to the bottom of my stylesheet and removed the breaks from tpl_categories.php as described, but it's made no difference. I don't suppose this is because im using a categories listing box so that all my sub cats are permanently displayed?

Can someone explain how i can achieve the seperation between each category, whilst keeping the sub cats together as this person initally asked for.

Thanks.

p.s my site is http://www.thegreatgiftshop.co.uk/zencart

and I too would like my categories to appear like this;

Bags,Purses &
Accessories

Fitness &
Wellbing

Golf

Home Accessories
clocks digital &
handy gadgets (sub cat)
crystal & glass (sub cat)
etc etc
etc

I found this in another thread and added;

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

to the bottom of my stylesheet and thats done the trick