Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Can i change my page background colours


swiftmed

Recommended Posts

Hey Guys,

 

Im having a bit of trouble finding out how i can change the background colour of my store. one would assume you would do this in the stylesheet.css file, however on determining the correct colour code of my current background, and doign a search for it in the stylesheet.css file, it doesnt appear to be in there. this prompted me to check to see if i can find an image in the images folder which could be used to make up the correct colour if the current background, but again, i cant find one.

 

 

could anybody help me in finding where i should be looking please? the site is at http://hollywoodhood.co.uk/index.php - the its the darker shade of grey that the site is sitting in which i need to change the colour of.

 

Thanks for your help

Andy

Link to comment
Share on other sites

Hey,

 

yes i am talking about that area. as i mentioned above i have looked in the stylesheet.css file and was unable to find anywhere in there which controls the colour of the background. also col_left, col_center & col_right are not in my stylesheet css file.

 

here is a copy of my css page:

/*
 $Id: stylesheet.css,v 1.56 2003/06/30 20:04:02 hpdl Exp $

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2003 osCommerce

 Released under the GNU General Public License
*/

.boxText { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 10px; background: #ffb3b5; font-weight: bold; }
.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #cc0033; }
.productsNotifications { background: #e1e0e0; }
.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #B6B823; text-decoration: underline; }

BODY {
 background: #ffffff;
 color: #000000;
 margin: 0px;
}

.infoBox {
 background: #d2d2d2;}

.infoBoxContents {
 background: #ffffff;
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;}

/*  A {
 color: #000000;
 text-decoration: none;
}

A:hover {
 color: #AABBDD;
 text-decoration: underline;
}  */

FORM {
display: inline;
}

TR.header {
 background: #ffffff;
}

TR.headerNavigation {
 background: #bbc3d3;
}

TD.headerNavigation {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background: #bbc3d3;
 color: #ffffff;
 font-weight : bold;
}

/*  A.headerNavigation { 
 color: #FFFFFF; 
}

A.headerNavigation:hover {
 color: #ffffff;
}  */

TR.headerError {
 background: #ff0000;
}

TD.headerError {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 background: #ff0000;
 color: #ffffff;
 font-weight : bold;
 text-align : center;
}

TR.headerInfo {
 background: #00ff00;
}

TD.headerInfo {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 background: #00ff00;
 color: #ffffff;
 font-weight: bold;
 text-align: center;
}

/*  TR.footer {
 background: #bbc3d3;
}  

TD.footer {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background: #bbc3d3;
 color: #ffffff;
 font-weight: bold;
}*/
.infoBoxNotice {
 background: #FF8E90;
}

.infoBoxNoticeContents {
 background: #FFE6E6;
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

TD.infoBoxHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 font-weight: bold;
 background: #bbc3d3;
 color: #ffffff;
}

TD.infoBox, SPAN.infoBox {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
 background: #f8f8f9;
}

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
 background: #f8f8f9;
}

TABLE.productListing {
 border: 1px;
 border-style: solid;
 border-color: #b6b7cb;
 border-spacing: 1px;
}

.productListing-heading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background: #b6b7cb;
 color: #FFFFFF;
 font-weight: bold;
}

TD.productListing-data {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

TD.pageHeading, DIV.pageHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 20px;
 font-weight: bold;
 color: #9a9a9a;
}

TR.subBar {
 background: #f4f7fd;
}

TD.subBar {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 color: #000000;
}
/* -------------------------------------------------		  -------------------------------------------------------- */
/* -------------------------------------------------		  -------------------------------------------------------- */
TD.main, P.main {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 line-height: 1.5;
}

TD.smallText, SPAN.smallText, P.smallText {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

TD.accountCategory {
 font-family: Verdana, Arial, sans-serif;
 font-size: 13px;
 color: #aabbdd;
}


TD.tableHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 font-weight: bold;
}

CHECKBOX, INPUT, RADIO, SELECT {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
}

TEXTAREA {
 width: 100%;
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
}

SPAN.greetUser {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 color: #f0a480;
 font-weight: bold;
}

TABLE.formArea {
 background: #f1f9fe;
 border-color: #7b9ebd;
 border-style: solid;
 border-width: 1px;
}

TD.formAreaTitle {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 font-weight: bold;
}

SPAN.markProductOutOfStock {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 color: #c76170;
 font-weight: bold;
}

SPAN.errorText {
 font-family: Verdana, Arial, sans-serif;
 color: #ff0000;
}

.moduleRow { }
.moduleRowOver { background-color: #e1e0e0; cursor: pointer; cursor: hand; }
.moduleRowSelected { background-color: #e1e0e0; }

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }

/* message box */

.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }

#myse select {width:90%;}
/* input requirement */
.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }
/* -------------------------------------------------		  -------------------------------------------------------- */
del {
			color:#888888;font-size:12px; font-weight:bold}
s {
			color:#808080;font-size:11px;font-weight:normal;}
/* -------------------------------------------------		  -------------------------------------------------------- */
/* -------------------------------------------------		  -------------------------------------------------------- */
body {padding:0; margin:0; background:#363636}
body, td, input, textarea{
font-size:11px;
font-family:Tahoma;
color:#B0B0B0;
line-height:13px;
vertical-align:top;
padding:0px;
}
img	  {border:0px;}
table	 {width:100%;}

.vam { vertical-align:middle}

.header td 		 {color:#000000; vertical-align:middle}
.header span	 {color:#FFFFFF; font-size:10px;}
.header b   	 {color:#ffffff;}
.header a 		 {color:#FCFF65; text-decoration:none; font-weight:bold}
.header a:hover  {color:#FFFFFF;text-decoration:underline}
.header strong a 		 {color:#C9CBBD; text-decoration:underline; font-size:11px}
.header strong a:hover  {color:#C9CBBD;text-decoration:none}


#input1{
width:37px; height:18px; 
color:#3F4143; font-size:10px; font-family:tahoma; text-align:right
}

#input2{
width:37px; height:18px; 
color:#3F4143; font-size:10px; font-family:tahoma; text-align:right
}


.jamp{ width:109px; height:18px; color:#464646; font-size:10px; padding-left:4px; font-family:Tahoma;}
.jamp1{ width:139px; height:18px; color:#464646; font-size:10px; padding-left:2px; font-family:Tahoma;}
.jamp2{ width:119px; height:18px; color:#464646; font-size:11px; padding-left:2px; font-family:Tahoma;}
.jamp3{ width:159px; height:18px; color:#464646; font-size:11px; padding-left:2px; font-family:Tahoma;}


.box_header_txt	td{ height:48px; vertical-align:middle; background:url(images/bg.gif) no-repeat  center left; padding-left:53px; text-transform:uppercase;
			  font-weight:bold;  color:#FFFFFF; font-size:12px;}

.box_header_txt1 td{ height:40px; vertical-align:middle; background:url(images/1_z2.gif) no-repeat top left #F4F6DE; padding-left:28px; text-transform:uppercase;
			  font-weight:bold;  color:#313030; font-size:12px;}





.box_body  ul 	{padding:0; margin:0px; list-style:none; padding-left:18px; }
.box_body .bg_list 	{background:url(images/bg_list.gif) left top no-repeat; background-position:0 8px}
.box_body .bg_list  a	{color:#FFFFFF; text-decoration:underline; padding-left:15px; line-height:20px}
.box_body .bg_list  a:hover	{color:#FFFFFF;text-decoration:none;}

.box_body .bg_list_un 	{background:url(images/bg_list_un.gif) left top no-repeat; line-height:23px; background-position:0 10px; margin-left:15px}
.box_body .bg_list_un  a	{color:#A10E04;text-decoration:underline; padding-left:10px;}
.box_body .bg_list_un  a:hover	{color:#A10E04; text-decoration:none;}

.box_body .bg_list_sub 	{background:url(images/bg_list.gif) left top no-repeat; background-position:0 8px}
.box_body .bg_list_sub  a	{color:#FFFFFF; text-decoration:none; padding-left:15px; line-height:20px; margin-left:10px}
.box_body .bg_list_sub  a:hover	{color:#FFFFFF;text-decoration:underline;}


.cont_header_txt td { height:53px; vertical-align:middle; background:url(images/bg1.gif) no-repeat  center left; padding-left:23px; text-transform:uppercase;
			  font-weight:bold;  color:#FFFFFF; font-size:12px;}
.cont_header_txt a { 
			font-weight:bold; color:#FFFFFF; font-size:12px; text-decoration:none; vertical-align:middle;}				  
.cont_header_txt a:hover { 
			font-weight:bold; color:#FFFFFF; font-size:12px; text-decoration:underline;}	

.product td		 {color:#8B8B8B; font-size:11px;}
.product a			{color:#414141; font-size:11px; text-decoration:underline; font-weight:normal}
.product a:hover	{color:#414141;text-decoration:none;}
.product span	   {color:#3F4143; font-size:11px;}
.product span a			{color:#FFFFFF; font-size:11px; text-decoration:none; font-weight:bold}
.product span a:hover	{color:#FFFFFF;text-decoration:underline;}


.product div a			{color:#8B8B8B; font-size:11px; text-decoration:none; font-weight:normal; }
.product div a:hover	{color:#8B8B8B; font-weight:normal; text-decoration:underline;}


.pic img			{border: 0px solid #969075;}

.result td		   {color:#8E8E8E; height:41px; vertical-align:middle;padding:0px 16px 0px 14px;}
.result a			{color:#B6B824; text-decoration:underline;}
.result a:hover	  {color:#B6B824;text-decoration:none;}
.result b			{color:#8E8E8E; font-weight:normal;}

.result u {text-decoration:underline; color:#B6B824} 
.result_right	{ text-align:right;}
.result_right b	{color:#B6B824; font-weight:bold; }

.popup 	{color:#8B8B8B; font-size:9px; text-decoration:none;}



.footer				{ background:url(images/bot.gif) repeat-x top; }	
.footer td 		  {color:#A8A8A8; font-size:11px;}			
.footer a 		  {color:#A8A8A8; font-size:11px; text-decoration:none;} 			
.footer a:hover   {color:#A8A8A8;text-decoration:underline;}
.footer font img 		  {margin:0px 10px 0px 15px;}
.footer font a 		  {color:#FFFFFF; font-size:11px; text-decoration:none;} 			
.footer font a:hover   {color:#FFFFFF;text-decoration:underline;}	

.footer span 	  {color:#B6B824; font-size:10px;}
.footer span a 		  {color:#B6B824; font-size:10px; text-decoration:none; font-weight:bold} 			
.footer span a:hover   {color:#B6B824;text-decoration:underline;}

.footer1 td 		  {color:#A8A8A8; font-size:9px;}			
.footer1 a 		  {color:#A8A8A8; font-size:10px; text-decoration:none;} 			
.footer1 a:hover   {color:#A8A8A8;text-decoration:underline;}	



.shop_cart	{ height:41px; vertical-align:middle}   
.shop_cart strong{text-align:center; vertical-align:middle; color:#FFFFFF; font-size:11px; text-transform:uppercase}   
/* -------------------------------------------------		  -------------------------------------------------------- */
/* -------------------------------------------------		  -------------------------------------------------------- */
.box_body td				{color:#FFFFFF;font-size:11px; }

.box_body a					{color:#FFFFFF; font-size:11px; font-weight:normal; text-transform:none;text-decoration: underline; }
.box_body a:hover			{color:#FFFFFF;text-decoration: none;}
.box_body span a			{color:#FFFFFF; font-size:12px; text-decoration:none; font-weight:bold; text-transform:uppercase;}
.box_body span a:hover	{color:#FFFFFF;text-decoration:underline;}

SPAN.newItemInCart 						{font-family: Verdana, Arial, sans-serif;font-size: 10px;color: #ffffff;}
.box_body a SPAN.newItemInCart 			{font-family: Verdana, Arial, sans-serif;font-size: 10px;color: #ffffff; text-decoration:underline;}
/* -------------------------------------------------		  -------------------------------------------------------- */
/* -------------------------------------------------		  -------------------------------------------------------- */
.smallText a { color:#B6B823; font-size:11px; font-weight:normal; text-decoration:none;}	/*  advanced_search.php  */
.smallText a:hover { color:#B6B823; font-size:11px; font-weight:normal; text-decoration:underline;}
.smallText a u { color:#B6B823; font-size:11px; font-weight:normal; text-decoration:none;}
.smallText a:hover u{ color:#B6B823; font-size:11px; font-weight:normal; text-decoration:underline;}

TD.fieldKey {
 font-family: Verdana, Arial, sans-serif;font-size: 12px;font-weight: bold;}

TD.fieldValue {
 font-family: Verdana, Arial, sans-serif;font-size: 12px;}
.main a b {
 color:#5D5F60;font-size: 10px; font-weight:normal; text-decoration:underline;
}
.main a:hover b{
 color:#5D5F60;font-size: 10px; text-decoration:none;
}
/* -------------------------------------------------		  -------------------------------------------------------- */
span.txt_1	{font-size:10px; text-transform:none; color:#000000;}	

SPAN.productSpecialPrice, .product SPAN.productSpecialPrice  {
 color:#1C1C1C; font-size:15px; font-weight:bold;}
.box_body SPAN.productSpecialPrice{  color:#B6B824; font-size:15px; font-weight:bold;}

.cont_header_txt	em			{font-weight:bold; color:#FFFFFF; font-size:12px; text-decoration:none; font-style:normal;vertical-align:middle;text-decoration:none;}

.product em			{color:#414141; font-size:11px; text-decoration:underline; font-weight:bold; font-style:normal;} 

/* -------------------------------------------------		  -------------------------------------------------------- */
/* -------------------------------------------------		  -------------------------------------------------------- */
.main	a{ color:#B6B823; text-decoration:underline;}
.main	a:hover{ color:#B6B823; text-decoration:none;}
.main	b { font-weight:normal;}
.vam	{ vertical-align:middle;}
input	{background:#ffffff;}
.bg_input input	{background:none;}
/* -------------------------------------------------		  -------------------------------------------------------- */
/* -------------------------------------------------		  -------------------------------------------------------- */

.padd_1 { padding:0px 10px 0px 10px;}
.padd_22 { padding:8px;}
td.padd2 	{padding:8px; padding-left:4px;}


.line_h		{ line-height:16px;}

.bg_gg	{background:#D2D2D2;}
.bg_vv	{background:#FFF8D4;}
.bg_gg_1{background:#ffffff;}


.product div			{padding:8px 5px 5px 5px;}
div.padd3				{text-align:left; padding:0px; margin-left:0px; margin-right:0px;}

.prod_info		{width:100px;}
.prod_info td	{text-align:center;}

.remove		{ width:20%;}
.products	{ width:45%;}
.quantity	{ width:15%;}
.total		{ width:20%;}

/* -------------------------------------------------		  -------------------------------------------------------- */
.box_width_left			{ width:200px;}
.box_width_right		{ width:18px;}
.box_width_cont			{ width:100%;}			

/* -------------------------------------------------		  -------------------------------------------------------- */

Link to comment
Share on other sites

change this in your stylesheet.css

body {padding:0; margin:0; background:#363636}

 

Good luck

"I must admit that I personally measure success in terms of the contributions an individual makes to her or his fellow human beings."

---Margaret Mead---

 

"The answer is never the answer. What's really interesting is the mystery. If you seek the mystery instead of the answer, you'll always be seeking. I've never seen anybody really find the answer -- they think they have, so they stop thinking. But the job is to seek mystery, evoke mystery, plant a garden in which strange plants grow and mysteries bloom. The need for mystery is greater than the need for an answer.

--Ken Kesey"

Link to comment
Share on other sites

I know they're not there. I added them for testing purposes in my browser to see how the changes turn out.

 

So just add the classes and set the appropriate backgrund color values. e.g.

 

.col_left {background: #e0e0e0;}

 

Hey, that worked perfectly. thanks very much for your help. i really appreciate it :)

Link to comment
Share on other sites

no worries, just keep me in mind, be well~~

"I must admit that I personally measure success in terms of the contributions an individual makes to her or his fellow human beings."

---Margaret Mead---

 

"The answer is never the answer. What's really interesting is the mystery. If you seek the mystery instead of the answer, you'll always be seeking. I've never seen anybody really find the answer -- they think they have, so they stop thinking. But the job is to seek mystery, evoke mystery, plant a garden in which strange plants grow and mysteries bloom. The need for mystery is greater than the need for an answer.

--Ken Kesey"

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...