Page 1 of 2 12 LastLast
Results 1 to 10 of 15
  1. #1
    Join Date
    Jan 2008
    Posts
    4
    Plugin Contributions
    0

    help question 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:
    Code:
    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:
    Code:
    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.

  2. #2

    Default Re: Proper Category Spacing

    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.
    Last edited by rainthebat; 12 Jan 2008 at 07:09 PM. Reason: add

  3. #3
    Join Date
    Jan 2008
    Posts
    4
    Plugin Contributions
    0

    Default Re: Proper Category Spacing

    Quote Originally Posted by rainthebat View Post
    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.

  4. #4

    Default Re: Proper Category Spacing

    Well your website is coming along nicely.

    I would find this in the style sheet:

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

    Code:
    /* 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.

  5. #5
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Proper Category Spacing

    Adding to a.category-top

    margin-top: 3px;

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

  6. #6
    Join Date
    Jan 2008
    Posts
    4
    Plugin Contributions
    0

    Default Re: Proper Category Spacing

    Quote Originally Posted by rainthebat View Post
    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?

  7. #7

    Default Re: Proper Category Spacing

    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;
    }
    Last edited by rainthebat; 12 Jan 2008 at 08:23 PM. Reason: aa

  8. #8
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Proper Category Spacing

    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 Code:
          $content .= '<br />' "\n";
        }
      }

      if (
    SHOW_CATEGORIES_BOX_SPECIALS == 'true' ... 
    and delete the
    '<br />' .
    to get
    PHP Code:
          $content .= "\n";
        }
      }

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

  9. #9
    Join Date
    Jan 2008
    Posts
    4
    Plugin Contributions
    0

    Default Re: Proper Category Spacing

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

  10. #10
    Join Date
    Dec 2007
    Posts
    10
    Plugin Contributions
    0

    Default Re: Proper Category Spacing

    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

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. v151 Category pages dont seem to be pointed to the proper domains
    By wagnerguy in forum General Questions
    Replies: 3
    Last Post: 28 Oct 2014, 02:34 AM
  2. Category Listings Spacing
    By homeofgoodies in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 11 Aug 2010, 09:12 PM
  3. Category product spacing
    By dscott1966 in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 8 May 2008, 05:44 AM
  4. Spacing between Category Name & Category Description
    By raunharman in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 14 Dec 2007, 11:31 PM
  5. Category List Spacing
    By copels in forum Templates, Stylesheets, Page Layout
    Replies: 8
    Last Post: 6 Sep 2007, 05:40 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR