Categories Dressing

[slater555]

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

[limelites]

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

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.

[gjh42]

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.

[jenchord]

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.

Thank you zencart people!

[gjh42]

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.

[jenchord]

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?

[ray-the-otter]

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/showpo...10&postcount=2

[limelites]

Hi Glen,

Did you manage to get a look at #1975?

[gjh42]

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 ?

[gjh42]

Either the IE9 dev tools aren't nearly as useful as I thought they looked, or I haven't yet found some of the most important features (entirely possible), but I couldn't directly find the causes of the extra spacing... however, I think I know the immediate cause, if not the ultimate one. The spaces seem to correspond with totally empty <li> elements in the list. Some are second heading items which could have been caused by too many "pipes" in the define, while one seems to be an empty <li> which follows the All Wedding Flowers top cat and actually holds the subcats. I don't know the cause of this and can't replicate it in my test setup with CD v2.8; there were list bugs in earlier versions of 2.7. I think they were all worked out by v2.7.3, but couldn't be certain without installing it to test.

The Coming Soon and Colour Filter headings do have blank <li> following them in Firefox view source:

<li><div class="catBoxHeading3"> <a href="index.php?main_page=coming_soon">Coming Soon ...</a></div></li>
<li><div class="catBoxHeading"></div></li>
<li class="cat-top"><a class="cat-not-selected-text" href="http://www.silkblooms.co.uk/index.php?main_page=index&amp;cPath=349

The All Wedding Flowers has its subcats in a separate <li>:

<li class="cat-bolder"><a class="cat-not-selected-text" href="http://www.silkblooms.co.uk/index.php?main_page=index&amp;cPath=1">All Wedding Flowers ...</a></li><li>
<ul>
<li class="cat-products"><a class="cat-not-selected-text" href="http://www.silkblooms.co.uk/index.php?main_page=index&amp;cPath=1_6