Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Stylesheet background color refuses to change VERSION 2.3


confusedcart

Recommended Posts

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

post-150396-0-32869900-1329669253_thumb.jpg

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@@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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

REMEMBER BACKUP, BACKUP AND BACKUP

Link to comment
Share on other sites

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 :(

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...