mikebt26 Posted October 11, 2012 Share Posted October 11, 2012 I am trying to change the background color behind the main webpage leaving the center page white. I'm trying to do this to have definition of the page end. Every time I try editing the color it goes through the whole page and background. If anyone can assist with the CSS to do this, below is the current CSS body { background-color: white; font-size: 11px; font-family: Verdana, Arial, Helvetica, Sans-Serif; color: #5d717e; text-align: center } Website - www.tackleaustralia.com.au Thanks, Mike Link to comment Share on other sites More sharing options...
clayton29657 Posted October 11, 2012 Share Posted October 11, 2012 here check this out and it's a video and might help you it's how I learned something new for sure. Very easy to do change in 1.4 only not in 1.5 if thats what you're using Video for 1.4 background Cheers Clayton 1 Link to comment Share on other sites More sharing options...
mikebt26 Posted October 11, 2012 Author Share Posted October 11, 2012 here check this out and it's a video and might help you it's how I learned something new for sure. Very easy to do change in 1.4 only not in 1.5 if thats what you're using Video for 1.4 background Cheers Clayton Hi Clayton, Thanks for the quick response and the youtube tutorial. I'm actually trying to just have the middle main page with white background still, but have the sides a different color. Cheers, Mike Link to comment Share on other sites More sharing options...
clayton29657 Posted October 11, 2012 Share Posted October 11, 2012 If you follow the video you could make one the way you want it's very easy to do and will show you how to upload and copy the files over. Cheers my friend and good luck Clayton Link to comment Share on other sites More sharing options...
diedm Posted November 18, 2012 Share Posted November 18, 2012 (edited) If I well understood your request, You have to change (or add if not present) the background-color attribute in #page in global.css. Alternatively you have to add the background-color attribute to .container_9 class, inside grid-prestashop.css. Css are located in "root"/themes/"yourtheme"/css (prestashop 1.5.2) Edited November 18, 2012 by diedm (see edit history) Link to comment Share on other sites More sharing options...
halennoor Posted November 18, 2012 Share Posted November 18, 2012 if i understood you correctly, you are trying to leave the center column color white while the rest of the page colored. just assuming that the rest of your page is colored blue by inserting in global.css line 208 at #page background:blue; then go to global.css line 257 at #center_column and add a line background: white; hope it helps. Link to comment Share on other sites More sharing options...
Radu Posted November 18, 2012 Share Posted November 18, 2012 if i understood you correctly, you are trying to leave the center column color white while the rest of the page colored. just assuming that the rest of your page is colored blue by inserting in global.css line 208 at #page background:blue; then go to global.css line 257 at #center_column and add a line background: white; hope it helps. I understood the same, just a small addition: - if you want the center, including the left/right columns in global.css you can change the #columns class to read: #columns { background-color: #fff; } * I checked it on presta 1.5 default theme Link to comment Share on other sites More sharing options...
TurtlePie Posted November 18, 2012 Share Posted November 18, 2012 (edited) How about if i want to change the color OR add pattern image outside the main page (leftcolumn, center, rightcolumn). so left side of leftcolumn and right side of right column. Look at the picture, i mark black dot, in left and right. Edited November 18, 2012 by TurtlePie (see edit history) Link to comment Share on other sites More sharing options...
Radu Posted November 18, 2012 Share Posted November 18, 2012 as I said above editing the #columns css element should do the trick but this depends of how you modified the default theme. If you can provide a link to your website I can gladly take a look Link to comment Share on other sites More sharing options...
narnarvish Posted December 20, 2012 Share Posted December 20, 2012 Okay guys, I am V new to Prestashop & so far I am liking what I see, but, have just downloaded 1.5.2, (I have previously dabbled with OSC, I am self taught HTML & CSS so please bare with me) & I can;t figure out how to have the centre of the page white, as you are already describing. My global css line 208 is blank, but seems to be in the middle of: /*buttons ************************************************************************************** */ Line 257 is in table? 250 /* table *************************************************************************************** */ 251 table.std, 252 table.table_block { 253 margin-bottom:20px; 254 width:100%; 255 border:1px solid #999; 256 border-bottom:none; 257 background:white; I have managed to half do what I want by: 38 /* ************************************************************************************************ 39 struture 40 ************************************************************************************************ */ 41 #page {} 42 #header {z-index:10} 43 #columns {z-index:1} 44 #left_column { 45 background:#fff; 46 } 47 #center_column { 48 background:#fff; 49 } 50 #right_column { 51 background:#fff; 52 } 53 #footer {} but this leaves gaps around the columns I would like the whole of the centre to be white & my background image to show on the sides Link to comment Share on other sites More sharing options...
Holspeed Posted December 20, 2012 Share Posted December 20, 2012 (edited) I would like the whole of the centre to be white & my background image to show on the sides Remove the extra code you put in and just add background to #page: 41 #page {background:#fff} Then add your image url to body background a few lines further down. Edited December 20, 2012 by Holspeed (see edit history) 2 Link to comment Share on other sites More sharing options...
narnarvish Posted December 21, 2012 Share Posted December 21, 2012 Doh! Sometimes you can't see for looking, thanks Holspeed Link to comment Share on other sites More sharing options...
bonnsaikitty Posted January 28, 2013 Share Posted January 28, 2013 this is very useful !! thanks a lot Holspeed !!! <3 Remove the extra code you put in and just add background to #page: 41 #page {background:#fff} Then add your image url to body background a few lines further down. Link to comment Share on other sites More sharing options...
leomazz Posted March 18, 2013 Share Posted March 18, 2013 Thank you very much Holspeed! That was exactly what i´ve looking for! Link to comment Share on other sites More sharing options...
lusidio Posted June 14, 2013 Share Posted June 14, 2013 Remove the extra code you put in and just add background to #page: 41 #page {background:#fff} Then add your image url to body background a few lines further down. Holspeed you are da man! Thank you! Maybe you know how to make it a little transparent through css? Link to comment Share on other sites More sharing options...
elpee Posted June 17, 2013 Share Posted June 17, 2013 Thank's for the tip ! Link to comment Share on other sites More sharing options...
generalexperts Posted January 18, 2014 Share Posted January 18, 2014 I tried this and it didn't work. Can someone give me a little more instructions to do this. Just for example, say I want the background to be an image and then the center to be white. What exactly do I need to change? And where do I put the image? I am working in the right global.css file, just don't know how to get it to work. Also I'm sure I will need help with margins of how wide to keep the white space in the center. Thanks! 1 Link to comment Share on other sites More sharing options...
hemjesti Posted March 13, 2014 Share Posted March 13, 2014 this might help a little bit. rename bkgrnd.gif to whatever your background img is and change your background color from #000000 to whatever you'd like if you're using a REALLY LARGE IMAGE you can set repeat-y to no-repeat - then the content will scroll but the bkgrnd will stay fixed. Good luck! hope this helps a little. body { background: url("/themes/default/img/bkgrnd.gif") repeat-y scroll center top #000000; color: #222222; font: 11px/14px Arial,Verdana,sans-serif; margin: 0 auto; } Link to comment Share on other sites More sharing options...
RickyKidd Posted August 7, 2014 Share Posted August 7, 2014 Thank you for this tip! Remove the extra code you put in and just add background to #page:41 #page {background:#fff}Then add your image url to body background a few lines further down. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now