Categories Dressing

limelites - I see the effect you describe, but am away from home and have no diagnostic tools available right now. I'll see if there is anything I can find out when I get home. Unfortunately the nice Firefox tools are not relevant to IE display quirks...

gjh42:

Use padding instead of margin to get the text moved in from the edge of the background.

This did what I wanted as far as the image and text goes, but now that category is larger than the others. I wish negative padding would be allowed!

Thanks.

gjh42:

limelites - I see the effect you describe, but am away from home and have no diagnostic tools available right now. I'll see if there is anything I can find out when I get home. Unfortunately the nice Firefox tools are not relevant to IE display quirks...

Thanks Glen and a happy new year to you :hug:

This IE issue wasn't there previously. I had someone fix all the validation errors on our homepage (for SEO purposes) and now there are 0 errors, 0 warnings. However, it seems to have caused this IE anomaly. I can't seem to see what's causing it so I would really appreciate if you can look at it when you get back. Until then, enjoy the rest of your break.

too many page to search all by hand and the search option retured no results so here is my question.
I want to make my sideboxes (like the category sidebox) show up with a colored box (table) for each categories listed (like the sidebox header that says categories in in a colored box with the word 'categories' displayed inside) I want each of my categories like this with a hover effect also that would change the color of the box when the cursor is over it. now
can i do this?

This is a basic function of Categories Dressing. It is explained in the readme packaged with the mod files.

jenchord - You have a couple of unnecessary style classes active, and some syntax errors and incorrect/redundant rules in your stylesheet which combine to cause several issues. I don't have my regular diagnostic tools available now to unravel what is actually causing which issues; I can take another look when I get home tomorrow.

so with category dressing i can ad an image (not just a colored box but an image from my image file) behind each of the links in my side box, will this work with all my sidboxes or just the category sidebox?

thanks

sorry for the question in 2 places but I was not sure this was the right thread, i figured it was old and no one was looking. in the other thread you answered this question anyway. i am still working with the stylesheet in css but to no avail. i will keep an eye on the other thread and keep plugging away.
this is my stylesheet.css

https://www.airtightsecurityplus.com/security_equipment/includes/templates/bask_black/css/stylesheet1.css

thanks

For Categories Dressing, see the sections in the readme titled "To display all top categories as colored boxes:" and "For a "rollover" effect to change the appearance on hovering:".

Change the background: no-repeat; declaration to something like background: url(../images/mycatbg.gif) no-repeat;
and adjust the background: #ddeeff url(../images/catbghover.gif); to whatever you desire.

not much help, could be more specific, there are too many places that start with 'background: ... and i have been messing with them for 3 days now with no luck. and I have not found a mod that would do it yet, only 'categories dressing' and that says it is only for the categories not all sideboxes.

slater555:

not much help, could be more specific, there are too many places that start with 'background: ... and i have been messing with them for 3 days now with no luck. and I have not found a mod that would do it yet, only 'categories dressing' and that says it is only for the categories not all sideboxes.

I think Glen's talking about your stylesheet_categories_dressing file. Look at the declaration, " #chcategories ul a "

You do need to install Categories Dressing before you can use the advice above. > For Categories Dressing, see the sections in the readme titled...If you do look in the readme, you will find this spelled out in detail.

You will not find a mod that will put buttons behind all of your sidebox links; all you need for sideboxes that use <ul> or similar lists are a few stylesheet rules. All of your current sideboxes do fall under that description, so adding rules like

.sideBoxContent li {background: url(../images/mycatbg.gif) no-repeat;}
.sideBoxContent li:hover {background: url(../images/mycatbghover.gif);}

should help you.

if that stylesheet_categories_dressing is part of the mod 'categories dressing' then i dont have that file cause the categories dressing mod says it is for the categories box and I am looking to do this with all my sideboxes, (i.e. specials, new products, categories, information, best sellers....)

gjh42:

You do need to install Categories Dressing before you can use the advice above. If you do look in the readme, you will find this spelled out in detail.

You will not find a mod that will put buttons behind all of your sidebox links; all you need for sideboxes that use <ul> or similar lists are a few stylesheet rules. All of your current sideboxes do fall under that description, so adding rules like

.sideBoxContent li {background: url(../images/mycatbg.gif) no-repeat;}
.sideBoxContent li:hover {background: url(../images/mycatbghover.gif);}

should help you.

Good point. Installing the mod is a good starting point :huh:

I'd suggest installing it on a test site and then experimenting with it. It's defeinitely one of the best free contributions for Zen Cart.

Use the stylesheet_categories_dressing.css for the categories sidebox, and the rules in the previous post for other sideboxes. These rules will not work on the stock categories sidebox because it does not use lists.

gjh42:

This is a basic function of Categories Dressing. It is explained in the readme packaged with the mod files.

jenchord - You have a couple of unnecessary style classes active, and some syntax errors and incorrect/redundant rules in your stylesheet which combine to cause several issues. I don't have my regular diagnostic tools available now to unravel what is actually causing which issues; I can take another look when I get home tomorrow.

Sigh. I figured that was the case.

I know I've said it more than once, but I'm very grateful for you spending the time to help me. :smile:

Thank you zencart people!

The first thing you should do to make sense of what is happening is to eliminate all of the "cat-special_style" category specifications. They are not needed for this situation; catGroups can do the job better. Also take the cat-special-style rules out of the stylesheet to clean it up.
Give #catGroup4 and its sub-elements (some of) the styling you had for the cat-special_styles.

The odd widths are caused by trying too hard to control the widths:) You specify exact widths in many places, but block-level elements will always fill their containers correctly when the width is not specified, accounting for any margins or padding. If you specify a width (even 100%), then margins and padding are added to that, so 150px becomes 167px or something.
Try removing all width declarations except ones that came with the stylesheet, and only add some back if you want different results. Even then, consider whether a margin would give a better result that a width specification.

Once you have that sorted out, we can look more clearly at what needs to be done to tweak your display.
BTW, you no longer need the -moz-border-radius properties, so you can eliminate those and just have border-radius.

This is my stylesheet after doing some cleaning:

/**

• CSS Stylesheet for Categories Dressing examples
• @copyright Copyright 2010 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 by Glenn Herbert (gjh42) - 20100922
• Alternate version for use with Uncollapsed Categories Tree mod
  /
  /

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

#chcategories ul {/top category lists/
padding: 0px;
margin: 0px;
width: 150px;
background-color: #F0E68C;
position: relative;
left: 18px;
list-style: none;
}

#chcategories ul a {/top categories/
display: block;
line-height: 42px;
text-decoration: none;
color: #fff;
text-align: center;
padding: 1px;
font-size: 13px;
font-weight: bold;
margin-bottom: 2px; /* change this to put space between buttons*/
border: 1px solid #aabbcc;
position: relative;
height: 42px;
/* border: 1px solid #5E6977; */
border-radius: 5px 5px 5px 5px;
background-color: #19283D;
}

#chcategories ul ul {/subcategory lists/
list-style: none;
border-radius: 5px 5px 5px 5px;
background-color: #4B586F;
margin-bottom: 1px;
}

#chcategories ul ul a {/subcategories/
display: block;
list-style: none;
background: #4B586F;
}

#chcategories li a.cat-parent {
list-style: none;
margin-bottom: 1px; /* change this to put space between buttons*/
border-bottom: 1px solid #F0E68C;
position: relative;
height: 42px;
/* border: 1px solid #5E6977; */
border-radius: 5px 5px 5px 5px;
background-color: #19283D;
}

/* top category hover effects*/
#chcategories li.cat-top a:hover {
z-index: 1000;
background-color: #142031;
}

/* subcategory hover effects*/
#chcategories li li.cat-subs a:hover, #chcategories li li.cat-products a:hover {
z-index: 1000;
background-color: #142031;
}

/individual page rules go after the general rules/
/example for individual category as bg image/
#catGroup4 li a {background-image: url("../images/bulbut.png");
background-repeat:no-repeat; background-position:left center;
background-color: #000000;
border: 1px solid #8B0000;
}

#chcategories li.cat-special_style2 a{
padding-left: 30px;
}

#chcategories li.cat-special_style1 a{
   }

#catGroup4 li a:hover {
background-color: #610000;
}

#catGroup4 li li.cat-subs a, #catGroup4 li li.cat-products a {
z-index: 1000;
background-color: #222222;
padding: 0;
}

#catGroup4 li li.cat-subs a:hover, #catGroup4 li li.cat-products a:hover {
background-color: #610000;
}

#chcategories li>ul {display: none;}

#chcategories li:hover {position: relative;}

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

The width problems seem to be solved!

I deleted all the special style defines, but added two more again. I defined a special style to the category for which I wanted to push the lettering to the right off of the image. I thought doing so would allow only that category to have the padding in effect.

After I defined a style for that category (that category being Flame Resistant), the hover color showed up like I wanted it to when previously it had been the same color as my other categories (even though I added this in CSS: *#catGroup4 li a:hover {
background-color: #610000;
}. * )

Seeing this, I also added a special style for the FR Fabrics category. It also didn't have the red background color displaying when hovering. Instead, it had the blue background color that my other categories have. Adding this to my stylesheet,
#chcategories li.cat-special_style1 a{
} made the red background show up even though I didn't define a color for this style.

I don't know much about CSS, I'm confused as to how that could work. I haven't cleaned up my stylesheet as well as I could yet, perhaps?

This isn't too big of a deal, but I'm also wondering how to add the hover effect for the All Products tab.

What do you think?

Hi, is Category Dressing Zen Cart 1.5 compatible / PCI good to go?

It's one of the few mods I use on every my ZC sites but have read an issue regarding GET:-

http://www.zen-cart.com/forum/showpost.php?p=1056410&postcount=2

Hi Glen,

Did you manage to get a look at #1975?

ray - The only $_GET[] used in Categories Dressing do not in any way lead to database changes or user input, so per kuroi's post I don't believe there is an issue with PCI compliance. It does function fine with v1.5.0, and I will soon be releasing the new v2.8 (I know, I've been saying that for a while, but it's closer...:)

limelites - I just looked at some of the IE9 dev tools, and they seem pretty good. I should be able to test it, though I haven't yet.
Which "IE in compatibility view" are you using? IE9->8 ?