Categories Dressing

forgot, in its raw form it looks like this.

https://www.toys-r-ok.com

V2.6 has been submitted, and until it is approved you can download it here.

I have also made a screenshot showing the features as applied to the ZC demo products.

If you don't anticipate a need to move category groups around or style them differently from each other, you can stick with v2.5.
The id that allows the individual control is the only real difference.

Categories Dressing v2.6 is now available in Free Addons.

I will be interested to see what people do on real websites with the new styling possibilities built in to it. If you have any questions about achieving a particular look, please ask.

Just for fun, here is an example of putting two "extra" categories boxes at the top of the center column, achieved with only this CSS:```
#navColumnOneWrapper {position: relative;}

.centerColumn {margin-top: 37em;}

ul#catGroup3 {
border: 1px solid #bd6699;
background: #bbeeff;
position: absolute;
width:16em;
height: 34em;
left: 16em;
top: 0.3em;
}

ul#catGroup48 {
border: 1px solid #bd6699;
background: #bbeeff;
position: absolute;
width:16em;
height: 34em;
left: 35em;
top: 0.3em;
}

hey Glenn.. awesome addon you have there..

just wondering, before i fiddle and break code..
is there an easy way to style 3 and 4 deep?

I donwloaded this add-on and installed and I'm feeling really stupid right about now because I can't figure out how to get a divider line to show:unsure:

Help :blush:

These rules style the first level subcats:```
#categories ul ul {/subcategories/
list-style: none;
background: #ffeecc;
border: none;
margin: 0 0 0.4em 0;
padding: 0 0 0 1.3em;
}

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

#categories ul ul ul a {

For a divider above a category, edit /includes/languages/english/extra_definitions/your_template/categories_dressing_defines.php, and add a define for that category (say it is cPath 23):```php
define ('CAT_BOX_HEADING_23','0|1||');//divider only - style 1

All of your setup for this mod will be in this file, and in the stylesheet (plus creating any images required).
Take the time to read through the readme.html included with the package.

Ok, that's what I was doing, just the divider code, but it never shows up. Maybe its my template (Pretty In Pink)?
Maybe I can rework a few things and not even need it.

Thanks!

Is it possible ..with or without this... for Sub cats to close when another opens?

For example :

I have Top Cats :
By Genre
By Author

Under Genre there is a long list and under Author there is A-Z......

If someone has the Genre open and they decide to click on Author, I hate for both subs lists to stay open, I would like for Genre to close and Author open...make sense?

I have made up another example, with more real-world applicability: moving the "sale" categories in the demo install from the sidebox to the top of the center column.

All of the modification from the stock Cat Dressing setup is as follows:

categories_dressing_defines.php```php
define ('CAT_BOX_HEADING_48','1|0||');//new list - no headings
define ('CAT_BOX_HEADING_49','1|0||');//new list - no headings
define ('CAT_BOX_HEADING_50','1|0||');//new list - no headings

define ('CAT_BOX_HEADING_53','1|2||');//divider only - style 2
//^--(modified to start new group, so it doesn't fall under cat 50 group)

stylesheet_categories_dressing.css```
#navColumnOneWrapper {position: relative;}

.centerColumn {margin-top: 11em;}

ul#catGroup48 {
    border: 1px solid #bd6699;
	border-width: 1px 0 1px 1px;
	padding: 3px 0 0 2px;
    background: #bbeeff; 
    position: absolute;
    width: 142px;
    height: 9em;
    left: 157px;
    top: 0.3em;
	}
ul#catGroup49 {
    border: 1px solid #bd6699;
	border-width: 1px 0;
	padding: 3px 0 0 2px;
    background: #bbeeff; 
    position: absolute;
    width: 142px;
    height: 9em;
    left: 299px;
    top: 0.3em;
	}
ul#catGroup50 {
    border: 1px solid #bd6699;
	border-width: 1px 1px 1px 0;
	padding: 3px 0 0 2px;
    background: #bbeeff; 
    position: absolute;
    width: 142px;
    height: 9em;
    left: 441px;
    top: 0.3em;
	}

Do you have an expanded categories mod installed? That would be the only way you could have subcats of two different top cats open at the same time. It would also explain why the define is not working, because expanded cat mods use completely different versions of the files, and most likely tpl_categories.php is not even being called.

gjh42:

Do you have an expanded categories mod installed? That would be the only way you could have subcats of two different top cats open at the same time. It would also explain why the define is not working, because expanded cat mods use completely different versions of the files, and most likely tpl_categories.php is not even being called.

No, I don't know what's going on... probably just me losing my mind. Its working the right way now. I'm getting my self so confused because I spent half the day installing the Product Book mod only to not be able to get it to work and had to uninstall it! Now I'm wishing I had a few of the things in that mod that worked back again ....lol :wacko::no:

I should rephrase that... it wasn't that i couldn't get the mod to work, it did, I guess, it just didn't make sense to me and how I needed it to work and I don't think anyone is around to help with it.

Re the demo above in post 510, the work also included creating and saving the images (catimg48.gif, catimg48.gif, catimg48.gif) in /your_template/buttons/english/.

Product Book is a big mod which touches a lot of files and the database, so it might be that there is still some effect from it.

First post anywhere ever!

Steadily working through Zen Cart setting up my first website. No previous CSS or PHP experience but trying hard.

I'm using Categories_Dressing to create a simple sidebox categories menu using images . I have/want six categories (no sub-categories as yet) each using three separate images: link, hover and visited, as background images as partly described in the 'To display images in place of selected category names' section of the readme html.

So far I have managed to get the link and hover working by just editing 'stylesheet_categories_dressing.css ' under the section /example for individual category as bg image/ and substituting the following code, basically to correspond with the my categories' cPath (extract is of the first category only):

#categories li a.catBg64 {
    background-image: url(../images/catbg64.gif);
    background-repeat:no-repeat;
    height: 30px;
    }

#categories li a.catBg64:hover {
    background-image: url(../images/catbg64hover.gif);
    background-repeat:no-repeat;
    }

the images are located as follows:

catbg64.gif = /includes/templates/your_template/buttons/english/

catbg64.gif & catbg64hover.gif = /includes/templates/your_template/images/

This didn't seem to match the readme instructions but was the only way I could get it to work.

Assuming that all's fine so far I need to get the visited link image working. Have created 'catbg64visited.gif' and planned to add the following code to that shown above:

#categories li a.catBg64:visited {
    background-image: url(../images/catbg64visited.gif);
    background-repeat:no-repeat;
    }

and add the gif image to either/both of the directories I mentioned above, in the vain attempt that it might work.

A lot of faffing around with position of code and location of images and I never get exactly what I want - which is one image for 'normal' viewing, a second for mouse hover and a third for a visited link.

It would be great if someone could point me in the right direction.

Note: I've (miraculously) created a test server on my pc so won't be able to send a link.

Zen Cart version: 1.3.8a
Categories dressing version: v2.6

Looks like you caught a typo in the readme. In the new version I switched the code to look in /buttons/english/ instead of in /images/, to allow for multiple languages, and missed changing those bits. it currently says```
Add this to your stylesheet_categories_dressing.css for each category cPath where you wish to use a background image:

#categories li a.catBg25 {
background-image: url(../images/catbg25.gif);
height: 30px;
}

#categories li a.catBg25:hover {
background-image: url(../images/catbg25hover.gif);
}
but should say
Add this to your stylesheet_categories_dressing.css for each category cPath where you wish to use a background image:

#categories li a.catBg25 {
background-image: url(../buttons/english/catbg25.gif);
height: 30px;
}

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

You are correct in the syntax for using a visited image. It should be```
#categories li a.catBg25:visited {
    background-image: url(../buttons/english/catbg25visited.gif);
    }
```I'll be interested to see your site when you get it on a live server.

Can't tell you how good it was to hear there was a typo in the readme. I thought I'd lost it even before I had it!?

I've implemented the changes you highlighted and it now does what it was supposed to. Many thanks.

I now have the following issues to address:

Clicking on a category takes me to the appropriate page with the button in the correct visited colour - great. However the hover attribute on this button is still active, which I don't want. Is there anyway to 'disable' the hover on the visited button once in the linked page.

Also, I must need to 'reset' the button attributes in some way, as each button stays 'visited' even when another category button is clicked. Likewise, on moving to the hoimepage,contact ,about us etc they stay 'visited' The only way to reset is by clearing the IE7 cache.

I'm sure that these are fairly fundamental CSS questions and apologies if they move outside this posts remit. If anyone could suggest a way forward I'm sure I can take it from there.

Cheers

Zen Cart version: 1.3.8a
Categories dressing version: v2.6

"Visited" is a CSS/browser/cache property which is in effect if a link has been "recently" visited. I don't know of a way to affect how long this is effective, and it was never meant to show just the last link you clicked.

These stylesheet rules will affect the currently selected category and its parents:```
/change bullet when a category w/o bg image is open to subs:/
#categories 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:/
#categories 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/
#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/
}

#categories li a.cat-selected.catBg25 {
background-image: url(../buttons/english/catbg25visited.gif);
}

Ok, thank you very much for your help Glenn, I'll reevaluate what I'm trying to achieve and may scrub the visited link idea I had in mind.

Cheers again

Simon

You can probably achieve what you want in all browsers but IE6; IE6 users would get the normal category image instead of the "current" image. It's not like they would be losing functionality, only a nice design touch. They most likely wouldn't even know they were missing something.