Categories Dressing

[ravynw34]

we have been using categories dressing on a site with images instead of text for Cat name with no problems until now. We added 3 new categories recently and today one of employees added the code for the images. For whatever reason these are not showing. Is there a limit set somewhere. The code appears fine from what we can see. Everything appears to follow in line with our previous setup of this mod. Any ideas?

[gjh42]

There is no limit on category text>image replacement. Can you post the category image filenames you used?

[gjh42]

limelites - The subcats have margins and padding on the left which can be adjusted in the stylesheet, for example:
stylesheet_categories_dressing.css (line 93)#categories ul ul {/*subcategory lists*/
list-style: none;
/* background: #ffeecc;*/
border: none;
margin: 0 0 0.7em 0;
padding: 0 0 0 0.8em;
}

and under
#categories ul {/*top category lists*/

You may also have had the default Zen Cart subcat indent spacing active; if so, it seems you have now eliminated that.

Dotted lines separating top cats would best be done with something like
border-top: 1px dotted #aabbcc;
in the
#categories ul a {/*top categories*/
rule.

Category menus that expand and contract on clicking can only be done with javascript ("accordion menu"). This would have to be a completely different set of code.

[limelites]

Hi Glen,

I have a few questions/issues but let's deal with them one at a time. RE the dotted lines to seperate top level categories, I can't seem to get this one. Here's the css in stylesheet_categories_dressing.css:

#categories ul a {/*top categories*/
display: list-item;
list-style: disc inside url(../images/bullet1.gif);/*change to list-style: none; to remove bullet*/
background: no-repeat;
/*border: none;*/
border-top: 1px dotted #aabbcc;
margin: 0;
padding: 0;
background:none;
font-family:"Times New Roman", Times, serif;
font-size: 1.0em;
text-transform:none;
}


...... it seems to have no effect.

[limelites]

Hi Glen,

Got the dotted lines working... I'm being really picky here but is there a way to increase the distance between dots? Also, is there a way to remove the top one from above the "Wedding Collection" category?

[ravynw34]

the image names both those that do show that were there before and the new ones are named like ie: catbg67.png, catbg79.png etc
It is only the new ones that are not showing. The images that were exisiting already are still working just fine. Those that were added are not showing at all.

[gjh42]

Do they all have the .png extension? Have you set the extension from the stock .gif to .png? Are they all in the right folder (/includes/templates/your_template/buttons/english/)?

[ravynw34]

Yes they all have .png extension and all are in the correct folders.
They set as per example below. both the current that are working and the non working ones

#categories li a.catBg86:hover {
background-image: url(../buttons/english/catbg86.png);
}


#categories li a.catBg86 {
background-image: url(../buttons/english/catbg86.png);
height: 102px;
}