Modifying cart system styles

Revision as of 08:03, 25 August 2007

Overview

Cart system styles are the colors, etc. usually defined in Shoppping Cart > Display Settings. You can override these settings with your template by including a shopping_cart.css file in your template's folder.

Default rules inherited

As of v4.9 r58 your shopping_cart.css will be included in addition to (vs. instead of) the default style rules. This means that the rules in your shopping_cart.css start out inheriting the default rules.

This is cool for two reasons...

1. You can pick and choose what you want to over-ride with your css. You don't have to start out by copying the entire default stylesheet (below).
2. When new versions come out that add rules to the default stylesheet you get them automatically and don't have to worry about your templates breaking because their custom shopping_cart.css is missing some new important rule.

How to use your own styles

1. Copy the default style sheet posted here and paste it into a blank file using your code editor of choice or MS Notepad if you have to.
2. Save that file as shopping_cart.css
3. Make whatever changes you want
4. Upload that file to your template folder

Default cart styles

Your custom shopping_cart.css file will start out by ineriting these rules. Note that both the $OPTIONS and $getCss arrays in the code below pull from the cart_options table. $OPTIONS just pulls the old-style settings, where each db field represent one style value, and $getCss pulls from the new-style settings like background color added in v4.9, where all styles are saved to the "CSS" field in a serialized array.

You CAN use php in your shopping_cart.css if you want to like the default stylesheet does.

#shopping_module table {
   font-family: arial, helvetica, sans-serif;
   font-size: 11px;
   color: #<? echo $getCss['table_textcolor']; ?>;
}

table.parent_table {
   width: 612px;
}

table.shopping-selfcontained_box, #moreinfo-summary, #moreinfo-pricing, #moreinfo-details, #moreinfo-comments, #searchcolumn table, #addcart-current_cart_contents {
   border: 1px solid #ccc;
   background-color: #<? echo $getCss['table_bgcolor']; ?>;
}

#shopping_module th {
   background-color: #<? echo $OPTIONS['DISPLAY_HEADERBG']; ?>;
   color: #<? echo $OPTIONS['DISPLAY_HEADERTXT']; ?>;
   text-align: left;
}

/*--------------------------------------------------------
 pgm-more_information.php
--------------------------------------------------------*/
table#moreinfo-pricing {
   margin-top: 15px;
}
#moreinfo-pricing th {
   text-align: center;
}

table#moreinfo-comments {
   margin-top: 15px;
}


/*--------------------------------------------------------
 prod_search_column.inc
--------------------------------------------------------*/
#searchcolumn-login_or_date td {
   padding: 5px;
   vertical-align: top;
}

#searchcolumn-login_or_date {
   border-bottom: 0px;
   background-color: transparent;
}

#searchcolumn-items_in_cart {
   color: #<? echo $OPTIONS['DISPLAY_CARTTXT']; ?>;
   background-color: #<? echo $OPTIONS['DISPLAY_CARTBG']; ?>;
}


/*--------------------------------------------------------
 pgm-checkout.php
--------------------------------------------------------*/
#checkout-steps th {
   text-align: center;
}


/*--------------------------------------------------------
 prod_billing_shipping.inc
--------------------------------------------------------*/
#billing_shipping_form {
   width: 612px;
}

#billing_shipping_form input.tfield, #billing_shipping_form select {
   font-family: Arial;
   font-size: 9pt;
   width: 275px;
}

/*--------------------------------------------------------
 prod_cust_invoice.inc
--------------------------------------------------------*/
.row-normalbg { background-color: #fff; }
.row-altbg { background-color: #efefef; }