shopping cart header color change

[jbogs1]

In the shoping cart... you have a header that starts with quantity, name, sku, each, total.

I have seen other carts that are able to make that entire "header" that contains that info a seperate color.

http://www.hermanstreet.com/ss-bin/sc/order.cgi?rd=1&storeid=*18944052bb7f2c9c5b6dac9a40bd&sbid=SSMSB1301966919.13339&redirect=yes

it breaks it up nice. You'll also notice the "header" color change referencing the total and the dollar amount associated with that total in the above link.

How do you change the color of these 2 areas?

thanks
john

[ShopSite Lauren]

This is something that you can control with CSS. Are you familiar with CSS? If you are, you can view the page source for the cart and grab the field classes to style them the way that you want. If you are not, could you let me know the color that you would like the top header section and the bottom total section to be? I could then setup the CSS for you to copy and paste into your store.

[Jim]

There are styles assigned to those areas.
th class="cart_image">Image</th>
<th class="cart_name">Name</th>
<th class="cart_delete"><input type=image src="http://www.hermanstreet.com/store/shopsite-images/en-US/screen/dotclear.gif" width=1 height=1 border=0 name="Recalculate" alt="Recalculate" onClick="return(CheckIt(7,0));" ></th>
<th class="cart_quantity">Quantity</th>
<th class="cart_price">Price</th>
<th class="cart_total">Total:</th></tr>

and for the totals
<td class="totals_txt">Total:</td>
<td class="totals">$109.90</td>

You just set the style you want for the areas in the css at the top of the page.
Here is the section of their page that defines the css for those areas.
/**********************************/
/*** Table of Products (Cart) ***/
/**********************************/
table.cart {
width: 100%;
padding-top: 1em;
border-collapse: collapse;
border-spacing: 0px;
font-family: "arial", sans-serif;
font-size: 12px;
font-weight: bolder;
border-bottom: 1px solid #b8b8b8;
}

th {
text-align: left;
padding-left: 4px;
color: #ffffff;
background-color: #676767;
}

th.cart_quantity {
text-align: center;
padding-right: 4px;
}

th.cart_price, th.cart_total {
text-align: right;
padding-right: 4px;
}

td.cart_delete, td.cart_cp_delete {
padding: 3px;
width: 50px;
text-align: center;
background-color: #ffffff;
border-top: 1px solid #b8b8b8;
}

td.cart_quantity, td.cart_cp_quantity {
padding: 3px;
width: 70px;
text-align: center;
background-color: #ffffff;
border-top: 1px solid #b8b8b8;
}

td.cart_name, td.cart_cp_name {
padding: 3px;
text-align: left;
background-color: #ffffff;
border-top: 1px solid #b8b8b8;
}

td.cart_sku, td.cart_cp_sku {
padding: 3px;
text-align: left;
background-color: #ffffff;
border-top: 1px solid #b8b8b8;
}

td.cart_price, td.cart_cp_price {
padding: 3px;
font-style: italic;
text-align: right;
background-color: #ffffff;
border-top: 1px solid #b8b8b8;
}

td.cart_total, td.cart_cp_total {
padding: 3px;
text-align: right;
background-color: #ffffff;
white-space: nowrap;
border-top: 1px solid #b8b8b8;
}

td.cart_op {
padding: 3px;
text-align: left;
background-color: #ffffff;
}

td.cart_op1, td.cart_op2 {
padding: 3px;
background-color: #ffffff;
}

td.cart_empty {
padding: 3px;
text-align:center;
background-color: #ffffff;
}

select.cart {
text-align: left;
}

textarea.cart {

vertical-align: middle;
}

/* Delete Item Button */
input.button154 {
color: #ffffff;
cursor: pointer;
}

.cart_image{
border-bottom:1px solid #B8B8B8;
text-align:left;
}

/***************************************/
/*** Table of Totals ***/
/*** Subtotal, Tax, Shipping, etc. ***/
/***************************************/
table.totals {
color: #000000;
border-collapse: collapse;
vertical-align: middle;
text-align: right;
width: 100%;
font-family: "arial", sans-serif;
margin: 0px 0px 0px 0px;
border-spacing: 0px;
}

td.totals_txt, td.totals_saved_txt, td_totals_blank {
text-align: right;
padding-right: 3px;
width: 88%;
font-size: 12px;
}

td.totals, td.totals_saved {
text-align: right;
padding-right: 3px;
font-size: 12px;
}

td.totals_all, td.totals_all_txt {
font-weight: bolder;
font-size: 14px;
text-align: right;
padding-right: 3px;
background-color: #b8b8b8;
}
td.messages {
text-align: left;
padding-right: 3px;
font-size: 11px;
color:b8b8b8;
}

[jbogs1]

Hi Lauren- thank you for your offer. Id like to change those areas to hex D2691E (chocolate)

This is something that you can control with CSS. Are you familiar with CSS? If you are, you can view the page source for the cart and grab the field classes to style them the way that you want. If you are not, could you let me know the color that you would like the top header section and the bottom total section to be? I could then setup the CSS for you to copy and paste into your store.

In the future I'll give it a go my self...

So going forward where is the CSS file located in my cart so I can modify it myself in th efuture?

Thanks Lauren. I appreciate your help!

John

[ShopSite Lauren]

The CSS that you can add into your header field in your cart (Commerce Setup > Order System > Shopping Cart/Checkout/Confirmation/Thank You > text at the top of the shopping cart screen) is listed below. For the actual template CSS, it depends on the template that you are using, so I would need to have the URL to your website or at least know the theme you are using to know what include file to edit for the cart CSS for your store. However, the common CSS file used is under Merchandising > Custom Templates > Includes > Copy ShopSite Include (you can copy your copy and rename it the exact same name as the original to override the original file) > sc_cart.css.

<style type="text/css">
table.cart {
width: 100%;
border-collapse: collapse;
border-spacing: 0px;
border-bottom: 1px solid #D2691E;
}
th {
background-color: #D2691E;
color: #FFFFFF;
font-size: 90%;
}
td.cart_delete, td.cart_cp_delete, td.cart_quantity, td.cart_cp_quantity, td.cart_name, td.cart_cp_name, td.cart_image, td.cart_cp_image, td.cart_sku, td.cart_cp_sku, td.cart_price, td.cart_cp_price, td.cart_total, td.cart_cp_total {
border-top: 1px solid #D2691E;
}
table.totals {
border-collapse: collapse;
border-spacing: 0px;
}
td.totals_all, td.totals_all_txt {
background-color: #D2691E;
color: #FFFFFF;
font-size: 110%;
padding-top: 2px;
padding-bottom: 2px;
}
</style>

[jbogs1]

Hi Lauren- I was able to make a small change in the background of the css but I couldnt figure out the rest.

Here's what I was able to do
http://64.130.23.58/cgi-sys/cgiwrap/jbogs/sc/order.cgi?rd=1&storeid=*0ee0b4900376290b61&sbid=SSMSB1301590884.49561&redirect=yes

Here's what I hope to do
http://64.130.23.58/Desired-HM-cart.pdf

thank you for the help

John

[ShopSite Lauren]

It looks like you are using a custom shopping cart template. Because it is a custom template, I can't know just looking at the code, what ShopSite functions are available. With custom templates, it is up to the designer of the template how many of the built in ShopSite functions are used. So I will give two responses to all the functionality questions, one for if the custom template is using the ShopSite functionality, and one for if the custom template is not using the ShopSite functionality.

-- Adding the Product Image to Cart Table
1. With the ShopSite field, you can go to Commerce Setup > Order System > Layout Info, and check the checkbox to display the product graphic on your shopping cart page. Note, I would not check the checkbox to display the graphic on the checkout screen, because the focus once you get to the checkout screen are the payment fields. You do not want to take up too much space with the product images on the checkout pages.
2. In your template, you can change the [-- SC_Cart --] tag with [-- SC_Cart image name delete quantity price total --]. You will want to still check the checkbox to display the images (#1 above), and you will want to replace the [-- SC_Cart --] tag 4 - 5 times in the shopping cart template (there are 5 sections that have this information).

-- Adding "International Orders" text.
1 and 2. You can go to Preferences > Store Text > Shopping Cart, and add your own text to the "Any changes above should be verified by pressing 'Recalculate' before clicking on 'Checkout'." text field. You could have something similar to:
Any changes above should be verified by pressing 'Recalculate' before clicking on 'Checkout'.
<br><b>International Orders</b> - Please contact us for shipping details.

-- Move shipping area
1. can't move this in the ShopSite backoffice
2. In your custom template, within the DEFINE Shopping_Cart section, you will want to change the following:
<tr>
<td align="right">
<table border="0" cellpadding="0" cellspacing="0" style="line-height:150%">
<tr>
<td align="left" valign="top">
<!-- Table for the shipping and tax selections etc. -->
<br>[-- SC_Tax_Shipping --]
[-- SC_Surcharge --]
[-- IF SC_VAT_ID --][-- SC_VAT_ID --][-- END_IF --]
</td>
<td width="20px">&nbsp;</td>
<td valign="top">
<!-- Table for totals, etc. -->
[-- SC_Totals --]
</td>
</tr>
</table>
</td>
</tr>

change it to:
<tr>
<td align="right">
[-- SC_Totals --]
<br>
[-- SC_Tax_Shipping --]
[-- SC_Surcharge --]
[-- IF SC_VAT_ID --][-- SC_VAT_ID --][-- END_IF --]
</td>
</tr>

-- Adding CSS for controlling the shading in the cart
1. add the CSS below into the "text at the top of the shopping cart screen" by going to Commerce Setup > Order System > Shopping Cart.
2. Add the CSS below into your own CSS file that is used on all pages including the cart pages (you can access this file through FTP) at: http://64.130.23.58/shopping/publish/style.css
<style type="text/css">
table.cart {
width: 100%;
border-collapse: collapse;
border-spacing: 0px;
border-bottom: 1px solid #D2691E;
}
th {
background-color: #D2691E;
color: #FFFFFF;
font-size: 90%;
}
td.cart_delete, td.cart_cp_delete, td.cart_quantity, td.cart_cp_quantity, td.cart_name, td.cart_cp_name, td.cart_image, td.cart_cp_image, td.cart_sku, td.cart_cp_sku, td.cart_price, td.cart_cp_price, td.cart_total, td.cart_cp_total {
border-top: 1px solid #D2691E;
}
table.totals {
border-collapse: collapse;
border-spacing: 0px;
}
td.totals_all, td.totals_all_txt {
background-color: #D2691E;
color: #FFFFFF;
font-size: 110%;
padding-top: 2px;
padding-bottom: 2px;
}
</style>

[jbogs1]

Hi Lauren thanks. Couple questions for clarification please

1.) see 64.130.23.58/current-page-cart.pdf For some reason the column moved to the middle of the page and it really should move closer to the #'s. You'll see what I mean in the PDF. This occured based on your earlier suggestion.

2.) on the next page in the cart process I also need to correct the background (see 64.130.23.58/next-page-cart.pdf ) I tried to model your earlier step in this case and no luck.

Once we button this up we are about ready to go live.

Thanks
John

[ShopSite Lauren]

1. The totals table is now 100% of the page (so that the totals bar color goes across the whole page), so you will want to add some CSS so that the left column is 100% and the right column does not wrap:

<style type="text/css">
table.totals td {white-space: nowrap;}
td.totals_txt {width: 100%;}
</style>

2. Where did you add the CSS for the cart? If you add it into your CSS files for your site, then it will apply to all cart pages. If you added it into the header field (text at the top of the screen) then you will need to do that for all pages of the checkout. If you added it into the ShopSite sc_cart.css file, then it is likely that whoever created your custom shopping cart template used the sc_shipping.css for the checkout page, and the sc_thankyou.css for the confirmation and thank you screens so you will need to either add the same CSS code to both of those files, or in your shopping cart template replace sc_shipping.css and sc_thankyou.css with sc_cart.css.