Modifying cart system styles
Contents |
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...
- 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).
- 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
- 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.
- Save that file as shopping_cart.css
- Make whatever changes you want
- Upload that file to your template folder
Default styles
These will be pulled if no shopping_cart.css file is found in your template folder to override them. 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.
#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; }