Categories Dressing

Categories Dressing does not have a way to distinguish whether categories are empty.

You could write a test to hide empty categories if you have category counts turned on.

I don't know what "writing a test" means. :( Thanks anyway!

This would be a PHP statement like ```php
if ($box_categories_array[$i]['count'] >= '1') {
//show the category
} else {
//hide the category
}

Would this mod screw up my category pages themselves? I ask because suddenly my products are appearing multiple times on each category page. :(

gjh42:

autoace - You may want a negative text-indent, or perhaps in admin you should set Configuration > Layout Settings > Categories separator between subcategories to blank (remove hard-coded indent spaces).

pb4 - To get the first three categories in the "Design" group, change the define from 'CAT_BOX_HEADING_107' to 'CAT_BOX_HEADING_103'.
Looks like you have the Web Design ok now.

thanks very much, worked great!

Glenn,

Can Categories Dressing only manipulate the design and display of the categories sidebox on the homepage or can it also be done for the category navigation/listing pages and the product listing page?

I installed this mod a while ago and I don't have the text instructions anymore.
How do you add dividers/separators between the categories?

Hello,

How do I add borders around each box of categories?
I have 3 boxes of categories (top manufactures, top phone brands, other departments) but have only 1 define in "categories dressing" php file. This is because they are all links (no actual categories were made in admin).
When I add borders in the stylesheet, I get around borders around all of them instead of per box so it looks like I have borders around the whole left column.
Any help would be much appreciated.

Thanks

jmsnyder23 - This mod can only affect the categories sidebox; it has nothing to do with what happens in the center of the page.

autoace - Categories Dressing will affect the categories sidebox on every page unless you add special rules to limit it.

rrzc - In /includes/languages/english/extra_definitions/your_template/categories_dressing_defines.php, make a define for each category id where you want to have a divider above it, like this:

define ('CAT_BOX_HEADING_52','0|1||');//divider only - style 1

Or if you want dividers between all of them, you can edit a stylesheet rule, like

#categories li+li.cat-top a {border-top: 1px solid #aabbcc;}

Berserker - What you are describing is rather strange, and I would have to see it to advise on making it work the way you want. Why and how do you have no actual categories, if you want to categorize your products?

gjh42,

sent you a pm.
hope that's ok, the site is hardly finish so dont want the domain advertised here yet...

thanks

OK, you do actually have a full complement of categories, even though you have hard-coded all of the links (leading nowhere) in one heading define for category 92. The question I still have is why you do not want to let the system dynamically link to the categories.

For the setup you have now, of course you are unable to distinguish between the different groupings - you have used the same heading class numbers for each type of link. You could do something like this if you want the groups to have the same colors and borders (changes from your current define in red):```
define ('CAT_BOX_HEADING_92','1|0|||
<a href="">DVD</a>|2t|<a href="">Blu-Ray</a>|2|<a href="">English Manga</a>|2|<a href="">Books & Magazines</a>|2|<a href="">Apparel</a>|2| ... |2|<a href="">Wall Scrolls</a>|2|<a href="">Toys & Figures</a>|2b|

Top Manufacturers|3|
Electronics|1|
<a href="">Acer</a>|2|<a href="">Apple</a>|2|<a href="">BlackBerry</a>|2| ... |<a href="">Pentax</a>|2|<a href="">Samsung</a>|2|<a href="">Sharp</a>|2|<a href="">Sony</a>|2|<a href="">Sony Ericsson</a>|2|
<a href="">Toshiba</a>|2b|

Collectibles|4|
<a href="">ADV</a>|2|<a href="">Alter</a>|2| ... |<a href="">Viz Media</a>|2|<a href="">Yamato USA</a>|2b|

Other Departments|3|
<a href="">Best Sellers</a>|2|<a href="">New Releases</a>|2|<a href="">Coming Soon</a>|2|<a href="">Clearance</a>|2|<a href="">Promotions</a>|2b|');

In your stylesheet:

.catBoxHeading2t, .catBoxHeading3, .catBoxHeading4 { /top link or heading in a group - top & side borders/
...
margin: 0;
padding: 0.3em 0.4em;
border-top: 1px solid #ffaabb;
border-left: 1px solid #ffaabb;
border-right: 1px solid #ffaabb;
}

.catBoxHeading2, .catBoxHeading1 { /middle link in a group - side borders only/
...
margin: 0; /no top or bottom margins so the borders touch the neighboring borders/
padding: 0.3em 0.4em;
border-left: 1px solid #ffaabb;
border-right: 1px solid #ffaabb;
}

.catBoxHeading2b { /bottom link in a group - side & bottom borders/
...
margin: 0;
padding: 0.3em 0.4em;
border-left: 1px solid #ffaabb;
border-right: 1px solid #ffaabb;
border-bottom: 1px solid #ffaabb;
}

Hello,

Thanks for the reply.
I have categories made in admin but they will not show in the left column (using hidecategories) as I will move them to the top. As far as I know, this module will not work if there are no categories showing in the left column so I specifically made "Weekly Special" just to make it work. If im wrong on this, please correct me.

Im doing your changes and will report back.

Thanks

Have made the changes and even though havent done it properly yet, it's looking like it will work.
Just one problem though, I do not have borders on the category that is making this to work (Category 92 = Weekly Special).
I left the changes on the site so you could check.

Take the 2b off the "Promotions" link and return it to 2, then add #catGroup92 .cat-top to the rule for the box bottom:

.catBoxHeading2b, #catGroup92 .cat-top { /bottom link in a group - side & bottom borders/

I still don't understand why you think it is better to hard-code the links in the sidebox, but if this works for you and I don't have to maintain it, I guess it doesn't matter.

Hello Sir Glenn,

I think i need your help again..

its about categories dressing mod css..

I thought i modified the css perfectly but its showing wrong in IE.

the bullets in IE is different in FF. In FF its looking great but in IE the bullets are too close to the categories. I tried editing the css file but i can't get it working..

any idea how can i correct this? Thanks....

heres my stylesheet_categories_dressing.css

/**
 * 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: 1em;
    text-align:center;
    color: #FFD700; 
    background-color: #080808;
    padding: 0.3em 0.4em;
    margin: 0 0 2px 0;
    }


.catBoxHeading2 { 
    font-family: arial;
    font-weight: bold;
    font-size: .9em;
    text-align:center;
    color: #000000; 
    background-color: #c9c7b6;
    padding: 0.2em 0.3em;
    margin: 0 0 1.5px 0;
    }

.catBoxHeading3 { 
    font-family: 'comic sans ms', sans-serif;
    font-weight: bold;
    font-size: 1.2em;
    color: #336699; 
    background-color: #ffbbdd;
    }

.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: none;
    margin: 0 0 0.4em 0;
    padding: 0;
    }

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

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

#categories ul ul a {/*subcategories*/
    display: list-item;
    list-style: none;
    background: #none;
    border: none;
    margin: 0;
    padding: 0;
    }

/*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: #000000; 
    background:  none;
    } 

/* subcategory hover effects*/
#categories li li.cat-subs a:hover, #categories li li.cat-products a:hover {
    color: #000000; 
    background: none;
    } 

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



/*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: none;
    background: #bbeeff; 
    position: relative;
    left: 0em;
    top: 0.2em;
    }


.catCount {color: #000000;}

i found out i'm not just the only one having this issue.

http://www.kirkgateflowers.co.uk/

http://www.editricebahai.com/libreria/

http://www.hidguy.net/

http://www.venomousstangz.net/

these websites are using the mod and look at the bullets in IE its closer to the categories than in FF..

atlast! i found a website that looks good on both browser..

http://www.smokin-paint.com/

ahhh... :no: i thought the bullet is similar in FF but theres a difference. It looks good in IE but if you look closer the bullets are not located exactly where its located in firefox.

I cleared cookies, cache and etc and still the same result.

I hope you can check this out.. thanks...

gjh42:

Take the 2b off the "Promotions" link and return it to 2, then add #catGroup92 .cat-top to the rule for the box bottom:

.catBoxHeading2b, #catGroup92 .cat-top { /bottom link in a group - side & bottom borders/

I still don't understand why you think it is better to hard-code the links in the sidebox, but if this works for you and I don't have to maintain it, I guess it doesn't matter.

Are there other ways in having selected manufacturer links in the sidebox without having to create folders for them in admin?
And im just wondering, does this module only add other links above the defined category or can you add links below it as well? All the links I added are above but I would like to add some below if possible.

Thanks

You can add text (including links) below a category by using the "subtext" feature, described in the readme.

You do have categories in admin for your manufacturers, at least of mobile phones. As you don't seem to have any products beside Acer phones entered yet, I have no way of seeing what other categories you do have. Do the "Top Electronics" manufacturers also have categories under something other than mobile phones? If so, a single link from the sidebox is not going to be able to show more than one type of those manufacturers' products. Do you have a definite flow worked out for how the sidebox links are going to connect to all the products they need to? I can't really advise on alternate setups without knowing your intentions. Anyway, I am currently in the last two weeks of preparation for a festival on my land, and shouldn't be spending much time on non-business stuff.
One suggestion I would make is to modify the manufacturers sidebox to show a list of names (I think there is a mod for this in Free Addons). This would be dynamic and free you from maintaining the hard-coded list forever. I think it would take care of showing all of a manufacturer's products, even if they are in different categories (I don't use manufacturers for my site, so am not sure of details).

corditreasures - I think the differences you see are just the way the two browsers implement list displays, and there is nothing that can be done to alter them. IE seems to always give a few pixels more indentation on inside lists than Firefox. It is a small difference, and in most cases I don't think it really matters. In some cases it might actually matter, and then I would google something like "IE list indent" or similar keys to see if someone has solutions for it.