Stylesheet background color refuses to change VERSION 2.3

confusedcart · February 19, 2012

I need to adjust my page so that the background is grey around the white part of the page.

I have no idea how to do this.

The header must stay white as pictured but I'd like the grey around the sides.

I've attached an image of what I'd like to accomplish..

And also 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;}

multimixer · February 19, 2012

and? what's the background color? (make sure you don't miss the closing } as posted here)

confusedcart · February 19, 2012

Hi George, I've attached an image of what I'm trying to accomplish as well as my stylesheet please check the post above again

NodsDorf · February 19, 2012

Here is what I did... ref my test site.. http://www.onlinegamekey.com/index/

Create a small image for with the color or gradiant you want..

Add this to the stylesheet:

#pageBg {
   width: 100%;
   height: 100%;
   position: fixed;
   left: 0px;
   top: 0px;
   z-index: -999;
 padding-top:60px; /* this is the height of your header!!!!! */
}

.stretch {
   width:100%;
   height:100%;
}

in catalog/includes/template_top.php

Under the opening <body> tag

add in a new div..with your image called.

<div id="pageBg">
<img src="images/bggradiant.png" class="stretch"  />
</div>

There you go..

If you want it to streach full screen remove the padding top and it will extend the whole page, if not the padding top is the same size as your header height so the image starts streching 60px down the page.. exactly where your header ends.

confusedcart · February 21, 2012

Thanks Don, but I need this background on only the left and right parts of the page. I need the center to remain white.

It's like i want the main content to be white background but the left and right under the header to be a background color. No matter what I try I can't seem to accomplish that.

♥14steve14 · February 21, 2012

See your other post.

confusedcart · February 21, 2012

@@don.. I tired that but I don't want the column left or right to have a background I need the area AROUND it to have the background. By that I mean to the LEFT of column left and to the RIGHT of column right.

@@Steve.. I tried adding the necessary coding and no luck.

Pleaseee guys explain to me from scratch how to get it done. I'm lost and I'm still a newbie at this coding.

confusedcart · February 21, 2012

I've attached another image. I need a background image or background color where the red is in the pic.

I just can't get it right when I do what you guys say the entire page gets a red background :(

multimixer · February 21, 2012

Maybe you should check here I have an illustrated example about backgrounds on my site, take a look if you want, it's basically as @@NodsDorf told you in your other post

PS not good to double post, it's getting confusing and nobody can follow anymore

♥14steve14 · February 21, 2012

Add the colour to your body area in your stylesheet.

You may have to changre the background colour in the body wrapper area and the body content area.

Its only a css stylesheet and no serious harm will come if you alter anything.

confusedcart · February 21, 2012

Thanks guys but no luck.

I tired the solutions maybe I'm getting it wrong.

Please reexplain the steps. Im being a dummy because I've tried now 2 hours and getting nowhere. :(

I need to make my white background red as in the pic attached.

And I tried adjusting this:

body {

background:#ffffff; >>>>> I changed the color to red #ff0600

color: #353535;

position:relative;

but even that won't do anything -- it just stays a plain white background :(

Stylesheet background color refuses to change VERSION 2.3

Recommended Posts

confusedcart

multimixer

confusedcart

NodsDorf

confusedcart

♥14steve14

confusedcart

confusedcart

multimixer

♥14steve14

confusedcart

Archived

Browse

Activity