How to use image for Products, Categories, Featured etc tabs background in 1.5.4

[GoneVintage]

Hi everyone,

 

I was wondering if there's an easy (not mess up everything) way of using a background image in tabs on default prestashop 1.5.4 theme.

[vekia]

hmmm what you exactly expect?

I just wondering what you mean by "tabs" ?

[GoneVintage]

I was expecting a question like this

The colored rectangular shaped pieces with letters in. Categories, Tags, etc...

[vekia]

you're talking about blocks:

 

 

or :

 

 

???

 

?

[GoneVintage]

How could you insert images in posts, I thought I had to upload it somewhere and insert it using the url?

Second answer

Nice question marks, though ...

[GoneVintage]

Got it ...

[vekia]

ok, you have to edit blockcategories/blockcategories.tpl file

 

add own class to the:

 

<h4 class="title_block">{l s='Categories' mod='blockcategories'}</h4>

 

for example:

<h4 class="title_block mynewclass">{l s='Categories' mod='blockcategories'}</h4>

 

 

then in global css create this:

 

.mynewclass {
background:red!importnat;
}

 

 

you can use the same method for other blocks. remember to create individual classes for each block.

[GoneVintage]

Thank you for the thorough answer!

Sounds really complicated, but I'll give it a try tomorrow.

Doing this we could assign different colors to different block headers ... but how about using the same image as a background? I mean 1x20 pixel gradient image(or some pattern) to "spice up" the design.

[vekia]

you can use background: param with repeat command, for example:

 

.mynewclass{
background:url('url_to_your_background_image) repeat;
}

[GoneVintage]

You sound like you're one of the Prestashop creators ...

 

Thanks again for the quick help. This forum is lucky to have you as a moderator.

 

p.s. Still waiting for your address ...

[closeupman]

Thank you for the thorough answer!

Sounds really complicated, but I'll give it a try tomorrow.

Doing this we could assign different colors to different block headers ... but how about using the same image as a background? I mean 1x20 pixel gradient image(or some pattern) to "spice up" the design.

 

yes, it's not that hard to stylize the block 'tabs' if you know css basics. I did it at this website: sitinuriatistudio.com

I learned through watching some videos at Youtube what files and classes/ids to use.(Also you can use the inspect element in Chrome to find out) Search for 'learn prestashop' or some combination of terms with prestashop in it

 

And Yes, Vekia has been extremely helpful. You should check out his chat module Zop. It's very useful.

Edited June 15, 2013 by closeupman (see edit history)