Modifying cart system styles
(→Overview) |
|||
(31 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
==Overview== | ==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. | 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== | ==How to use your own styles== | ||
Line 8: | Line 15: | ||
#Upload that file to your [[How_to#Find_your_template_folder|template folder]] | #Upload that file to your [[How_to#Find_your_template_folder|template folder]] | ||
− | ==Default styles== | + | ==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. | ||
<pre>#shopping_module table { | <pre>#shopping_module table { | ||
Line 86: | Line 95: | ||
width: 275px; | width: 275px; | ||
} | } | ||
+ | |||
+ | /*-------------------------------------------------------- | ||
+ | prod_cust_invoice.inc | ||
+ | --------------------------------------------------------*/ | ||
+ | .row-normalbg { background-color: #fff; } | ||
+ | .row-altbg { background-color: #efefef; } | ||
</pre> | </pre> | ||
[[Category:Templates]] | [[Category:Templates]] |
Latest revision as of 16:24, 28 September 2007
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 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; }