Modifying cart system styles

From Sohowiki
(Difference between revisions)
Jump to: navigation, search
(Overview)
(Default styles)
Line 86: Line 86:
 
   width: 275px;
 
   width: 275px;
 
}
 
}
 +
 +
/*--------------------------------------------------------
 +
prod_cust_invoice.inc
 +
--------------------------------------------------------*/
 +
.row-normalbg { background-color: #fff; }
 +
.row-altbg { background-color: #efefef; }
 
</pre>
 
</pre>
 
[[Category:Templates]]
 
[[Category:Templates]]

Revision as of 17:35, 23 January 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.

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 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; }
Personal tools