Categories Dressing

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

[LilleyPadGifts]

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

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.

[gjh42]

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.

[simon1066]

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

[gjh42]

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.

[simon1066]

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

[gjh42]

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

The selectors for the category with products that you are currently looking at are #categories li a.cat-selected-text and #categories li a.cat-selected. You could apply the "visited" background image using those in the selector list:

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

though I believe this will not work in IE6 - it can't handle two classes applied to the same element and will ignore the entire rule.

[simon1066]

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

[gjh42]

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.

[raimond]

Hi,
I have a menu with cats and subcats
example:
cat1
subcat1a
subcat1b
subcat1c
cat2
subcat2a
subcat2b
subcat2c
cat3
subcat3a
subcat3b
subcat3c
etc

I want to have an extra space/seperator or div between the last subcat and the categorie under it.
So an extra space in this example between subcat1c - cat2 and subcat2c - cat3 and subcat3c - etc

Where can I insert an seperator, div or <br />

It is possible to insert an seperator above a category and you have to asign them with their ids. But is there a simple hack where you can insert the seperator under every last subcat?