Categories Dressing

[beggarsbones]

I just installed this yesterday and have been doing ok with using images instead of text for the categories, but have run into an issue with hover-images. in this case i took out the img for my gift certificate category and made it a bg image with a bg hover, and the hover works but the regular bg dissapears. the hover also changes the size of the cat box, see here:

www.beggarsbones.com/store

i've been following the readme as best i understand, any idea where i went wrong? thanks!
R

[MotoDelta]

You must still be working on it, because I don't see GC as an image at all.

...and GARLIC dog breath? eew! :) Post back when it's up and we can look.

[beggarsbones]

its up there, i was fussing with it. mouse under 'clothes' and the hover image for gc will come up, but the regular image won't.

hey, my dogs have eaten much, MUCH worse than garlic. we can go there later.... :)

[MotoDelta]

SO you've checked that

1) the image exists in the proper place?
2) That there isn't a type in this section of the css (including the name?)

Post that section of the cSS here.

[beggarsbones]

this is what i have in my stylesheet... if theres a different css you wanted lemme know.

#categories a { 
    background-repeat: no-repeat;
    display: block;
    }

a.catBg14 {
    background-image: url(../images/catbg14.gif);
    height: 30px;
    }
    
a.catBg14:hover {
    background-image: url(../images/catbg14hover.gif);
    height: 30px
    } 

for sure the image names are correct and theyre in the right folder, as the non hover image work.

i've read over the readme (not saying i didnt miss anything) - is there anything else i need to do other than add that passage to my stylesheet and put the gifs i n the right folder to get hovers to work?

[MotoDelta]

One of them has a semi-colon after 30px, the other doesn't.

[MotoDelta]

That's the only thing I can see. The other thing I noticed was that if you used the next category as a seperator, sometimes the category above it started acting weird.

Do me a favor and try two things:

1. Fix that semi-colon.
2. If that doesn't work, change the sort-order and move the Gift-Certificates category to the top and see if it works then...

Best of luck!

Chris

[gjh42]

The semicolon in that particular location is a good idea for consistency, but is not required. Actually, the hover declaration doesn't need a height at all, unless it is different from the non-hover image height.

The Gift Certificates images are both 38px high; since you have specified 30px height in your stylesheet, they are naturally getting cut off. Background images do not take up any space by themselves - the space will be whatever you specify it to be.
And both of the GC images are where they are supposed to be in your template images folder. I don't know why you wouldn't be seeing the non-hover one.

[jvanree]

Hi Glenn

I saw this mod in action on a few sites and I now am trying to make it work for my site. It is a great mod but I'm a real noob with this kind of things, so if you can please help me out?

I just want to know how I can make an image based menu. So that every category doesn't show text in the menu, just the images I've made for the menu.

Too keep it simple; say my categories would be
-apples
-pears

I want to show an image of an apple for the category apples and the image of a pear for the category pears.

The kind of info I need is:

The size of the image
Where the image goes
What the image should be named like
If I need to edit a php/css file and where that file is located and what to edit.

I'm constructing this offline so I can't provide a link.

Thanks in advance for your help!

Juliet

[Relentless]

Attn:: gjh42
I am using categories dressing, works great no issues.
2 Questions, I have 7 non linked Headings column left,
I would like to change to linked Headings.
these will be text links.
This is the first Heading in column left.

<?php
// categories dressing - add (divider and) heading above a cat
$disp_block_head = '';
//$disp_block_head = '<br />';
// for heading not block uncomment this line
switch ($current_path) {
case '28': //replace number with your desired cPath
//$content .= '<hr class="catBoxDivider" />' . "\n";
// to add divider uncomment this line
$content .= '<span class="catBoxHeading1">'
. (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead'
. $current_path . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES
. 'cathead' . $current_path . '.gif')
//I would like these Headings,to be links.
. '</span>':'
&gt;Air Conditioning<br />
Split System<br />
Ducted<br /></span>'
. $disp_block_head) . "\n";
break;
)
?>
---
This is the style sheet css call that is for the Cat. Headings
.catBoxHeading1{
font-family: arial,verdana,helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
color: #00DD00;
margin-top: 2px;
margin-bottom: 2px;
padding-top:2px;
padding-bottom:2px;
margin-left:-6px;
}
-Question 1
Does thie convert it to a link css
.catBoxHeading1:link {
font-family: arial,verdana,helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
color: #00DD00;
margin-top: 2px;
margin-bottom: 2px;
padding-top:2px;
padding-bottom:2px;
margin-left:-6px;
}
.catBoxHeading1:visited {add style);
.catBoxHeading1:hover {add style);
.catBoxHeading1:active {add style);
---Question 2
This question is is how to connect the URL,
to the Heading links. I would use the
first Category to Product link url below each heading,
as seen in Catalog/[Categories/Products]
Thank you.