Modifying cart system styles
From Sohowiki
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 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.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; }
How to use your own styles
- Copy the default style sheet posted above and paste it into a file.
- Save that file as shopping_cart.css
- Make whatever changes you want
- Upload that file to your template folder