[Solved] Use images for block headers?

[mama2many]

Hi I am new to Prestashop and am finding my way around customizing the template.

I'd like to use images as the headers of the blocks (i.e. Categories, Information, etc), and would like to use a different custom image for each block.

Could someone please point me to the direction in which I could find these files?

Thank you.

Attached images - want to change the gray headers to the colorful ones.

[Labs]

Inside the 'themes' folder there is a folder called 'Prestashop'. Inside this is an 'img' folder. That folder has all your heading images. You want to make a copy of that and edit the copy. Rename it to suite yourself.

Then you select that as your new theme.

If I've missed a major step I'm sure someone with more knowledge will jump in.

[mama2many]

Thanks, doesn't seem there are images for each though.


I did manage to figure it out on some. For Categories for example, I added this code to the block in global.css

/* Block categories */
#categories_block_left h4 { background-image: url('http://zingslings.com/shop/includes/templates/ZScustom/images/boxhead-categories.gif'); height:40px; color:transparent; }

Obvoiusly I'll not use the full URL from my other site and will upload the image to the correct folder, just used that URL to test it.

I've also gotten it to work the same way for the Newsletter box.

However, I can not for the life of me find where to change it for the Information box. I've searched the global.css for the /* Block Informations */ or anything similar and it's nowhere to be found.

Also I ran into a glitch with IE. My current (very beginning testing stages) prestashop is at www.zingslings.com/prestashop
You can see that where I have my custom "Shop" header for the categories block, you don't see any text that says Categories. However in IE you can see it over my image. I added the color:transparent to my code listed above which is how I hid that text in Firefox, but how can I get it to hide it in IE as well? <-----This issue resolved.

Thanks for any help anyone can give. I search the forums extensively before asking, and these are 2 things I just can't seem to figure out.

[mama2many]

Ok I got the text thing straightened out by adding text-indent: -5000px; before my image code, the unwanted text is now gone from IE

I could however still use some help in finding where to edit the css for the Information block.

[Labs]

The Information block uses an image called "block_header.gif" It's inside the 'img' folder in the prestashop theme or in your case the customtest/img/ folder.

If you replace that image with your own design it should solve your problem.

You'll find it will change New products and the wishlist backgrounds also.

To change the featured products image look for customtest/img/block_header_large.gif and replace that.

[mama2many]

Thank you.

Since I'm replacing text with a background image and wanting a different image for each block header, I couldn't do it that way.

I did however get it fixed by adding this to the global.css

/* Block Information */
#informations_block_left h4 { text-indent: -5000px; background-image: url('../img/boxhead_information.gif'); height:40px;}

I did the same thing for the Links Block.

[Labs]

Looks good.

Don't forget your specials block.

At the moment your background is pointing to customtest/img/block_header_exclusive.gif

[mama2many]

Looks good.

Don't forget your specials block.

At the moment your background is pointing to customtest/img/block_header_exclusive.gif

Thanks Labs, waiting to see what other blocks I'll be adding before changing any on the right side so I can just get them all at once. Might do something different on that side, not sure yet.

[Newest]

Jessica,

Your shop looks very good. I love it. Keep up the good work.

[mama2many]

Jessica,

Your shop looks very good. I love it. Keep up the good work.

Thank you. There's more I'd like to do but with a new baby arriving pretty much any day - I'm taking a bit of a break