Categories Dressing

I want all of the top level categories to display all the time and the 1st level of subcategories to pop up when the user hovers over one of the top level categoriesYou 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.

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!

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.

gjh42:

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.

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.

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

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

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

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

gjh42:

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.

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

gjh42:

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

I checked my includes/templates/custom/css/stylesheet.css file and searched it for a #categories statement but came up with nothing. Am I looking in the wrong place?

gjh42:

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

Ok, I'm finally making some headway getting everything dressed appropriately. However, when I hover over a top level category I still have this white space to the left of all my choices in that pop up box with all my subcategories. I think that white space looks out of place though I have no idea what causes it. What do you think?

Near the bottom of your stylesheet.css you have```
#categories,#information {margin-top: 0;
float:left;}

This is causing the left spacing on subcats:

stylesheet_chcategories_dressing.css (line 90)

#chcategories ul ul {
background: none repeat scroll 0 0 #FFFFFF;
border: medium none;
list-style: none outside none;
margin: 0 0 0.4em;
padding: 0 0 0 1.3em;
}

Adjust as desired.

gjh42:

Near the bottom of your stylesheet.css you have```
#categories,#information {margin-top: 0;
float:left;}

Wow, not sure how I missed that????????

Glenn, please have a look at the site examplecart.com now and let me know what you think. I've played with the spacing and colors a bit but I'm still not convinced that it looks as professional as the rest of the site. What do you think of the color choices? I feel like the site looks ok "until" you hover over a category. Then the pop up box shows the subs and I feel that's where things look a bit amateurish. What would you try to give it a tad more professional and flowing look? I'm also interested in seeing how you can use pop up images for sub categories though I've yet to see a site with this in action. Do you know of any?

"Popup images"? Do you mean substituting images for text, or using them for headings? Those are the only ways Categories Dressing uses images...

Hi Glenn,

It only happens in sub cat with background images... it used to work just fine but it stoped working and I can´t figure out whats wrong check here http://pedradatattoosupplies.com/index.php?main_page=index&cPath=7

I have 2 sub cat images named correctly (1 regular and another for hover) and it used to work just fine. what can be wrong

Thx in advance

Best regards

nummell

r1formetoo - I played with the styling a bit... see what you think of this.```
#chcategories ul {/top category lists/
list-style: none;
background: none;
border: nono;
margin: 0 0 0.4em 0;
padding: 0;
}

#chcategories ul a {/top categories/
display: block;
background: #ffffff;
border: none;
margin: 0;
padding: 0 0.4em;
}

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

#chcategories ul ul a {/subcategories/
display: block;
background: #E9EAEA;
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 {
color: #000000;
background: #6CbBff;
font-weight: bold;
}

/change bullet when a category w/o bg image is open to products:/
#chcategories li a.cat-selected-text {
color: #000000;
background: #6CbBff;
font-weight: bold;
}
...

/* top category hover effects*/
#chcategories li.cat-top a:hover {
color: #000000; /this is the top level cat text color only when hovering/
background: #4C9Bff; /this is the top level cat background color only when hovering/
}

/* subcategory hover effects*/
#chcategories li li.cat-subs a:hover, #chcategories li li.cat-products a:hover {
color: #000000; /this is the 1st subcat text color only when hovering/
background: #4C9Bff; /this is the 1st subcat background color only when hovering/
}

...

#chcategoriesContent {padding: 0.4em 0;}
/*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;
border: 1px solid #000000;
z-index: 100;
width: 98%;
}
/Here came from post 1750 of main support thread/