Catalog stylesheet.css

The stylesheet is very powerful, and exerts great control over the look and feel of the catalog. Using the stylesheet alone, you can make many cosmetic changes to osCommerce with minimal effort. It helps if you have a working familiarity with stylesheets, and a good stylesheet editing tool. Click here for a basic example of how you can edit osCommerce using only the default stylesheet.

Elements

A

This element controls the style of all hyperlinks in osCommerce, color, style, borders, image, etc.

A:hover

This element controls the hover style of all hyperlinks in osCommerce, color, style, borders, image, etc.

BODY

This element controls the styles of the body of osCommerce. Here you can change the background color and image, margins, width of the catalog, main font color (default text, product text, checkout text, prices, etc.)

CHECKBOX,INPUT,RADIO,SELECT

This element controls the styles for all Checkbox, Input, Radio and Select  controls in osCommerce. The background, color, size, font are all controlled here.

FORM

This element controls the main form area styles in osCommerce. You can specify background colors, images, whether they display inline, or in the entire form block, font size of the form area. This also controls the font displayed in the search box, but not the fonts displayed in other forms.

TEXTAREA

This controls the style of the product text display area, but not the actual text of this area. The text is controlled by the BODY element. this also controls the background of the larger text input fields, such as the text input field in the 'contact us' form. Background color, image, border, font of these text areas are all controlled here.

 

Classses

.boxText

This controls the style of the font in the side boxes. This does not affect any hyperlinks. That is controlled by the A element above. Nor does it affect Box Headings - this is controlled by TD.infoBoxHeading

.checkoutBarCurrent

This is the style for the current step in the checkout progress bar at the bottom of the checkout pages. This style controls the font family, size and color of the checkout bar current step.

.checkoutBarFrom, .checkoutBarTo

This is the style for the steps prior to and after the current checkout step in the checkout progress bar at the bottom of the checkout pages. This style controls the font family, size and color of the checkout bar steps that are not currently active.

.errorBox

This controls the style of the error box that displays when there is an error in the checkout process, such as an incorrect credit card number. The settings controlled by default are the background color, font family, size, and color.

.infoBox

This specifies the background color of the infoboxes. These are all the side boxes and the new products box on the main page.

.infoBoxContents

This specifies the styles for all the actual contents of the infoboxes. These are all the side boxes and the new products box. This is where you can change the background color and image of the side boxes. The font setting only seems to have an effect on the 'Shopping Cart' , 'Order History' and 'Bestsellers'  box's fonts.

.infoBoxNotice

 

.infoBoxNoticeContents

 

.moduleRow

 

.moduleRowOver

This controls the mouseover color of rows in modules during the checkout process. For example, when you mouseover a shipping option, the color changes. This controls the mouseover color.

.moduleRowSelected

This controls the selection color of rows in the modules during the checkout process. For example, when you select a shipping option, the color changes.

.orderEdit

This controls the style of the '(Edit)' text on the checkout confirmation page.

.productsNotifications

This controls the table style for product notifications on the checkout success page.

.stockWarning

This controls the properties of the stock warning text that is displayed in the shopping cart when there is not enough product in stock.

A.headerNavigation

This controls the color of the links in the header navigation bar. This includes the breadcrumb links and all the site navigation links.

A.headerNavigation:hover

This controls the hover color of the links in the header navigation bar. This includes the breadcrumb links and all the site navigation links.

A.pageResults

 

A.pageResults:hover

 

SPAN.errorText

 

SPAN.greetUser

This controls the style of the username in the greeting on the main page.

SPAN.markProductOutOfStock

This controls the style of the "out of stock" marker that shows up in the shopping cart display next to the out of stock product.

SPAN.newItemInCart

This controls the style of the 'new item text' that is displayed for the any new item that is added to the cart. This highlights the newest item added to the cart.

SPAN.productSpecialPrice

This controls the style of the 'special price' text.

TABLE.formArea

This controls the style of the tables in forms, such as the 'My Account" form. This specifies background color, border, images, etc.

TD.accountCategory

 

TD.fieldKey

 

TD.fieldValue

 

TD.footer

This controls the styles of the footer bar at the bottom of the page.

TD.formAreaTitle

This controls the styles of form title text in the user account pages.

TD.headerError

This controls the style of the header error messages (default is red at the top of the cart)

TD.headerInfo

This controls the style of the header info messages (default is green at the top of the cart)

TD.headerNavigation

This controls the style of the header navigation text and background. This does not control the hyperlinks in the header navigation bar. To control link styles in this area, use A.headerNavigation and A.headerNavigation:hover

TD.infoBox, SPAN.infoBox

 

TD.infoBoxHeading

This controls the style of all the headings in the side boxes and new products box. Control color, background image, font, etc.

TD.main, P.main

Controls the style of the main text areas in osCommerce, the default page, product text, and info pages text.  

TD.pageHeading, DIV.pageHeading

Controls the style of every page heading. Color, font, size, etc.

TD.productListing-data

Controls the styles of product listing data on the product listing pages.

TD.productListing-heading

Controls the styles of the product listing heading on the product listing pages.

TD.smallText, SPAN.smallText, P.smallText

This controls the styles of small text. This is the text found in the copyright notice, category links in the main text area, product name and price in the new products box and several other places.

TD.subBar

 

TD.tableHeading

Controls the style of the table headings in the shopping cart, Qty, Products, Total and the headings in the personal address book.

TR.accountHistory-even

 

TR.addressBook-even

Controls the style in the even numbered entries in the address book.

TR.alsoPurchased-even

 

TR.payment-even

 

TR.productListing-even

 

TR.productReviews-even

 

TR.upcomingProducts-even

 

TR.shippingOptions-even

 

TR.accountHistory-odd

 

TR.addressBook-odd

Controls the style in the odd numbered entries in the address book.

TR.alsoPurchased-odd

 

TR.payment-odd

 

TR.productListing-odd

 

TR.productReviews-odd

 

TR.upcomingProducts-odd

 

TR.shippingOptions-odd

 

TR.footer

 

TR.header

Controls the background color of the header cell.

TR.headerError

 

TR.headerInfo

 

TR.headerNavigation

 

TR.productListing-heading

 

TR.subBar