Categories Dressing

[r1formetoo]

Hmm.. I'm missing something. I don't have the file ch_categories.php installed because, to my understanding, those three files are only needed if you want all your categories and subcategories to be displaying all at once. If I did that with my real site RedlineStands.com I'd have a menu that was 10 ft tall when you went to the home page. Is the Uncollapsed Categories Tree mod necessary to have a flyout menu? Lastly, am I to understand correct that in order to utilize a flyout menu I must edit the stylesheet_categories_dressing.css and replace all #categories statements with #chcategories? I'm sorry if my questions are stupid. I find this pretty difficult because even though the instructions are well written the lingo is tailored to those who know much more than I. Thanks Glenn; you've been great!

[gjh42]

Without the uncollapsed categories, the subcats are not fetched from the database except for the current active ones. So yes, you need that for flyout. And with flyout, you only get one category expanding at a time, so you wouldn't have the big list showing.
The chcategories files include a stylesheet that has already been modified for the #chcategories box id.

[r1formetoo]

You will want to set the define as '0|0|1'; ordinary functioning, highest level = top, lowest level = first subcat. This assumes you have the ch_categories files installed, and you have put the rules for flyout given earlier in this thread into your stylesheet.

Do you recall about where those flyout rules are located in this thread? I've read the readme file a couple times but I never saw anything that appeared to be blatant rules for turning on the flyout mod. I've installed the ch_categories files up to this point.

[r1formetoo]

Btw, I now have 2 css files: stylesheet_chcategories_dressing.css and stylesheet_categories_dressing.css installed on my server, but I get the feeling that isn't right.

[gjh42]

Yes, as the readme says, when you have chcategories installed you should either delete stylesheet_categories_dressing.css or rename it to stylesheet_categories_dressing.bak so it will be ignored.

The flyout styling is given best in post 1750:

#chcategories li>ul {display: none;}

#chcategories li:hover {position: relative;}

#chcategories li:hover>ul {
    display: block;
    position: absolute;
    left: 98%;
    top: 0;
    background: #ffffff;
    border: 1px solid #aabbcc;
    z-index: 100;
    width: 98%;
    }

I had not yet developed the flyout rules when I released v2.7.3, so that would explain why they are not mentioned in the readme:)

[nummell]

Hi Glenn,

Can you help me out... I can´t my sub cats rollover effect isn´t working. I´ve triple checked everything and can´t figure out what´s wrong.

The site is http://www.pedradatattoosupplies.com

Thx in advance

Best regards

nummell

[r1formetoo]

So Glenn, do I now remove the "ch" from the new stylesheet to take the place of the one I deleted? I didn't find anything like that in the readme. On the flip side, if we've changed the name of the stylesheet to stylesheet_chcategories_dressing.css don't we need to inform all other files of this? The read me file says, "If you are using Uncollapsed Categories Tree, replace #categories with #chcategories in all examples" though it doesn't say what file it's talking about editing. I added that bit of code from post 1750 to the bottom of my stylesheet_chcategories_dressing.css file, though it did not seem to affect anything. Below is the code to that file as I'm currently using it. I'm really quite lost; is this something I can pay you to install?

/**
* 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_chcategories_dressing.css
* Categories Dressing v2.7.3 Glenn Herbert (gjh42) - 20090505
* Alternate version for use with Uncollapsed Categories Tree mod
*/
/*
hr.catBoxDivider1 {
color: #aabbcc;
}
*/

/*IE6 hacks*/
* html #chcategories li, * html #chcategories 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/english/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/english/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/english/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;
}

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

#chcategories ul a {/*top categories*/
display: list-item;
list-style: disc inside url(../images/bullet1.gif);/*change to list-style: none; to remove bullet*/
background: no-repeat;
border: none;
margin: 0;
padding: 0;
}

#chcategories ul ul {/*subcategory lists*/
list-style: none;
background: #ffeecc;
border: none;
margin: 0 0 0.4em 0;
padding: 0 0 0 1.3em;
}

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

/*change bullet when a category w/o bg image is open to subs:*/
#chcategories 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:*/
#chcategories 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*/
#chcategories li a.cat-parent, #chcategories li a.cat-selected, #chcategories li a.cat-not-selected {
list-style: none;
display: block;/*fix IE6 margin-left bug*/
}

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

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

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

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

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

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

/*From here to */
#chcategories li>ul {display: none;}

#chcategories li:hover {position: relative;}

#chcategories li:hover>ul {
display: block;
position: absolute;
left: 98%;
top: 0;
background: #ffffff;
border: 1px solid #aabbcc;
z-index: 100;
width: 98%;
}
/*Here came from post 1750 of main support thread*/

/*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]

nummell - I don't see anything wrong with your subcat rollover. It goes to red text with a semitransparent white background, just like your stylesheet calls for:


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


r1formetoo - CSS files that start with "style" are autoloaded, so you don't need to do anything else to/with them.

View source shows that your sidebox is #categories, not #chcategories. Did you activate the chcategories sidebox in Tools > Layout Boxes Controller? The readme mentions this, but doesn't say where to activate it (the readme_ch_categories.txt was left out of the v2.7.3 package).

[r1formetoo]

r1formetoo - CSS files that start with "style" are autoloaded, so you don't need to do anything else to/with them.

View source shows that your sidebox is #categories, not #chcategories. Did you activate the chcategories sidebox in Tools > Layout Boxes Controller? The readme mentions this, but doesn't say where to activate it (the readme_ch_categories.txt was left out of the v2.7.3 package).

Ok, so that turned on the chcategories sidebox, which now makes sense to me. However, it for some reason created a nice big white block above my menu.

[gjh42]

Did you have a custom rule for #categories which set margin-top to 0? If so, duplicate it for #chcategories.