Modifying the side bar menu to include graphics?

[SimonZA]

HI there guys!

Im new to PrestaShop and am trying to understand the limits of its front end customizing capabilities.

And Im wandering if it possible, and how easy it is, to change the standard side bar menu to include graphics to replace the standard headers?

View the image below to see what Im talking about...

If its possible, could someone point me in the right direction as to where I could find out how to do this? Or help me with the right files to modify and code to use?

Thanks a lot!
Simon

[SimonZA]

Anybody?

Is it even possible?

[jhnstcks]

Yes this is possible, it could get a bit complicated to do every single header, as you would have to create each image and modify the css to create new code for every block with the image code for the header.

[SimonZA]

Im actually having images created for me, so that wont really be a problem. And I dont think I will be needing more than 4 headers at the most.

What css file would i need to find to do such a modification?

[rocky]

You will need to edit global.css and add code like the following:

div#categories_block_left h4 { background: transparent url('../img/categories_header.gif') no-repeat top left }
div#informations_block_left h4 { background: transparent url('../img/info_header.gif') no-repeat top left }
div#newsletter_block_left h4 { background: transparent url('../img/newsletter_header.gif') no-repeat top left }

Then put categories_header.gif, info_header.gif and newsletter_header.gif in the img directory inside your theme. You could change those to JPGs or whatever other image format you are using.

[SimonZA]

Thanks for the reply Rocky.

I have created and uploaded temporary header graphics (.JPG), and now Im about to edit the global.css file. Where exactly in the file should I add(or replace?) the above the code?
Would anywhere do? Or should it be somewhere specific?

And then would the above code remove the current text headers that are there already?

[rocky]

You can put the code anywhere in global.css, though if you want to keep the file neat, put the first line in the /*
Block categories */ section, the second in the /*
Block CMS links */ section and the third in the /*
Block newsletter */ section.

This code will override the default header graphic for those three blocks only.