Please help with background color - Image attached

confusedcart · February 21, 2012

I have a page that is laid out as in the attached picture file.

Currently my entire page has a white background.

What I want to do is keep the main page white including the header and then on each side have a background color.

Please see the image file.

And please see my stylesheet.

I cannot seem to accomplish this,if I apply background then even the middle section turns to that color from white. I just want background color/image to show on each side so that the center page can stay white.

My stylesheet is below:

/*
 $Id$
 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com
 Copyright (c) 2010 osCommerce
 Released under the GNU General Public License
*/
body {
background:#ffffff;
 color: #353535;
 position:relative;
/*
 font-size: 62.5%; - 10px;
 font-size: 68.8%; - 11px;
 font-size: 75%; - 12px;
 font-size: 81.2%; - 13px;
 font-size: 87.2%; - 14px;
*/  
 font-size: 75%;
 line-height:1.5em;font-family:Arial, Helvetica, sans-serif;
 margin: 0px; color:#979797;
}
a    {color:#afaeae; text-decoration: none;}
a:hover  {color:#3b3b3b; text-decoration:none;}
.bg_body    { overflow:hidden;}
.bg_body	 {height:100%;height:100%;height:auto !important;min-height:100%;background:url('../images/bg_body.gif') 0 0px repeat-x #fff;}
.bg_body2	 {height:100%;height:100%;height:auto !important;min-height:100%;}
.wrapper-padd   {margin:0px auto 0px auto; width:960px;overflow:hidden;}
.row_1	 {font-size:1.1em;padding: 0px 10px 0px 10px;}
.row_2	 {margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;}
.row_3	 {font-size:1em;padding: 0px 0px 0px 0px;}
.row_4	 {font-size:1em;padding:15px 0px 14px 0px;}
.row_5	 {font-size:1em;padding: 0px 0px 10px 0px;background:url('../images/tail_footer.gif') 0 0px repeat-x #fefefe;}
.row_line    {font-size:0; line-height:0; height:1px;margin-top:17px;padding: 0px 0px 0px 0px; border-top:1px solid #e1e1e1;}
#bodyWrapper   { position:relative;overflow:hidden;}
#bodyContent    {padding:0px 0px 0px 0px;}
#columnLeft    {padding:0px 0px 0px 0px;}
#columnRight    {padding:0px 0px 0px 0px;}
#extraRow1    {margin-bottom:20px;}
#extraRow2    { margin-top:20px;}
.extra_marg {margin-bottom:20px; overflow:hidden;}
.contentContainer		    {padding:0px 0px 0px 0px; margin-top:0px; margin-bottom:0px;}
.contentContainer.page_un	   {margin-top:14px; margin-bottom:14px;}
.contentContainer.page_cart	   {padding: 0px 0px 0px 0px;}
.contentContainer.page_reviews	   {}
.contentContainer.page_new_product	 {margin-top:10px; margin-bottom:10px;}
.contentPadd		   {padding:22px 0px 14px 0px; overflow:hidden;}
.contentPadd.sub		  {padding:6px 0px 6px 0px; overflow:hidden;}
.contentPadd.un		  {padding:23px 0px 14px 0px; overflow:hidden;}
.contentPadd.txtPage	    {padding:18px 18px 18px 18px;border:0px solid #e9e8e8;}
.contentContainer.page_un .contentPadd    {padding:0px 0px 0px 0px; border:0px;}
.contentContainer.page_un .contentPadd.un   {padding:14px 10px 14px 10px;}
.contentContainer.page_reviews .contentPadd   {padding: 8px 0px 8px 0px;}
.contentContainer.page_new_product .contentPadd  {padding: 0px 0px 0px 0px;}
.contentPadd.un .padding	   {padding:0px 0px 0px 0px;}
.contentInfoText	  {margin: 0px 0px 14px 0px; overflow:hidden;padding: 10px 10px 10px 10px; border:1px solid #e1e1e1; background:#fff;}
.contentInfoText.extra	 {padding:18px 18px 4px 18px;}
.contentInfoText .infoBoxHeading  {padding:10px 0px 10px 0px;margin: 0px 0px 0px 0px;background:none; border:0px; font-weight:bold;}
.contentContainer span.contentText  {border:0px solid #000;padding:0px 20px 0px 20px; overflow:hidden;}
.contentInfoText.marg-top    {margin: 0px 0px 0px 0px;}

.contentInfoBlock	  {padding:14px 2px 12px 10px; margin: 0px 0px 14px 0px; overflow:hidden; border:1px solid #ebebeb; background:#fff;}
.contentContainer.page_un .contentText {padding: 18px 27px 0px 27px;}
/* ************************************************************************************* */
/*header contro;s the start of the page*/
#header	 {position:relative;height:220px; width:940px; margin-bottom:17px;}
.logo	  {display:inline-block;width:229px; height:74px; margin:0px 0px 0px 0px; position:absolute; top:30px; left:0px;}
.logo2	  {display:inline-block;width:229px; height:74px; margin:0px 0px 0px 0px; position:absolute; top:38px; left:540px;}
.logo img    {margin:0px 0px 0px 0px;}
/* ************************************************************************************* */
.header_block  {padding:0px 0px 0px 0px;margin: 13px 0px 0px 0px; width:457px; position:relative; background:#C30; overflow:hidden;}
.currencies,
.languages   {overflow:hidden;margin:5px 0px 0px 15px;display:inline-block;}
.currencies label,
.languages label {color:#afaeae;font-weight:normal; margin-right:7px; margin-top:0px;}
.currencies select,
.languages select {color:#c0c0c0;width:73px; border:1px solid #f0f0f0;padding:1px;background:#fff; font-size:.85em;}
.currencies   { width:171px;}
.currencies label {}
.currencies select {}
.languages   {margin: 0px 0px 0px 0px;}
.languages label {}
.languages select {}
.languages img    {margin: 4px 0px 0px 0px;}
.languages .languages_img {margin: 0px 6px 0px 0px;}
/* ************************************************************************************* */
.select    {border:1px solid #ececec;background:#fff;padding:1px; color:#c0c0c0; font-size:1em; line-height:18px;padding:1px; color:#afaeae;}
/* ************************************************************************************* */
.cart_header	  {padding:5px 0px 3px 0px; margin-top:7px;width:174px; overflow:hidden;line-height:1.2em; text-align:right; font-size:12px;background:url('../images/bg_cart.gif') 0 2px no-repeat transparent;}
.cart_header div	 {padding:0px 1px 10px 0px;white-space:nowrap;font-size:12px;}
.cart_header div	 {color:#464545;font-weight:normal; float:right;font-size:12px;}
.cart_header span	 { font-weight:bold; color:#6d6c6c;font-size:12px;}
.cart_header strong	 {}
.cart_header a	    {color:#6d6c6c;font-weight:bold;  text-decoration:none;font-size:12px;}
.cart_header a:hover	   {color:#6d6c6c; text-decoration:underline;}
/* ************************************************************************************* */
/* ************************************************************************************* */
.search	  {padding:0px 0px 0px 0px;margin:0px 0px 0 0px; float:right; width:220px; text-align:right;background:url('../images/bg_search.gif') 0 0px no-repeat transparent; height:26px;}
.search .go	 {color:#d2d2d0;
    width:100%;padding:7px 5px 3px 10px;left:0px;margin:0 0 0 0px;border:none;background:none;position:absolute;top:0; font-size:.9em; line-height:1.2em; float:left;width:183px;}

.input-width    {height:26px;width:220px;}
.width-setter    {height:26px;margin:0 0px 0 0;position:relative; float:left;width:143px;}

.search .button_header_search { margin-left:0px; float:right;}
.search .box_wrapper   {}	   
/* ************************************************************************************* */
/* ************************************************************************************* */
.banner	  {float:right;}
.banner_header    {display:inline-block;margin: 39px 8px 157px 0px; float:right;}
/* ************************************************************************************* */
/* ************************************************************************************* */
.breadcrumb	 {padding:0px 1px 5px 0px;margin:0px 0px 0px -5px; position:relative; z-index:10px}
.breadcrumb	 {color: #686868;}
.breadcrumb a	 {color: #686868; font-size:1.1em; font-weight:normal;
		 display:inline-block;}
.breadcrumb a:hover   {color: #000; text-decoration:none;}
/* ************************************************************************************* */
/* ************************************************************************************* */
.user_menu	  {padding:0px 0px 0px 0px;margin:0px 0px 0px 0px; list-style:none;}
.user_menu li    {float:right; display:inline-block;cursor:pointer; white-space:nowrap;background:transparent;}
.user_menu li a    {color:#afaeae;font-weight:normal; text-decoration:none; font-size:12px;
	 cursor:pointer; white-space:nowrap;display:block;padding:2px 9px 2px 9px;}
.user_menu li a:hover,	
.user_menu li.act a   {color:#6d6c6c; text-decoration:none;}	
/* ************************************************************************************* */
/* ************************************************************************************* */
/* ************************************************************************************* */
.footer_menu	   {margin-top:0px; border-top:0px solid #e7e7e7; padding-top:0px;}
.footer		 {padding:33px 0px 20px 0px;}
.footer		 {overflow:hidden; position:relative; width:940px; margin-left:10px;}
.footer p	    {margin:0px 0px 0px 0px; padding-left:0px; text-align:left; clear:both;}
.footer p	    {color:#afaeae;line-height:2.2em; margin-left:-10px;}
.footer p a	    {color:#afaeae; font-size:1.2em;}
.footer p a:hover { color:#000;}
.footer p b a,
.footer p b	    {color:#afaeae;font-weight:normal;}
.footer p b a	   {color:#afaeae;text-decoration:none; font-size:1em;}
.footer p b a:hover	  {color:#000;}
/* ************************************************************************************* */
/* ************************************************************************************* */
/* ************************************************************************************* */
/* ************************************************************************************* */
/* ************************************************************************************* */
/*THE BOXES MENU CONTROLS THE BOX REVIEWS ETC BLH BLH ALSO*/
.boxes_menu	  {overflow:hidden; position:absolute; left:1px; top:120px;}
.menu	   {}
.menu ul	    {padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px; list-style:none; overflow:hidden;}
.menu li	    {float:left;}
.menu li a		 {color:#a0a0a0;display:inline-block;padding: 10px 19px 12px 19px; font-size:11px; font-family:"Arial", Times, serif; text-transform:uppercase; line-height:18px;}
.menu li a	    {text-decoration:none;}
.menu li.act a,
.menu li:hover a	  {text-decoration:none; color:#111111;}
.menu li.first a	 { padding-left:0; }
/* ************************************************************************************* */
/* ************************************************************************************* */
/* ************************************************************************************* */
/* ************************************************************************************* */
/* ************************************************************************************* */
.slogan span{ color:#111111; font-size:27px; display:block;font-family: 'Playfair Display', arial, serif; line-height:30px;}
.slogan { border-top:1px solid #eaeaea; border-bottom:1px solid #eaeaea; padding:23px 0 25px 0; margin-top:30px; padding-left:1px;}
.slogan p{ padding-top:13px; display:inline-block; font-size:12px; line-height:18px; color:#afaeae; padding-right:10px;}
/* ************************************************************************************* */
/* ************************************************************************************* */
/* ************************************************************************************* */
.box_header_user_menu,	  
.box_header_cart,	  
.box_header_currencies,	  
.box_header_languages,
.box_header_search,
.box_footer_currencies,
.box_footer_languages{position:absolute; overflow:hidden;}
/*THE BOX HEADER USER MENU CONTROLS HEIGHT OF LOG IN SPECIALS REVIEWS ETC.*/
.box_header_user_menu	   {top:128px; right:-6px;}
.box_footer_currencies	   {top:27px; right:0px;}
.box_footer_languages	   {top:31px; right:0px;}
.box_header_cart	    {top:24px; right:20px;}
/*SEARCH BOX*/
.box_header_search	    {top:55px; right:0px; z-index:5;}
/*CART BOX*/
.box_header_cart	    {top:65px; right:315px; z-index:5;}
.instock{
font-size: 9px;
font-weight: bold;
color: #009900;
}

.outstock{
font-size: 9px;
color: #989898;
font-weight: bold;
text-decoration: none;
background: none;
} 

/*PRODUCT TAB SYSTEM TMS */
.pronuxTabGeneralStyle {
font-family: Verdana, Arial, Tahoma, sans-serif;
font-size: 12px;
color: #333333;
}

.pronuxTabNormal {
float: left;
border-top-style: solid;
border-bottom-style: solid;
border-top-width: 0px;
border-bottom-width: 0px;
border-top-color: #C1C2C6;
border-bottom-color: #C1C2C6;
}
.pronuxTabEmpty {
float: left;
border-top-style: hidden;
border-bottom-style: solid;
border-top-width: 1px;
border-bottom-width: 1px;
border-bottom-color: #C1C2C6;
}
.pronuxOuterContentBox {
margin: 0px;
padding: 0px;
display: none;
}
.pronuxContentBox {
padding: 20px;
border-style: solid;
border-width: 0px 0px 0px 0px;
border-color: #C1C2C6;
height: auto !important;
text-align: left;
vertical-align: text-top;
}
.pronuxLink {
display: block;
text-decoration: none;
text-align: center;
vertical-align: middle;
font-family: Arial, Tahoma, sans-serif;
font-size: 12px;
font-weight: normal;
color: #FFF;
outline: none;
-moz-outline: none ";
}
a.pronuxLink:link {
text-decoration: none;
border: none;
}
a.pronuxLink:visited {
text-decoration: none;
border: none;
}
a.pronuxLink:hover {
text-decoration: none;
border: none;
}
a.pronuxLink:active {
text-decoration: none;
border: none;
}

NodsDorf · February 21, 2012

I explained it in the other post,

The only thing to add would be .....


#bodyWrapper {
background-color:#fff;/*or whatever color you're trying to switch it to*/
}
#columnLeft {
 padding-top: 5px;		
 background-color: #fff; /*or whatever color you're trying to switch it to*/
}
#columnRight {
 padding-top: 5px;
  background-color: #fff; /*or whatever color you're trying to switch it to*/
}

Look at my test site again..http://www.onlinegamekey.com/index/

♥14steve14 · February 21, 2012

There are some other posts on this somewhere. What you need to do is to clear a div in the includes/template_bottom.php file by adding

before

<?php require(DIR_WS_INCLUDES . 'footer.php'); ?>

and add the same before

</div>

Then add in your stylesheet.css file

.clear {

clear: both;

}

I think that was all i did.

Please help with background color - Image attached

Recommended Posts

confusedcart

NodsDorf

♥14steve14

Archived

Browse

Activity