Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

changing colour schemes


dcswiftly

Recommended Posts

i read an article about changing colours throughout the site. it said you locate stylesheet and change the codes. i have done that and nothing has changed, strange, i have double checked but nothing happened. can anyone shine light on it

i have made progress on computers over the last few years as a middle aged man, so please be patient if i do not grasp first time your advice.

Link to comment
Share on other sites

Make sure that you are changing the colors for the right elements. It might be easier to help if you explained what you were actually trying to do and what changes you made. For example, you might want to change the background color of the footer to red (#blah), and you might have tried changing TR.FOOTER. It also helps to post your revised css code, so we can take a look and see if there is anything amiss.

 

Good luck,

Matt

Link to comment
Share on other sites

I was aiming for a soft pastel green background with gold fonts. i thought i would throw them in and then see which colour went where. bit amateurish, i know. HERES THE CODE;

*

$Id: stylesheet.css,v 1.1.1.1 2002/11/28 23:21:29 wilt Exp $

 

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

 

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

 

BODY {

background: #ccffcc;

color: #FFFF00;

margin: 0px;

}

 

A {

color: #ffcc00;

text-decoration: none;

}

 

A:hover {

color: #FF9900;

text-decoration: underline;

}

 

FORM {

display: inline;

}

 

TR.header {

background: #FFFF00;

}

 

TR.headerNavigation {

background: #bbc3d3;

}

 

TD.headerNavigation {

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

font-size: 10px;

background: #bbc3d3;

color: #FFFF00;

font-weight : bold;

}

 

A.headerNavigation {

color: #FFFFFF;

}

 

A.headerNavigation:hover {

color: #FFFF00;

}

 

TR.headerError {

background: #ff0000;

}

 

TD.headerError {

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

font-size: 12px;

background: #ff0000;

color: #FFFF00;

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

font-weight: bold;

text-align: center;

}

 

TR.footer {

background: #bbc3d3;

}

 

TD.footer {

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

font-size: 10px;

background: #bbc3d3;

color: #FFFF00;

font-weight: bold;

}

 

.infoBox {

background: #b6b7cb;

}

 

.infoBoxContents {

background: #f8f8f9;

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

font-size: 10px;

}

 

.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: #FFFF00;

}

 

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

}

 

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

}

 

TR.productListing-heading {

background: #d2e9fb;

}

 

TD.productListing-heading {

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

font-size: 10px;

background: #d2e9fb;

color: #FFFF00;

font-weight: bold;

font-variant: small-caps;

}

 

TD.productListing-data {

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

font-size: 10px;

}

 

A.pageResults {

color: #0000FF;

}

 

A.pageResults:hover {

color: #0000FF;

background: #FFFF33;

}

 

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

}

 

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;

color: #ff0000;

}

TD.pollBoxRow {

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

font-size: 10px;

border-color: #eeeeee;

border-style: solid;

border-width: 1px;

}

TD.pollBoxText {

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

font-size: 10px;

border-color: #eeeeee;

border-style: solid;

border-width: 1px;

}

TR.pollOptRow {

background: #f1f9fe;

}

TR.pollFooter {

background: #f1f9fe;

}

.moduleRow { }

.moduleRowOver { background-color: #D7E9F7; 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; }

i have made progress on computers over the last few years as a middle aged man, so please be patient if i do not grasp first time your advice.

Link to comment
Share on other sites

is it because i have changed too many colour codes at once

i have made progress on computers over the last few years as a middle aged man, so please be patient if i do not grasp first time your advice.

Link to comment
Share on other sites

have put stylesheet.css back to default setting and changed the colour on only body background.here is what i have ;

BODY {

background: #ffffff;

color: #fdd017;

margin: 0px;

 

i put the #fdd017 where the 000000 were and nothing changed. i also put the #fdd017 where the ffffff were and nothing happens.

any ideas?

i have made progress on computers over the last few years as a middle aged man, so please be patient if i do not grasp first time your advice.

Link to comment
Share on other sites

can anybody help? sorry to keep on about it but i am bemused why nothing happens

i have made progress on computers over the last few years as a middle aged man, so please be patient if i do not grasp first time your advice.

Link to comment
Share on other sites

Part of the problem might be that your browser is caching the previous pages. Empty your browser's cache and quit or exit out of the browser program you are using and fire it up again. This should work unless in fact you ARE editing the wrong parameters of the stylesheet. Good luck!

Link to comment
Share on other sites

i have tried tried your advice, sorry still nothing happened

i have made progress on computers over the last few years as a middle aged man, so please be patient if i do not grasp first time your advice.

Link to comment
Share on other sites

How about this. Comment out all the background: lines (begin with /* and end with */) except one (presumably body). The default for everything except input boxes is transparent, so everything except the one should be transparent. If that produces the result that you want, great. If not, change that color. Remember that the innermost element will predominate over those that are further out. Everything else will override body, since it encloses the entirety of what most would think of as the page (i.e. everything else is inside it).

 

Once you have the body the way that you want, start uncommenting elements in front of it so that you can see what they affect (you may want to change their color if they happen to be the same as body). That way, you can see what each element does.

 

Another point, there are two stylesheet.css files. One is in the catalog root and the other is in admin/includes. To change colors on the main site that customers see, you would change the one in the catalog root.

 

Hth,

Matt

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...