£0.00

2.2 and Earlier Catalog Stylesheet Definitions
[22AECSS]

2.2 and Earlier Catalog Stylesheet Definitions
Introduction

Most of the colours used throughout the osCommerce installation can be changed in the stylesheet definition file.

.boxText

Changes the font size of the text in all the boxes.

Set the padding in the stylesheet to have space on the left and right ... if you set padding on the top and bottom it will leave that much space between the text lines in certain boxes and is not recommended for the top and bottom padding.

.errorBox

Colour and text size of error boxes with the red triangle ... ex: admin/backup.php where it will say backup directory does not exist, warning...I can write to your configuration files, etc.

.stockWarning

The style used for the stock level warning text shown on the shopping cart page when purchasing items.

.productsNotifications

The style used for the product notifications checkbox bar on the checkout success page.

You can also put a colour in the text box and it will make the text change on just that bar.

.orderEdit

The colour style of the “edit” links shown on the checkout confirmation page.

BODY

Type colour is text colour in the left & right column boxes and the “text body” that is NOT linked.

Background colour is the page background colour ... this acts as a base whereupon the header and columns are built.

Set the border colour which sets the colour around the inside browser window including the scrollbar.

Set the top border to 10 with the same colour and it will drop down the table and the scrollbars of the browser.

A

The colour style for ALL link colours throughout the entire store.

A:hover

The colour style used for mouse over links throughout the entire store.

FORM

The style used for forms. Changes the colour of this text, “Use keywords to find the product you are looking for” in the “Quick Find” box on the left.

TR.header (means table row.header and is a general setting for the whole table)

The style used for the background colour of the header.

TR.headerNavigation

The styles used for the breadcrumb navigation path (background colour only of the top navigation as “Top >> Catalog >> etc)

TD.headerNavigation

Arrow colours that point forward and the vertical link separators | in the breadcrumb navigation path.

If you set a background colour here it will override the TR.headerNavigation colour set.

A coloured border on the bottom can be set for a separation between the header and the categories.

A padding value can be set which will only pad the Navigation Bar.

A background image for the navigation table can be set also.

A.headerNavigation

Sets the text link colours for the breadcrumb navigation path links (Top Catalog etc.)

A.headerNavigation:hover

The mouse over effects of the breadcrumb navigation path links ( top, catalog, my account, cart contents, etc.)

TR.headerError

The styles used for the error messages shown in the header. The default is a red background with white text.

TD.headerError

The styles used for the error messages shown in the header. The default is a red background with white text.

TR.headerInfo

The styles used for the information messages shown in the header ... changes the bg colour of the top box that appears when a new password is sent ...

ex: A New Password Has Been Sent To Your Email Address

TD.headerInfo

The styles used for the information messages shown in the header ... changes the bg colour of the top box that appears when a new password is sent ...

ex: A New Password Has Been Sent To Your Email Address

TR.footer

This sets the colour of the footer row where the date and counter are.

TD.footer

This is the size & colour of the text in the footer row where the date and counter are. If you set a background colour on this TD.footer tag it will override the TR.footer tag.

.infoBox

Sets the background border colour around all the boxes and not the box headings except the “my account”, “edit account”, and “add a new address” boxes.

.infoBoxContents

Sets the colour of ALL the inside of the boxes and puts a coloured border around the comments boxes.

Setting a text colour here will colour the numbers text in the boxes like the catalog listings and the “Best Sellers” box numbers and the “My Account”, “Edit Account”, & “Add Address” headings.

.infoBoxNotice

The style used for the outline of the box created at the top of the checkout_payment.php page when a customer inputs the wrong credit card number or expiration date.

.infoBoxNoticeContents

The style used for the body of the box created at the top of the checkout_payment.php page when a customer inputs the wrong credit card number or expiration date.

TD.infoBoxHeading

Sets the left and right column boxes and the new products box heading colour and text colour.

The text size of the heading boxes can be changed ... anything above 10 you will need to enlarge the box graphics also (images/infobox)

Padding can be added to these heading boxes.

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even

Sets the odd and even row colours on all box listings.

TABLE.productListing

Sets a border around the products listing table that shows the listing of the products.

.productListing-heading

The colour of the background of the product listing heading that has “product name”, “price”, etc. The text style and colour can also be set.

TD.productListing-data

Set a different background colour for the product listing table and also set box padding, size, borders ... experiment!

A.pageResults

Sets the link on catalog/includes/split_page_results.php and page results numbered link colours at the bottom of the product pages.

A.pageResults:hover

Mouse over link colours on catalog/includes/split_page_results.php and page results numbered links mouse over colour at the bottom of the product pages.

TD.pageHeading, DIV.pageHeading

The style used for page headings. Colour on the checkout_success.php page that says “Your Order Has Been Processed!” and also on all the product heading pages as What's New Here? Enjoy Your Shopping! Text on all the product pages.

Change the size of the text here.

TR.subBar and TD.subBar

The style used for the sub navigation bar.

TD.main, P.main

The size of the text can be set for all the main text area, the “My Account Info”, “Edit Account”, “Add Address”, “Order History”, & “Notifications” page boxes. If you set the text colour it is the text colour on all these ... not the column boxes.

A padding can be also be set for all the body text in the store.

TD.smallText, SPAN.smallText, P.smallText

Copyright text colour & size at the bottom of the page.

“Include Subcategories” Text on the advanced_search.php page

Page results text at the bottom of the product pages such as “Displaying 11 to 20 (of 32 products) Result Pages:”

TD.accountCategory

The style used for the account categories.

TD.fieldKey and TD.fieldValue

Text Sizes for the account parameter keys and values on the advanced_search.php page such as “Categories: Manufacturers: Price From: Price To:

Date From: Date To:

TD.tableHeading

Text styles/sizes on the table headings of address_book.php and product_reviews.php page such as “No. Name Location”

SPAN.newItemInCart

The style used for marking new products added to the shopping cart so these products show what's in the shopping cart.

CHECKBOX, INPUT, RADIO, SELECT

The style used for certain HTML form elements like the size of the text inside the drop down boxes like manufacturers.

SPAN.greetUser

The style used for the user greeting “Welcome Guest!” on the first page.

TABLE.formArea

In “My Account Information”, “Edit Account”, and “Add Address” this is the inside box colour.

Set the border around the boxes in the border section.

TD.formAreaTitle

In “My Account Information”, “Edit Account”, and “Add Address” this is the size of the text headings.

Changes the text colour on top of the boxes on the “My Account Info” page.

Leave the text colour box blank and the colour is black.

A padding can also be set for space on the right and left sides.

SPAN.markProductOutOfStock

The text colour used for marking products out of stock.

SPAN.productSpecialPrice

The style used on special product prices.

TD.checkoutBar

Bottom text on the checkout page that says:

[ delivery address | payment method | confirmation | finished! ]

SPAN.checkoutBarHighlighted

The highlight colour of the text showing which page you are on:

[ delivery address | payment method | confirmation | finished! ]

SPAN.errorText

The style used for error text messages.

.moduleRow

The style used for the shipping and payment modules.

.moduleRowOver

The colour of the bar on the checkout_payment.php page on a mouse over when you choose your payment method.

.moduleRowSelected

The colour of the bar on the checkout_shipping.php showing the shipping charge & the selected payment method on th checkout_payment.php page.

.checkoutBarFrom, .checkoutBarTo

The colour & size of the text at the bottom of the checkout pages that shows what page you are NOT on such as “Delivery Information Payment Information Confirmation Finished!”

.checkoutBarCurrent

The colour & size of the text at the bottom of the checkout pages that shows what page you are on such as “Delivery Information Payment Information Confirmation Finished!”

.messageBox

.messageStackError, .messageStackWarning

.messageStackSuccess

The style used for message boxes. The error background colours like trying to delete an address that is your primary address in the account section.

.inputRequirement

The style used for form input requirement fields. The colour of the asterisk * and the words “Required Information” on the account.php pages.

.messageStack

Reviews (1)
0 items
Currencies
Share Product
Share via E-Mail Share on Facebook Share on Twitter Share on Google Buzz Share on Digg
Manufacturers
Manufacturer Info
Other products
Quick Find
 
Use keywords to find the product you are looking for.
Advanced Search