Change Background colours?

chadds · February 22, 2007

Hi i recently bought an OScommerce Template and now have decided that i want to chage the colouring of the site.

I have played around with the CCS however im not entirely sure what im doing!

my site is www.chadds26.myzen.co.uk

i have pasted my cs sheet below in the hope that someone can tell me where im going wrong!

Thanks in anticipation of you help :)

/*

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

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

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: #f2fff7; }

.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #006699; text-decoration: underline; }

FORM {

display: inline;

}

.infoBox {

background: #d1d1d1;

}

.infoBoxContents {

background: #EFEFEF;

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

}

/*

*/

TR.headerNavigation {

background: #black;

}

TD.headerNavigation {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

background: #black;

color: #black;

font-weight : bold;

}

A.headerNavigation {

color: #FFFFFF;

}

A.headerNavigation:hover {

color: #ffffff;

}

TR.headerError {

background: #black;

}

TD.headerError {

font-family: Tahoma, Verdana, Arial, sans-serif;

font-size: 12px;

background: #black;

color: #black;

font-weight : bold;

text-align : center;

}

TR.headerInfo {

background: #black;

}

TD.headerInfo {

font-family: Tahoma, Verdana, Arial, sans-serif;

font-size: 12px;

background: #black;

color: #ffffff;

font-weight: bold;

text-align: center;

}

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

}

A.pageResults {

color: #353535;

}

A.pageResults:hover {

color: #353535;

}

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: 11px;

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.fieldKey {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

font-weight: bold;

}

TD.fieldValue {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

}

TD.tableHeading {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

font-weight: bold;

}

SPAN.newItemInCart {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

color: #ff0000;

}

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.productSpecialPrice {

font-family: Verdana, Arial, sans-serif;

font-size:13px; color:#CC3300; font-weight:bold;

}

SPAN.errorText {

font-family: Verdana, Arial, sans-serif;

color: #ff0000;

}

.moduleRow { }

.moduleRowOver { background-color: #EFEFEF; cursor: pointer; cursor: hand; }

.moduleRowSelected { background-color: #EFEFEF; }

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

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

/* input requirement */

#manu * {background:none;padding-top:0;padding-bottom:0;}

#manu select {background-color:#fff;padding-top:0;padding-bottom:0;}

.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }

.smallText_1 a {

color:#000;

text-decoration:underline;

}

.smallText_1 a:hover {

color:#000;

text-decoration:none;

}

#myse select {

width:90%;

}

.delp {

color:#808080;

font-size:11px;

font-weight:normal;

}

s {

color:#808080;

font-size:11px;

font-weight:normal;

}

.main a {

color:#006699;

}

.main a:hover {

color:#006699;

text-decoration:none;

}

.subcatl {

color:#000;

text-decoration:underline;

font-weight:normal;

}

.subcatl:hover {

color:#000;

text-decoration:none;

font-weight:normal;

}

.smallText {

color:#464646;padding:0px 10px 0px 10px;

height:49px;

}

.smallText a {

font-size:11px; color:#006699; text-decoration:underline

}

.smallText a:hover {

color:#006699; font-size:11px; text-decoration:none;

}

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

body {padding:0; margin:0; }

body, td {font-family: arial,Tahoma,verdana; font-size:11px; color: #333333;}

i {font-style:normal;}

.bg {background:url(images/bg1.jpg); background-repeat: repeat-x; background-color:#81BB89;}

.bg1 {background:url(images/m11.gif); background-repeat: no-repeat; background-position:top;}

.bg2 {background:url(images/m15.gif); background-repeat: repeat-x;}

ul{

margin:0px;

padding:0px;

list-style:none;

}

ul li{

background:url(images/m16.gif) top left no-repeat; margin:0;

padding:0 0 0 30px;

}

ul a{

color:black;

text-decoration:none;

font-size:11px;

line-height:22px;

}

ul a:hover{

color:#333333;

}

.al{

background:url(images/m17.gif) center left no-repeat; margin-left:16px;

padding:0 0 0 14px;}

.el{

background:none; margin: 0px 0px 1px 38px;

padding:0px;}

.el a{

text-decoration:underline;

font-size:11px;

line-height:22px;

}

.el a:hover{

text-decoration:none;

}

.sea_4 li{

background:url(images/m17.gif) 7px 7px no-repeat; margin:0;

padding:0 0 0 20px;

}

.se {width:85px; height:19px; font-family:arial,tahoma,verdana; color:#3F3F3F; font-size:11px; padding-left:2px;}

.se1 {width:120px; height:19px; font-family:arial,tahoma,verdana; color:#3F3F3F; font-size:11px; padding-left:2px;}

.se2 {width:160px; height:19px; font-family:arial,tahoma,verdana; color:#3F3F3F; font-size:11px; padding-left:2px;}

.go {width:40px; height:18px; font-family:arial,tahoma,verdana; color:#3F3F3F; font-size:11px; text-align:center; border: 1px solid #3F3F3F;}

.bd {border: solid 1px #FFFFFF;}

.bd1 img{border:#CCCCCC solid 1px;margin:0px 5px 0px 0px;}

.ab img {vertical-align: middle;}

.tx {font-size:12px; color:#FFFFFF;}

.tx1 {font-size:12px; color:#79EA40; font-weight:bold;}

.tx2 {font-size:13px; color:#FFFFFF; font-weight:bold;}

.tx3, .tx3 a {font-size:12px; color:#333333; font-weight:bold; text-decoration:none;}

.tx4 {font-size:13px; color:#CC3300; font-weight:bold;}

.tx5 {font-size:12px; color:#006699; font-weight:bold;}

.ml {font-size:12px; color:#FFFFFF; text-decoration:none; font-weight:bold;}

.ml:hover {text-decoration:underline;}

.ml1, .ml1 a {font-size:12px; color:#006699; text-decoration:none; font-weight:bold;}

.ml1:hover, .ml1 a:hover {text-decoration:underline;}

.ml12{font-size:11px; color:#006699; text-decoration:none; font-weight:bold;}

.ml12:hover{text-decoration:underline;}

.ml2 {font-size:11px; color:#006699; text-decoration:underline;}

.ml2:hover {text-decoration:none;}

.ml3 {font-size:11px; color:#333333; text-decoration:none;}

.ml3:hover {text-decoration:underline;}

.ml33 a {font-size:11px; color:#333333; text-decoration:none;}

.ml33 a:hover {text-decoration:underline;}

.ml4 a {font-size:11px; color:#333333; text-decoration:underline;}

.ml4 a:hover {text-decoration:none;}

#zxc1 {color:#FFFFFF; font-size:12px; text-decoration:underline; font-weight:bold;}

#zxc1 a {color:#FFFFFF; font-size:12px; text-decoration:underline; font-weight:bold;}

#zxc1 a:hover {text-decoration:none;}

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

.sea_1 {border-right:9px solid #ffffff; border-left:9px solid #ffffff;}

.sea_2 {padding:0px 13px 0px 13px;}

.sea_3 {padding:0px 5px 0px 5px;}

.sea_33 {padding:3px 3px 3px 3px;}

.sea_4 td{

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

color:333333;

}

.sea_4 i{

font-family: Verdana, Arial, sans-serif;

font-size:13px; color:#CC3300; font-weight:bold;

}

.sea_4 a:hover {

color:006699;

text-decoration:none

}

.sea_4 a {

color:006699;

text-decoration:underline

}

.sea_5 { background:#EFEFEF;border:1px solid #D1D1D1;}

Hopefully someone nice can help me out with this

cheers

chris

vancomtech · February 22, 2007

Hey Chadds, Im quite the newbie here aswell so no expert advice from me but if go to

http://www.oscommerce.info/kb/osCommerce/C...n_and_Layout/54

it might help you out some what. It did for me with color changing!

Hope this helps a bit.

James

shooter-boy · February 23, 2007

Most templates use an image for the background colour.

A quick look at the source of your site shows:

style="background-image:url(images/bg.jpg);

so that is where i would be looking...

Some templates have a box1.php file in the includes directory, or something like that... so check that out too.

Sorry, but you will only get limited design support for template sites. If you contact the person/company you built it from, they should be able to help if you can't work it out.

Rob

chadds · February 23, 2007

Most templates use an image for the background colour.

A quick look at the source of your site shows:

style="background-image:url(images/bg.jpg);

so that is where i would be looking...

Some templates have a box1.php file in the includes directory, or something like that... so check that out too.

Sorry, but you will only get limited design support for template sites. If you contact the person/company you built it from, they should be able to help if you can't work it out.

Rob

Thanks for that , it was really helpfull and i have managed to change the gif files to a different colour however if you look at my site www.chadds26.myzen.co.uk you will notice a green band near the bottom of the page, ive no idea where this would be found! , has anyone got any suggestions?

once again thanks for your help :)

cheers

chris

shooter-boy · February 24, 2007

When using images for backgrounds, it is common (and very wise) to set a background colour incase the image fails to load, or the user's browser doesn't support something etc...

You will need to change it in your stylesheet most likely.

Currently the background colour is: background-color:#ECECEA , so that should give you a head start ;)

Rob

ErollorD · February 24, 2007

we already solved this...

http://www.oscommerce.com/forums/index.php?showtopic=252129

shooter-boy · February 26, 2007

Can't help it if the OP double post! =D

Rob

Change Background colours?

Recommended Posts

chadds

Link to comment

Share on other sites

vancomtech

Link to comment

Share on other sites

shooter-boy

Link to comment

Share on other sites

chadds

Link to comment

Share on other sites

shooter-boy

Link to comment

Share on other sites

ErollorD

Link to comment

Share on other sites

shooter-boy

Link to comment

Share on other sites

Archived

Browse

Activity