Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Need some guidance on the style sheet


nihanshe

Recommended Posts

Hi hope someone can point me in the right direction, I have been working on a total new design and I need to change the colour on the style sheet mainly the background within the shop, the brown colour is showing through the white area and it is this I need to change been trying for some while to do this but with no success I have put the css code below be great if anyone could advise what part of the code to change. To get some Idea what im on about here is the link Visit My Website

 

Many thanks Suzy

 

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

.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: #70d250; text-decoration: underline; }

 

select

{

 

border: solid black 1px;

background: #3E1F00;

color: #663300

}

 

 

ul {

list-style: none;

margin: 0;

padding: 0;

}

 

/* =-=-=-=-=-=-=-[Menu Two]-=-=-=-=-=-=-=- */

 

#menu2 {

width: 140px;

border-style: solid solid none solid;

border-color: #677D92;

border-size: 1px;

border-width: 1px;

margin: 10px;

color: #663300

}

 

#menu2 li a {

height: 32px;

voice-family: "\"}\"";

voice-family: inherit;

height: 24px;

text-decoration: none;

}

 

#menu2 li a:link, #menu2 li a:visited {

color: #fff;

display: block;

background: url(images/menu2.gif);

padding: 8px 0 0 10px;

}

 

#menu2 li a:hover {

color: #283A50;

background: url(images/menu2.gif) 0 -32px;

padding: 8px 0 0 10px;

}

 

#menu2 li a:active {

color: #283A50;

background: url(images/menu2.gif) 0 -64px;

padding: 8px 0 0 10px;

}

 

.navh2

{

background-color: #222222;

color: #990000;

font-weight: bold;

width: 120px;

 

}

 

.footertable {

 

 

width: 805px;

}

 

 

.headerdiv {

 

 

background-image: url(../../catalog/images/header2.jpg);

background-repeat: no-repeat;

color: #000000;

margin: 0px;

height : 273px;

 

 

margin-left:auto;

margin-right:auto;

}

 

 

.credits

 

{

 

color: #333333;

text-decoration:none;

font-size:.4em;

text-aling: right;

font-weight : normal;

}

 

a.credits { color: #333333; text-decoration: none;}

a.credits:hover { color: #333333; text-decoration: none;}

 

 

 

BODY {

background: url(images/bg.jpg) ;

background-attachment: fixed;

 

margin: 0px;

margin-bottom: 0px;

background-color: #3E1F00;

}

 

A {

color: #663300;

text-decoration: none;

}

 

A:hover {

color: #000000;

text-decoration: underline;

}

 

FORM {

display: inline;

}

 

TR.header {

background: #ffffff;

}

 

TR.headerNavigation {

background:#000000;

color: #663300

}

 

TD.headerNavigation {

font-family: Arial, sans-serif;

font-size: 10px;

 

color: #ffffff;

font-weight : bold;

background-image: url(images/menu.jpg)

}

 

A.headerNavigation {

color: #663300;

}

 

A.headerNavigation:hover {

color: #000000;

}

 

TR.headerError {

background: #ff0000;

color: #663300

}

 

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 {

width: 800px;

background: #000000;

 

}

 

TD.footer {

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

font-size: 10px;

 

color: #ffffff;

font-weight: bold;

}

 

.infoBox {

background: #333333;

border: none ;

 

 

}

 

.infoBoxContents {

background: #ffffff;

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

font-size: 10px;

 

}

 

.infoBoxNotice {

background: #ffffff;

}

 

.infoBoxNoticeContents {

background: #FFE6E6;

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

font-size: 10px;

}

 

TD.infoBoxHeading {

font-family: Arial, sans-serif;

font-size: 14px;

/* font-weight: bold; */

background: #ffffff;

/* background-image: url("images/tableheaderbg.jpg"); */

color: #000000;

}

 

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: #909CA8;

}

 

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:#ADB5BD;

}

 

TABLE.productListing {

 

}

 

.productListing-heading {

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

font-size: 10px;

background: #ffffff;

color: #FFFFFF;

font-weight: bold;

}

 

TD.productListing-data {

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

font-size: 10px;

color: #FFFFFF;

}

 

A.pageResults {

color: #0000FF;

}

 

A.pageResults:hover {

color: #663300;

background: #FFFF33;

}

 

TD.pageHeading, DIV.pageHeading {

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

font-size: 20px;

font-weight: bold;

color: #ffffff;

}

 

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;

color: #000000;

background-color: #ffffff

}

 

TD.smallText, SPAN.smallText, P.smallText {

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

font-size: 10px;

color: #ffffff;

}

 

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: #ffffff;

 

}

 

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;

color: #ff0000;

}

 

SPAN.errorText {

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

color: #ff0000;

}

 

.moduleRow { }

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

.moduleRowSelected { background-color: #E9F4FC; }

 

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

 

/* input requirement */

 

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

Link to comment
Share on other sites

I could be wrong, but im pretty sure that you have to include the code:

bgcolor="#FFFFFF"

 

within the <table> tag that appears under the piece of text:

<!-- body //-->

 

on every page. for example on your front page, index.php, you need to find:

 

<!-- body //-->
<table border="0" width="100%" cellspacing="3" cellpadding="3">

and change this to:

<!-- body //-->
<table border="0" width="100%" cellspacing="3" cellpadding="3" bgcolor="#FFFFFF">

 

give it a whirl

Link to comment
Share on other sites

no scan, actually if the table calls for a class, then the class is defined in the style sheet

 

this link will bring you to a style sheet key, so it will tell you what changing .boxText style will do and so on.

 

CSS STYLE SHEET INFO

 

otherwise, you can usually tell when style the table is using by looking where the table row or table data begins, for instance you will see

<td class="boxText colspan="0" .......

 

the class would then be in the CSS called .boxText

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

no scan, actually if the table calls for a class, then the class is defined in the style sheet

 

this link will bring you to a style sheet key, so it will tell you what changing .boxText style will do and so on.

 

CSS STYLE SHEET INFO

 

otherwise, you can usually tell when style the table is using by looking where the table row or table data begins, for instance you will see

<td class="boxText colspan="0" .......

 

the class would then be in the CSS called .boxText

I would have to disagree with you in this particular case Linda, because this table doesnt call for a class whatsoever.

However, you have brought up a good point that maybe he should make a new class for this table, for example:

<table border="0" width="100%" cellspacing="3" cellpadding="3" class="mainbackground">

and in the stylehseet.css:

table.mainbackground		{ background-color: #FFFFFF;}

just to make editing of the background simpler in the future

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...