Theme: How to change background colour to image, and keep centre block white

[wartex11]

Hi guys,

 

Just playing around with Prestashop, for my online ecommerce store, I love it so far and am watching Nemo's great tutorials on his Youtube channel,

 

My site is here for now, www.shinsentea.com and will soon be www.shinsentea.com.au,

 

I have basic HTML understanding, and can figure out some things, but I need some guidance please!

 

I would like to change the left and right columns to an image, (or colour if necessary), and keep the centre block white, my theme is the biocosmetic theme from the prestashop addons store

 

I have had a search and tried to follow the following articles without much luck, I think because the global.css file in my theme is a little different from the default prestashop theme global.css;

http://www.prestashop.com/forums/topic/193735-how-to-change-background-color-and-leave-center-page-white/

http://www.prestashop.com/forums/topic/164498-how-to-change-the-background-color-keeping-the-central-block-white/

 

Okay, I have attached some images to show what I am trying to achieve, and also the global.css file,

 

I'm not sure if you can see image title names but;

Untitled2.png - what the theme normally looks like

untitled.png - what i'd like it to look like!

theme_modified_css.png - what I got it to look like

 

 

If you would like me to upload any extra files please let me know!

 

Cheers in advance,

 

 

global - backup.css

[vekia]

can you link to the background image please? have you got it somewhere online?

[wartex11]

Hi vekia,

 

Thanks for the reply, the image is located here;

 

http://shinsentea.com/temp/head-black.jpg

 

Cheers,

[vekia]

at the end of global.css file paste this:

#wrapp {background:url('http://shinsentea.com/temp/head-black.jpg')!important;}
#header, #columns {background: #FFF!important; padding:5px;}

effect:

[wartex11]

Hi Vekia,

 

I have seen you help many people on this forum and now I can personally say thanks =]

 

I used your #columns {background: #FFF!important; padding:5px;} line and changed padding to 30px, much much appreciated!

 

also modified some images to suit for the header and columns, check it out! www.shinsentea.com,

 

Any design comments, please give me some feedback!

 

Cheers,

Edited February 16, 2014 by wartex11 (see edit history)

[vekia]

i checked your store but.... no wood background there  

[wartex11]

I ended up going with a light grainy grey background, I think it's less distracting but still gives attention to the centre column,

 

I couldn't see my changes until I force refreshed the page ?

 

Thanks again for your help!