Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Changing Font Size and Background colors


mike212

Recommended Posts

I'd like to change the background color and font size for each of the box headers.

 

For example:

 

Top ? Catalog

 

Categories

 

Quick Find

 

What's New?

 

etc....

 

Not just the text size but the grey backgound behind the text.

 

Thanks.

Link to comment
Share on other sites

id like to change the entire background to black....do you think this is easy?

 

nope...

 

ive downloaded and installed the bts and configured the dbase correctly, everything works fine...but how to edit the templates i dont know.

 

im off looking for a "pay software" option as this is poorly supported and there arent any utilities to work with.

 

in essence its a great service...but if you want anything that is easily modified, as basic as colour changing...you need to know php, css, cgi etc.... and most people who are looking for these things dont know that.

 

checkout the live sites....most are "powered by oscommerce"...but designed by web developers....

 

later.

Link to comment
Share on other sites

oh great...cant edit my message... i want to apologise for being a bit harsh here...since my frustrating experiences, some ppl have answered my requests...so thanks very much to those ppl!

 

i'm still hanging in there with hope..

 

Tim.

Link to comment
Share on other sites

WhatThe!,

 

This is the OSCommerce .css

 

This is a fully commented Stylesheet.css

 

I would recomend the use of a color picker to get correct color codes. These are readily

available on the internet free of charge.

 

Thanks to the guy that took the time to write it out(not i)

 

loacated in the /stylesheet.css file

 

CODE BELOW

------------------------------------------------------------------------------------

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

?osCommerce, Open Source E-Commerce Solutions
?[URL=http://www.oscommerce.com]http://www.oscommerce.com[/URL]

?Copyright ? 2003 osCommerce

?Released under the GNU General Public License
*/
/*This is the Infobox text style*/
.boxText { font-family: Verdana, Arial, sans-serif; font-size: 10px; }

/*This is the Error Messages style with pink background*/
.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 10px; background: #ffb3b5; font-weight: bold; }

/*This is the Warning Messages red font style*/
.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #cc0033; }

/*This is the Product Notifications green background stylet*/
.productsNotifications { background: #f2fff7; }

/*This is the Order Edit style with green underline*/
.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #70d250; text-decoration: underline; }

/*This is the General Page Body Style with white background, black text, flush left margins*/
BODY {
?background: #ffffff;
?color: #000000;
?margin: 0px;
}

/*This is the Default Hyperlink Style with black text and no underlines*/
A {
?color: #000000;
?text-decoration: none;
}

/*This is the Default ACTIVE Hyperlink Style when a mouse is hovering over it, with dusty blue text and an underline*/

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

/*Forms display within the page rather than opening a new window*/
FORM {
display: inline;
}

TR.header {
?background: #ffffff;
}
/*This is the TOP GRAY BAR BACKGROUND STYLE with Top > Catalog on the left*/
TR.headerNavigation {
?background: #bbc3d3;
}

/*This is the TOP GRAY BAR FONT STYLE with Top > Catalog on the left*/
TD.headerNavigation {
?font-family: Verdana, Arial, sans-serif;
?font-size: 10px;
?background: #bbc3d3;
?color: #ffffff;
?font-weight : bold;
}

/*This is the TOP GRAY BAR HYPERLINK STYLE SETTING LINKS TO WHITE */
A.headerNavigation { 
?color: #FFFFFF; 
}

/*This is the TOP GRAY BAR HYPERLINK STYLE SETTING LINKS TO WHITE when the cursor is over them*/
A.headerNavigation:hover {
?color: #ffffff;
}

/*This is the ERROR Background style for a row with a red background*/
TR.headerError {
?background: #ff0000;
}

/*This is the ERROR Background style for a cell with a red background*/
TD.headerError {
?font-family: Tahoma, Verdana, Arial, sans-serif;
?font-size: 12px;
?background: #ff0000;
?color: #ffffff;
?font-weight : bold;
?text-align : center;
}

/*This is a ROW Background style with a neon green background*/
TR.headerInfo {
?background: #00ff00;
}

/*This is a CELL Background style with a neon green background*/
TD.headerInfo {
?font-family: Tahoma, Verdana, Arial, sans-serif;
?font-size: 12px;
?background: #00ff00;
?color: #ffffff;
?font-weight: bold;
?text-align: center;
}

/*This is the GRAY BOTTOM BAR Row background*/
TR.footer {
?background: #bbc3d3;
}

/*This is the GRAY BOTTOM BAR Cell background*/
TD.footer {
?font-family: Verdana, Arial, sans-serif;
?font-size: 10px;
?background: #bbc3d3;
?color: #ffffff;
?font-weight: bold;
}

/*This is the INFOBOX Background Style, one shade darker than the Infobox Header color*/
.infoBox {
?background: #b6b7cb;
}

/*This is the INFOBOX Contents Style, one shade lighter than the Infobox Header color*/
.infoBoxContents {
?background: #f8f8f9;
?font-family: Verdana, Arial, sans-serif;
?font-size: 10px;
}

/*This is the INFOBOX Notice Style, a pale salmon color*/
.infoBoxNotice {
?background: #FF8E90;
}

/*This is the INFOBOX Notice Contents Style, a very pale salmon color*/
.infoBoxNoticeContents {
?background: #FFE6E6;
?font-family: Verdana, Arial, sans-serif;
?font-size: 10px;
}

/*This is the INFOBOX Heading Style, SAME AS HEADER AND FOOTER GRAY BARS*/
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;
}

/*This is a GENERAL ROW Style for every other line of noted pages, a palest gray color*/
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;
}

/*This is a GENERAL ROW Style for every other line of noted pages, the same palest gray color but allows you to alternate 2 colors if you wish*/
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;
}

/*This is a GENERAL TABLE Style for product listing pages, a deeper gray color*/
TABLE.productListing {
?border: 1px;
?border-style: solid;
?border-color: #b6b7cb;
?border-spacing: 1px;
}

/*This is the GRAY BAR Style for product listing pages, same deeper gray color as previous item*/
.productListing-heading {
?font-family: Verdana, Arial, sans-serif;
?font-size: 10px;
?background: #b6b7cb;
?color: #FFFFFF;
?font-weight: bold;
}

/*This is the FONT Style for product listing pages*/
TD.productListing-data {
?font-family: Verdana, Arial, sans-serif;
?font-size: 10px;
}

/*This is the HYPERLINK Style for Results pages*/
A.pageResults {
?color: #0000FF;
}

/*This is the HYPERLINK Style for Results pages when the mouse is hovering over it*/
A.pageResults:hover {
?color: #0000FF;
?background: #FFFF33;
}

/*This is the MAIN TEXT Style, a deeper gray*/
TD.pageHeading, DIV.pageHeading {
?font-family: Verdana, Arial, sans-serif;
?font-size: 20px;
?font-weight: bold;
?color: #9a9a9a;
}

/*This is a Row Sub-bar Style, a very pale gray*/
TR.subBar {
?background: #f4f7fd;
}

/*This is a Cell Sub-bar Style, black default text*/
TD.subBar {
?font-family: Verdana, Arial, sans-serif;
?font-size: 10px;
?color: #000000;
}

/*This is a Cell and Paragraph Main Style*/
TD.main, P.main {
?font-family: Verdana, Arial, sans-serif;
?font-size: 11px;
?line-height: 1.5;
}

/*This is a Cell, Span, and Paragraph Font Style*/
TD.smallText, SPAN.smallText, P.smallText {
?font-family: Verdana, Arial, sans-serif;
?font-size: 10px;
}

/*This is a Cell Font Style in larger size with medium dusty blue font*/
TD.accountCategory {
?font-family: Verdana, Arial, sans-serif;
?font-size: 13px;
?color: #aabbdd;
}

/*This is a Cell Font Style in a bold larger size*/
TD.fieldKey {
?font-family: Verdana, Arial, sans-serif;
?font-size: 12px;
?font-weight: bold;
}

/*This is a Cell Font Style in a bold larger size*/
TD.fieldValue {
?font-family: Verdana, Arial, sans-serif;
?font-size: 12px;
}

/*This is a Table Heading Style in a bold larger size*/
TD.tableHeading {
?font-family: Verdana, Arial, sans-serif;
?font-size: 12px;
?font-weight: bold;
}

/*This is a Span Font Style used for New Items in Cart in a BRIGHT RED FONT*/
SPAN.newItemInCart {
?font-family: Verdana, Arial, sans-serif;
?font-size: 10px;
?color: #ff0000;
}

/*This is a FORM STYLE used for checkboxes, input text, radio buttons, and drop-down boxes*/
CHECKBOX, INPUT, RADIO, SELECT {
?font-family: Verdana, Arial, sans-serif;
?font-size: 11px;
}

/*This is a FORM STYLE used for text boxes where visitor enters free-form text*/
TEXTAREA {
?width: 100%;
?font-family: Verdana, Arial, sans-serif;
?font-size: 11px;
}

/*This is a TEXT STYLE used for the "Greetings, Username! in a funny orange-salmon color*/
SPAN.greetUser {
?font-family: Verdana, Arial, sans-serif;
?font-size: 12px;
?color: #f0a480;
?font-weight: bold;
}

/*This is a FORM BACKGROUND AND BORDER STYLE with a very pale dusty blue background and deep dusty blue border*/
TABLE.formArea {
?background: #f1f9fe;
?border-color: #7b9ebd;
?border-style: solid;
?border-width: 1px;
}

/*This is a FORM TEXT STYLE with slightly larger bold text*/
TD.formAreaTitle {
?font-family: Tahoma, Verdana, Arial, sans-serif;
?font-size: 12px;
?font-weight: bold;
}

/*This is a SPAN PRODUCTS PAGE STYLE with a pale burgundy color font*/
SPAN.markProductOutOfStock {
?font-family: Tahoma, Verdana, Arial, sans-serif;
?font-size: 12px;
?color: #c76170;
?font-weight: bold;
}

/*This is a SPAN PRODUCT SPECIAL FONT STYLE in a bright red color*/
SPAN.productSpecialPrice {
?font-family: Verdana, Arial, sans-serif;
?color: #ff0000;
}

/*This is a SPAN ERROR TEXT STYLE in a bright red color*/
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

Ran into a problem. I was able to change the background colors of each of the headers. Except when I click on a profuct category the background still is the old #bbc3d3. I used Dreamweaver's find and replace fundtion to find all occurances of that color: #bbc3d3 but it says I changed them all already.

 

Any ideas where this color control is hiding?

 

 

(same problem also with shopping cart header row)

Link to comment
Share on other sites

/*This is a GENERAL ROW Style for every other line of noted pages, a palest gray color*/

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;

}

 

/*This is a GENERAL ROW Style for every other line of noted pages, the same palest gray color but allows you to alternate 2 colors if you wish*/

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;

}

 

/*This is a GENERAL TABLE Style for product listing pages, a deeper gray color*/

TABLE.productListing {

border: 1px;

border-style: solid;

border-color: #b6b7cb;

border-spacing: 1px;

}

 

/*This is the GRAY BAR Style for product listing pages, same deeper gray color as previous item*/

.productListing-heading {

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

font-size: 10px;

background: #b6b7cb;

color: #FFFFFF;

font-weight: bold;

}

 

bottom two control what you want :rolleyes:

 

Ran into a problem. I was able to change the background colors of each of the headers. Except when I click on a profuct category the background still is the old #bbc3d3

 

if they were #bbc3d3, don't you think you'd have found them seeing as it's a text file?

Link to comment
Share on other sites

  • 3 weeks later...

For all stylesheet edits i used topstyle pro. Excellent with colour pickers, eyedroppers etc. Saves a load of time fiddling manually around with style sheets. Dream weavers attempt at style sheet handling is in the shade to topstyle's. Not working for or on commission just a sathisfied customer. Its about 60 bucks +-

 

Cheers

Hope this helps

free is often better than cheap

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...