Replacing HEADING_TITLE with Images

[Radish]

Hi,

Sorry about these continuing posts. I've been able to set header images for pages created with the 'About Us' contrib quite easily with Kim's heads up. I've also managed to insert the 'Contact Us' page in the contact_us define file (though they're not perfectly aligned to About Us and Locations pages)

However, I'm running into a block when trying to create header images for individual categories.

It's probably easier to see what I'm talking about here:

http://www.radish.ca/index.php?main_page=index&cPath=5

I would like to replace the text 'Collections' with an image. Further to that, I'd like to replace sub-categories like 'Fall Collection - 2006' with an image as well. Since these titles are all coming from a database, is this easily doable? Or would I have to go into the DB and insert the image path?

Thanks again!

Colin

[Kim]

Since these titles are all coming from a database, is this easily doable? Or would I have to go into the DB and insert the image path?

Sorry- not so easy. The categories menu is dynamically generated.

[Radish]

Hi Kim,

I actually found a solution to what I was looking for and lo and behold it was already built into ZenCart! It only took some Heineken and half a box of rosebuds to figure this out.

ZenCart never ceases to amaze!!!

For anyone else wanting to replace category text headings with images take a look at the read_me file in your_template/css.

To save you some reading, basically you create seperate stylesheets for each category id. For example the stylesheet for:

http://www.yoursite.com/index.php?ma...ndex&cPath=5_2

would be c_5_2.css. The '5' is the main category and the '2' is the sub-category. If you get confused, just look at the url.

You only need to include the div or class you're looking to alter.

To replace the category heading text with an image your stylesheet would like this:

#indexCategoriesHeading {
text-indent: -220px;
overflow: hidden;
background: url(/images/text_replacer.gif) no-repeat;
height: 34px;
width: 345px;
}

If you a have a couple layers of sub-categories you'll need to change this id - #productListHeading - to achieve the same results.

Hope this helps!

[tbrides]

hi radish,
i really like your design. it is cool. im trying to achieve something similar but im only new to zen cart.

can you give me some tips on how u achieved your design.

you can see that start of my work here

http://www.hartonpaw.com/store
kindest regards