Categories Dressing

gjh42:

I see something that might be useful: all of the first subcats have class="cat-subs" while all the fourth level subcats have class="cat-products".
So add to your stylesheet_categories_dressing.css```
#categories li.cat-subs {display: none;}

> 
> dreamoutlaw - not a link, but my paypal address is at the top of the readme;)

good idea Glenn, but I just tryed it and unfortunatly now right side box is empty all time - no matter on what sublevel/subcategorie (in IE, Firefox and Opera, however, what is interesting is that Google chrome is showing everything as it should - correctly)..

Ah, right, that goes back to my comment that all of the fourth level subcats are inside first level subcats. When th first level is hidden, it takes the fourth level with it.

I had an idea for using height or line-height...```

• html #categories li.cat-subs {height: 0;}
  and only if you need it
• html #categories li.cat-products {height: 30px;}

gjh42:

Ah, right, that goes back to my comment that all of the fourth level subcats are inside first level subcats. When th first level is hidden, it takes the fourth level with it.

I had an idea for using height or line-height...```

• html #categories li.cat-subs {height: 0;}
  and only if you need it
• html #categories li.cat-products {height: 30px;}

Hey,

i did than so as the readme file originally says: i uploadet files named "catimg2.gif" and are displayed fine, but there is some 10-15 px margin on the right side (take a look at the store).

Any suggestions? I've tried to look up this margin in all .css files, but had no luck finging this setting.

#chcategories li.cat-category-moski a {
background-color:#76C5F0;
color:#DBDEFF;
font-family:verdana;
left:0;
padding:0 0 0 5px;
right:0;
}
```Change the 5 to 0.

gjh42:

#chcategories li.cat-category-moski a {
background-color:#76C5F0;
color:#DBDEFF;
font-family:verdana;
left:0;
padding:0 0 0 5px;
right:0;
}

Uf...how on earth coul i miss that...:oops: Thanks.

There's another thing i just noticed... When i come to the first page of the store (or click on the logo), the menu doesen't load right, it's pushed up to the top of the page. When i click any of the menu items or browse any other pages in my store (apart from the front page), everything works as it should.

I had been wondering about that for a while, then I found a
margin-top: -333px;
in a stylesheet rule for something like box border.

stylesheet_tm.css, line 87:

.left-col-margin{ margin-top:-333px; position:relative;}

gjh42:

I had been wondering about that for a while, then I found a
margin-top: -333px;
in a stylesheet rule for something like box border.

stylesheet_tm.css, line 87:

.left-col-margin{ margin-top:-333px; position:relative;}

Found it! But when i change it, the problem stays the same...if some category or subcategory or a product is opened, the menu works fine, just the front page messes it up.

gjh42:

Ah, right, that goes back to my comment that all of the fourth level subcats are inside first level subcats. When th first level is hidden, it takes the fourth level with it.

I had an idea for using height or line-height...```

• html #categories li.cat-subs {height: 0;}
  and only if you need it
• html #categories li.cat-products {height: 30px;}

huh:huh: i never though IE would give me so much trouble:lamo::smile: I tryed first to add this to stylesheet_categories_dressing.css

• html #categories li.cat-subs {height: 0;}

and this is what happens: it works as usal perfect in Firefox, G.Chrome and Opera but in IE on all levels /subcategories there is empty space right sidebox except when viewing car parts types (4th level subcat.) where sidebox contains correct info but it still looks "wrong" (same as before - please [click here](http://jazz.vacau.com/screenshot3_IE.gif))

I am not sure if this helps, maby I am doing something wrong but here's how my css looks like:

/**

• CSS Stylesheet for Categories Dressing examples
• @copyright Copyright 2009 Glenn Herbert
• @copyright Portions Copyright 2003-2006 Zen Cart Development Team
• @copyright Portions Copyright 2003 osCommerce
• @license http://www.gnu.org/licenses/ GNU Public License V3.0
• /includes/templates/your_template/css/stylesheet_categories_dressing.css
• Categories Dressing v2.7.3 Glenn Herbert (gjh42) - 20090505
  /
  /
  hr.catBoxDivider1 {
  color: #aabbcc;
  }
  */

/IE6 hacks/

• html #categories li, * html #categories li a {
  height: 1em;/fix IE6 whitespace bug/
  background-image: url(../images/pixel_trans.gif);/partially fix IE6 a block display bug/
  }

.catBoxHeading1 {
font-family: georgia, serif;
font-weight: bold;
font-size: 1.4em;
color: #335511;
background-color: #ff66ff;
/*background-image: url(../buttons/hrvatski/catheadbg1.gif); */ /uncomment to use background image with or without coded text/
/*height: 23px; */ /uncomment to use background image without coded text/
padding: 0.3em 0.4em;
margin: 0;
}

.catBoxHeading2 {
font-family: 'times new roman', serif;
font-weight: bold;
font-size: 1.4em;
color: #335544;
background-color: #ffaaff;
/*background-image: url(../buttons/hrvatski/catheadbg2.gif); */ /uncomment to use background image with or without coded text/
/*height: 23px; */ /uncomment to use background image without coded text/
padding: 0.3em 0.4em;
margin: 0 0 2px 0;
}

.catBoxHeading3 {
font-family: 'comic sans ms', sans-serif;
font-weight: bold;
font-size: 1.2em;
color: #336699;
background-color: #ffbbdd;
/*background-image: url(../buttons/hrvatski/catheadbg3.gif); */ /uncomment to use background image with or without coded text/
/*height: 23px; */ /uncomment to use background image without coded text/
padding: 0.3em 0.4em;
margin: 0 0 2px 0;
}

.catBoxHeadingImg {
padding: 0;
margin: 0;
}

.catBoxSubtext1 {
font-family: 'times new roman', serif;
font-weight: normal;
font-size: 1.2em;
color: #669911;
background-color: #FFDDFF;
padding: 0.1em 0.2em 0.1em 1.0em;
}

#categories ul {/top category lists/
list-style: none;
background: none;
border: 0px solid #ffaa99;
margin: 0 0 0.4em 0;
padding: 0;
}

#categories ul a {/top categories/
display: none;
}

#categories ul ul {/subcategory lists/
list-style: none;
background: #CCCCCC;
border: none;
margin: 0 0 0.4em 0;
padding: 0 0 0 0;
}

#categories ul ul a {/subcategories/
display: list-item;
list-style: circle inside url(../images/bullet1.gif);/change to list-style: none; to remove bullet/
background: #CCCCCC;
border: none;
margin: 0;
padding: 0;
}

#categoriesContent>ul>li>ul>li>a {/hide only first level subcategories - right box/
display: none;
}

• html #categoriesContent ul ul a {/hide only first level subcategories - right box -IE6 hack/
  display: none;
  }

• html #categoriesContent ul ul ul a {/show deeper subcategories - right box -IE6 hack/
  display: list-item;
  }

• html #categories li.cat-subs {height: 0;}

/change bullet when a category w/o bg image is open to subs:/
#categories li a.cat-parent-text {
list-style: square inside url(../images/bullet2.gif);/change to list-style: none; to remove bullet/
}

/change bullet when a category w/o bg image is open to products:/
#categories li a.cat-selected-text {
list-style: square inside url(../images/bullet3.gif);/change to list-style: none; to remove bullet/
}

/disable bullet for cats w/ image or bg image/
#categories li a.cat-parent, #categories li a.cat-selected, #categories li a.cat-not-selected {
list-style: none;
display: block;/fix IE6 margin-left bug/
}

/different bullet for links if desired/
/*
#categories li a.category-links {
list-style: disc inside url(../images/bullet4.gif);
}
*/

/* top category hover effects*/
#categories li.cat-top a:hover {
color: #dd6633;
background: #ddeeff url(../images/catbghover.gif);
}

/* subcategory hover effects*/
#categories li li.cat-subs a:hover, #categories li li.cat-products a:hover {
color: #000;
background: #fff url(../images/catbghover.gif);
}

/individual page rules go after the general rules/
/example for individual category as bg image/
#categories li a.catBg25 {
background-image: url(../buttons/hrvatski/catbg25.gif);
height: 30px;
}

#categories li a.catBg25:hover {
background-image: url(../buttons/hrvatski/catbg25hover.gif);
}

/example for custom individual category styling/
#categories li.cat-holiday a {
border-top: 3px dotted #112233;
background-color: #aabbff;
color: #112233;
padding: 1em 0em;
}

/example for custom category group styling/
ul#catGroup48 {
border: 1px solid #bd6699;
background: #bbeeff;
position: relative;
left: -1.3em;
top: 0.2em;
}

.catCount {color: #000000;}

If those things won't do it, it may not be possible to get IE6 to render correctly. It might require some new PHP code to actually turn the first level categories off for the categories sidebox (and not the chcategories box).

Glenn - Everything you have said so far has worked perfectly. This site is turning out great! There is only one more thing I want to do with my category box. I want to hide the the 2nd subcategories. (Show top-category, show 1st sub-category, hide 2nd sub-category) I found some postings on this thread, and I read the readme file about CAT_BOX_ACTIVE_LEVEL. But, please forgive my ignorance... I still can't seem to make it work. If you have time to check my homepage, I want to hide everything below the sub-category "More..." This will allow me to align banner boxes with featured products on my homepage.
http://doreggie.com/leach_cart/index.php?main_page=index

Any advice would be greatly appreciated!

Thank you!

You don't want to show any 3rd level subcats, right? To hide second level and below, and show top and first level all the time, you would want to set CAT_BOX_ACTIVE_LEVEL to '0|0|1'.

PERFECT! I'm not sure why that worked, but it was exactly what I wanted. I will reread the readme file, and try to get a better understanding. Thank you so much for all your help!

'0|0|1':

0| - Use standard output (show everything the module file gives)

|0| - Highest level - 0 is top category

|1 - Deepest level - 1 is first subcategory.

Hi Glen,

I wonder if you could help me with my categories dressing? I've revamped https://www.limelites.co.uk (new header and logo and totally new color scheme and buttons). It's looking good apart from a few little niggles with my categories dressing.

I have the font sizes the way I want them (finally) but I can't for the life of me find what's controlling the font color on the hover over top categories and sub categories. I see these in my stylesheet:

/* top category hover effects*/
#chcategories li.cat-top a:hover {
    color: #000; 
    background:  #EEF7FF url(../images/catbghover.gif);
    }

/* subcategory hover effects*/
#chcategories li li.cat-subs a:hover, #chcategories li li.cat-products a:hover {
    color: #000; 
    background: #EEF7FF url(../images/catbghover.gif);
    } 

........but changing the #000's to #ff0000's seems to have zero effect. It's as though something's overriding them?

Also, I'm hoping to make the styling that's applied to the main categories apply also to the Size Filer sideboxes that pop up when you click on the sub categories. So far, I can't seem to achieve this.

Any help or advice would be appreciated.

Hi Glen,

I've managed to get the desired effect I was after. I'm just posting this in case it proves useful for anyone else using this mod. It turned out the main stylesheet was controlling the hover styling via the .leftBoxContainer a:hover

It even controls the text in my 'Size Filter' boxes.

To change the size of the main category headings I used li.cat-top {font-size:1.1em;}.

To get the hover color to change on these main category headings (Menswear and Childrenswear). I used this:

li.cat-top a:hover {
color:#0000ff !important;
}

Thanks for posting the solution you found!

Continuing a discussion from this thread on long category names wrapping and looking wrong because of the bullet indent...

Find in your stylesheet_categories_dressing.css```
#categories ul ul a {/subcategories/
display: list-item;
list-style: circle inside url(../images/bullet1.gif);/change to list-style: none; to remove bullet/
/* background: #ffddbb;*/
border: none;
margin: 0;
padding: 0;
padding: 0;
}

Add the text-indent, with a negative value to pull the first line out to match the second.
Also add left margin to compensate for the indent.```
#categories ul ul a {/*subcategories*/
    display: list-item;
    list-style: circle inside url(../images/bullet1.gif);/*change to list-style: none; to remove bullet*/
   /* background: #ffddbb;*/
    border: none;
    margin: 0;
    padding: 0;
    padding: 0 0 0 1.7em;
    text-indent: -1.7em;
    }

Hi Glen,

I thought I had the blue hover working fully, but I just noticed it's not right in IE with compatibility mode on.

The hover is picked up perfectly in all browsers on all cats and sub cats, but in IE with compat' mode it isn't picking up the hover styling for cat-products (womenswear sub-cats and womenswear by size sub-cats).

Don't suppose you can see why it's doing that?

Glen, never mind. Another classic case of finding the solution one minute after asking!

#chcategories li li.cat-subs a:hover, #chcategories li li.cat-products a:hover {
color:#0000ff !important;
background: #EEF7FF url(../images/catbghover.gif);
}

Hey,

i must tell you, i am very pleased with this mod:clap:

EXCEPT for one thing, it "crashes" on the first site of my store (https://www.elegance.si/store). When you cruise trough the site, it works fine, just on the first site is somewhere up. Why is that, how can i repair this?

Thank you:clap: