Many aspects of the cart's design is controlled using CSS (Cascading Style Sheets). If you are not familiar with CSS, we recommend picking up a book on it, or researching it on the web.

All the CSS classes used in your storefront are defined in the store.css file. The default store.css file can be found in the master theme folder - "squirrelcart/themes/squirrelcart". To modify it, you will need to create a custom theme, and copy the store.css file from the master theme folder into your custom theme folder.

Class Overview

Below is an explanation of what each class in store.css controls in your storefront:

.action_msg

This controls the message to the user, throughout the shopping process.

.bread_crumb_link

This controls the appearance of each link in the bread crumb navigation, which is the set of links that appear at the top of your storefront, ie "Home : Products : Etc.."

.bread_crumb_nav

This controls the appearance of the entire area that contains the bread crumb navigation.

.cart_instruction

This controls the appearance of the messages instructing the user during the checkout process. For example, "To complete your order, please click the continue button below."

.category_collapsed

This controls the appearance of a category link in the left nav.

.category_collapsed:hover

This controls the appearance of a category link in the left nav, when you move your mouse over it.

.category_expanded

This controls the appearance of a category link in the left nav, after it was just clicked, and all the space surrounding it.

.category_expanded_surround

This controls the area surrounding an expanded category in the left nav, and it's subcategories.

.category_selected

This controls the appearance of a category after it was just clicked (the text of the link only).

.content

This controls the appearance of each content box, in the center of your storefront. This is by default a white box with a gray border.

.field_input

This controls the appearance of the form fields in your storefront.

.field_name

This controls the appearance of the label that appears immediately before the field itself, such as "First Name:" or "Postal Code:"

.header

This controls the main title of some pages at checkout, which is usually displayed as either an image or text. Examples would be images that read "Viewing Cart" and text like "Thanks for Your Order!"

.header2

This controls the appearance of the boxes surrounding the "Best Seller", "New Products", and "Product Catalog" headings in the center of your storefront. They default to having a blue/gray background, with a gray border.

.new_product_preview

This controls the area surrounding the products inside the "New Products" box.

.page_navigation

This controls the appearance of the links to other pages, when they exist. These usually appear when a category has more products that can be displayed on a single page.

.product_description

This controls the appearance of a product's description.

.product_display

This controls the appearance of the table containing the product's thumbnail images, which is seen after clicking on a category link.

.product_name

This controls the appearance of the product's name on the product detail page.

.product_options_details_link:visited

This controls the appearance of the link that shows details of a product's options.

.product_option_select

This controls the appearance of the area containing the select input for a product option.

.product_price

This controls the appearance of the price of a product.

.product_quantity

This controls the appearance of the quantity field for a product.

.small_link

This controls the appearance of the small "(edit)" links that appear next to products and categories in the storefront, when you are logged in as an admin.

.small_select

This controls the appearance of the select input for the "Change Theme" field, which appears in the "Account Options" nav box after logging in.

.stat_table

This controls the appearace of the table used to display various things in the storefront, including the checkout table, and the order status table.

.stat_top_row

This controls the appearance of the top row in the tables mentioned in the "stat_table" class above.

.stat_top_td

This controls the appearance of the table cells at the top of the tables mentioned in the "stat_table" class above.

.stat_td

This controls the appearance of the table cells (except for the ones in the first row) in the tables mentioned in the "stat_table" class above.

.stat_td_alternate

This controls the appearance of every other row in the tables mentioned in the "stat_table" class above.

A:hover

This controls the appearance of your links when the mouse is moved over them.

A:visited

This controls the appearance of your links that have been visited.

BODY

This controls the default appearance of anything directly inside your body tag.

INPUT

This controls the appearance of input form fields.

SELECT

This controls the appearance of select form fields.

TD

This controls the appearance of table cells.

TEXTAREA

This controls the appearance of textarea form fields.