Categories Dressing

[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;}

Let me know how this works (I wish there were web developer tools for IE6).

[Kinvart]

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;}

Let me know how this works (I wish there were web developer tools for IE6).

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.

[gjh42]

#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.

[Kinvart]

#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.

Uf...how on earth coul i miss that... 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.

[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;}

[Kinvart]

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.

[adi2009]

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;}

Let me know how this works (I wish there were web developer tools for IE6).

huh i never though IE would give me so much trouble 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)

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;}

[gjh42]

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).

[dreamoutlaw]

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...ain_page=index

Any advice would be greatly appreciated!

Thank you!

[gjh42]

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'.