Using category image on the nav menu?

[gjh42]

If you want to use the category image set in admin with the categories sidebox, you can add its display just by invoking $box_categories_array[$i]['image']. This contains the filepath of the current category's image, and you can insert it where you like in /includes/templates/your_template/sideboxes/tpl_categories.php.

If you want to substitute an image of your choice for the category name, you can use Categories Dressing from Free Addons. It is also built to allow hover effects on the image.

[elo15e]

Aha! Thank you very much for replying.

I found the $box_categories_array call in the categories php. I'm a little curious to see if I can find where that array is defined - perhaps I could add an Image2 into the database and use that as a hover over image.

However - I shall take a look at the Categories Dressing from Free Addons, because that may save me a lot of bother.

I'm always up for a bit of database trashing thou!

Thanks again!

Claire

[gjh42]

If you want the hover, Cat Dressing will save you a bunch of work. Just use the "background image" instructions in the readme.

[elo15e]

OK - I've installed that - it's a lot of fun - thanks for the recommendation!

I'm still struggling to get the hover over working, so that I get independent ones for different categories. I'll keep at it thou :)

Thanks!

Claire

[gjh42]

Study the "To display images in place of selected category names:" section of the readme, especially the parts that refer to catBG or catbg.

[elo15e]

Thank you gjh42 - you're a big help!

I'm wondering if you know what the

categories li A.catBg1:hover

css will actually affect - I would love it to change my categories headers on hovering :) I'm getting the feeling it may not.

Claire

[gjh42]

If you have images named catbg#.gif and catbg#hover.gif (where # is the cPath of the category), the code will be ready to use the images replacing that category's name. If you also add to your stylesheet


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

you will get the hover effect.
You need a set of these for each category where you want to have an image hover effect.