Categories Dressing

Hey guys,

I have 3 categories

1, 2, and 3

with files:
catimg1.gif & catimg1hover.gif
catimg2.gif & catimg2hover.gif
catimg3.gif & catimg3hover.gif

I also have this code:
#categories a {
background-repeat: no-repeat;
display: block;
}

/example for individual category as bg image/
a.catimg1 {
background-image: url(../images/catimg1.gif);
height: 33px;
}

a.catimg1:hover {
background-image: url(../images/catimg1hover.gif);
}

a.catimg2 {
background-image: url(../images/catimg2.gif);
height: 33px;
}

a.catimg2:hover {
background-image: url(../images/catimg2hover.gif);
}

a.catimg3 {
background-image: url(../images/catimg3.gif);
height: 33px;
}

a.catimg3:hover {
background-image: url(../images/catimg3hover.gif);
}

but its not hovering! what do I do????

https://www.kekescookies.com/cookiestore

First, you are using the filenames to trigger foreground images, not background images. Hover cannot work on foreground images. The image names need to use the catbg3.gif format, not the catimg3.gif format.

Second, you need to use the "camel caps" format for class names in the stylesheet, like catBg3, not catbg3.

With the release schedule announcement for Zen Cart v2.0, I want to state that I will be significantly rewriting the Categories Dressing mod beyond the core code changes, whatever they will be.

The new version will move most if not all individual heading and other settings to a language file. (This will have the side effect of automatic multi-language support.) I will likely also enable <ul> list display if I can make it fully functional in IE (the one stumbling block), if the base code does not do so.

I can't give any timetable, but expect to make this a priority so that v3.0 can be released soon after the final ZC v2.0 release.

Hi, I have just installed this mod and for some reason all my links have squashed together rather than being in a list, could you tell me what i need to edit to get the links back to how they should appear,

also I have added the code to get the breakline to seperate the links but the line has too much space around the link, how can I get it too look like it does in the drop down menu's in admin.

Thanks
Ben

I need to see your site to know what you have really done and how to correct it. The standard installation will not "squash" the links.

Hello, blimey that was a quick reply. its www. bodykitsonline .co.uk sorry for the broken url, i just didnt want my site appearing in search engines. I have started to add the seperator line in between the links so most have now gone into a list, but for example Guages, Harnesses and accessories , Horns are all in one link block

As I suspected might be the case, you have not used the display: block; stylesheet property.

Looking closer, I see that you are using Frontpage to edit your site. This is destroying the PHP content and stylesheet linkages, and putting everything in inline HTML formatting.
NEVER use Frontpage for PHP site editing. Hopefully you can restore your site to its original file condition.

Thanks for the reply

gjh42:

As I suspected might be the case, you have not used the display: block; stylesheet property.

How do i use the display:block;stylesheet properly?

gjh42:

Looking closer, I see that you are using Frontpage to edit your site. This is destroying the PHP content and stylesheet linkages, and putting everything in inline HTML formatting.
NEVER use Frontpage for PHP site editing. Hopefully you can restore your site to its original file condition.

I dont use frontpage to edit the php I either use notepad+ or directly through the cpanel files, I made backups before uploading so I can very easily reverse all changes ive made.

Well, whatever it is, you should have a list of stylesheets being referenced in the top of your page's view source, and there is none. Something about the way you have made edits has replaced the standard output with Frontpage output.

Maybe you are using Frontpage somehow to run the page display? I don't know how it works or what its abilities are supposed to be, only that it should never be used in conjunction with a PHP site.

The display property is part of stylesheet_categories_dressing.css, which automatically loads when you install Categories Dressing as directed. It may be resident in your site's folder structure, but it is not being looked for by the code as it is now.

The category dressing css is in a seperste folder to my main css, should it be in the same folder.

I just went to another page on your site, and now it displays correctly. For some reason, the Frontpage output persisted on the homepage, even after refreshing, until I navigated away and back to it.

Yes, all stylesheets used on your current template should be in the same folder.

Does it matter where i put the dressing css within my main css file, can I just simply ftp it from the download into my main css file.

Thanks

What folder is it in now (on your site server)? You can just move it from there to your tempate's /css/ folder. If that is not possible, you can ftp a new copy from your unzipped set on your home computer to the template /css/ folder. You can't FTP a file into another file - or was that a typo for folder?

At any rate, when you put stylesheet_categories_dressing.css into your /css/ folder, it will automatically drop into alphabetical order. You can ignore the file's comment instruction to "copy relevant info into your main stylesheet and delete this file" - that is an optional way to organize things.

gjh42:

What folder is it in now (on your site server)? You can just move it from there to your tempate's /css/ folder. If that is not possible, you can ftp a new copy from your unzipped set on your home computer to the template /css/ folder. You can't FTP a file into another file - or was that a typo for folder?

Hi, i copy/pasted the stylesheet_categories_dressing.css into my main stylesheet file, and it made no difference to the list of links, however i did wake up this morning and thought of something i didnt check, and that was in the *tpl_categories.php *file I re-entered the ID numbers for the links correctly and that has now put the dividers in order which makes the links display correctly.

Basically my site now looks exactly the way it did before i installed this mod, but i dont know if what I have done so far is correct. Could you explain to me how I bring the divider lines closer together and make the content a hoverover, as in the drop down menu in admin.

Thanks

HI, im slowly beginning to get it all to work :clap:

Im just starting to try and figure out how to make the divider lines closer to the links.

Other than that it is looking brilliant,

Thanks

Do you know how I can make the divider lines closer together, ive been looking all afternoon and cant seem to figure out how to do it, other threads have mentioned that there could be a <br /> somewhere causing the added space to the block. Im hoping that you may know what to do. Thanks

Looks like you have figured it out, and changed directions with your styling. I like the look - do you want arrows for the list markers, or are you happy with the dots? If you make sure the bullet1.gif and bullet2.gif images are in /includes/templates/your_template/images/, they will show up.

If you want divider lines, you can add a border-top like this:```
/* example for top category styling */
a.category-top-text {
/background-color: #ccddff;/
color: #1122aa;
/margin: 0.2em 0;/
/padding: 0.2em 0.3em;/
border-top: 1px solid #aabbcc;
}

See the readme for directions on removing the "List Heading" - you just have to add comment marks // to one line in tpl_categories.php.

Thank you so much for giving me that bit of code, it has just done what i have been trying to find all day. One thing that i cant figure out is, how do i make the divider lines go right to the edge of the border of the categories box, also the hover colour of the background is just short of the edge.

I have now removed the bullets as i think it looks better left plain.

Thanks

You need to remove the padding. Just below .sideBoxContent in your stylesheet, add a new rule for #categoriesContent:```
.sideBoxContent {
background-color: #ffffff;
padding: 0.4em;
}

#categoriesContent {
padding: 0;
}
And down in the categories section, add this:
a.category-links {padding-left: 0.4em}

Fantastic :clap:That worked perfectly

Im so grateful for your help.