What I would probably suggest would be to create a custom template by using your design for the outside of the template, and the Full/Brownie code for the main body of the template (and the CSS from the full.css for the cart). I haven't tested the code I am going to give you below, but this should give you a good start. Use this example as a guide as well: http://www.shopsite.com/templates/cookbook/tips-notemplatecart.shtml
1. Go to Merchandising > Custom Templates > Shopping Cart > Copy A ShopSite Template, and make a copy of the sc_default template. You can name it whatever you want, such as EU-Cart.sst.
2. In the same area, Merchandising > Custom Template > Shopping Cart > Copy A ShopSite Template, and make a copy of the Full-Cart.sst template.
3. Now you want to mesh the 2 of these templates. In the Full-Cart.sst template, in each section (ie, DEFINE_SHOPPING_CART, DEFINE_SHIPPING, DEFINE_CONFIRMATION, DEFINE_THANK_YOU), you will want to copy everything WITHIN the <article></article> tags, then paste all of that information/code inside the [-- ShoppingCartHeader --] and [-- ShoppingCartFooter --] tags (note, for each section, those tags will be slightly different, for example the next section is [-- ShippingHeader --] and [-- ShippingFooter --].
4. In the code you just copied and just pasted, remove the [-- ShoppingCartHeader --] and [-- ShoppingCart Footer --] tags, so that you don't have duplicates.
5. Next, under Merchandising > Custom Templates > Includes > New Include File, and name it cart.css. The code below SHOULD be all that you need, but I didn't test this, so you might need to make a few tweaks.
cart.css- Code: Select all
form {clear: none;} div.left {text-align: left;} div.right {text-align: right;}
p, div {margin-top: 0px; margin-bottom: 0px;} div {margin-top: 0px; margin-bottom: 0px;} p.center, td.center {text-align: center;}
a {color: #[-- STORE.LinkColor --]; text-decoration: none; outline: 0px;}
a:hover {color: #[-- STORE.VisitedLinkColor --]; text-decoration: underline; outline: 0px;}
img {border: 0px; outline: 0px;} .prodnme img, div#leftimage2 img, div#lefttextb img, div#image2 img, div#textb img, div#imageone img, div#securityimage img, div#paymentlogos img, div#logo-cell img, div#header-center img, div#bodyheaderimg img, div#headerimg img, div#pageimg img, div.item a img, .linkimg img, .prodimg img, div.text img, div.prod_img img, div.wishlist-product-image img, .linkimg img, .linkimgwrap img {width: auto; max-width: 100%;}
.table {display: table;} .table-row {display: table-row;} .table-cell {display: table-cell;}
input[type="text"], input[type=text], input[type="submit"], input[type=submit], input[type="url"], input[type="password"], input[type=password] {outline: 0px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding: 6px 8px; -webkit-appearance: none; border-radius: 0;}
input[type="text"], input[type=text], input[type="password"], input[type=password], input[type="url"], textarea, select, td.payment_value input {border: 1px solid #[-- STORE.Color1 --]; width: 100%; max-width: 300px; font-family: [-- STORE.Font --];}
select {border-radius: 0; padding: 5px 5px 5px 4px; appearance: menu; -moz-appearance: menu; -webkit-appearance: menu;}
input[type="checkbox"], input[type=checkbox], input[type="radio"], input[type=radio] {appearance: menu; -moz-appearance: menu; -webkit-appearance: menu;}
textarea {font-size: 100%; padding: 5px;}
hr {border: 0; height: 1px; padding: 0px; margin: 14px 0px; background-image: -webkit-linear-gradient(left, #FFFFFF, #[-- STORE.Color2 --], #FFFFFF); background-image: -moz-linear-gradient(left, #FFFFFF, #[-- STORE.Color2 --], #FFFFFF); background-image: -ms-linear-gradient(left, #FFFFFF, #[-- STORE.Color2 --], #FFFFFF); background-image: -o-linear-gradient(left, #FFFFFF, #[-- STORE.Color2 --], #FFFFFF);}
.clear {clear: both;} .nowrap {white-space: nowrap;} .hidden, .hideit, a#homeicon {display: none;} .bold, .Bold {font-weight: bold;} .small, .Small, span#showbasket, td.addr_foot, div#emaillist {font-size: 80%;} .large, .big, .Big {font-size: 120%;} .italic {font-style: italic;}
h1, h3, h5 {margin: 0px; padding: 10px 0px; font-weight: normal;}
h2, h4, h6 {margin: 0px; padding: 10px 0px; font-weight: bold;}
article div.alignCentered {text-align: center;}
article div.alignCentered div#pageimg {float: none; clear: both; width: 100%; text-align: center;}
######### Shopping Cart ###################
div#your-shopping-cart-live, div#your-shopping-cart {width: 49%; float: left; clear: none; border: 1px solid #[-- STORE.Color1 --]; text-align: center;}
div#your-shopping-cart-live h1, div#your-shopping-cart h1, div#shipping-paymenttype h1, div#checkoutscreen h1 {background-color: #[-- STORE.BackgroundColor --]; opacity: 0.9; filter: opacity(90); font-size: 120%; border-bottom: 1px solid #[-- STORE.Color1 --]; margin: 0px; padding: 20px 5%; text-align: left; color: #[-- STORE.TextColor --];}
div#total-coupcert {margin: 0px; border-top: 1px solid #[-- STORE.Color1 --]; padding: 20px 5%; text-align: right;}
input.button6, input.button68 {float: left; clear: none;}
div#total-coupcert input.button7 {margin-top: 10px;}
span#coupon {display: block; font-size: 90%; text-align: right;}
span#coupon input[type="text"] {max-width: 60px;}
span#giftcert {display: block; font-size: 90%; text-align: right;}
span#giftcert input[type="text"] {max-width: 100px; clear: right;}
span#giftcert input[type="text"]:nth-child(2) {max-width: 40px;}
.padtop {padding-top: 20px;}
table.cart {width: 90%; margin: 20px 5%; padding: 0px; border-collapse: collapse; border-spacing: 0px; clear: both;}
table.cart td {background: #[-- STORE.SC_ShadeColor --]; width: 1%; padding: 3px 8px; text-align: right; font-size: 90%;}
table.cart .cart_empty {padding: 16px 0px; text-align: center; font-size: 120%;}
table.cart th {font-size: 84%; font-weight: normal; padding: 5px 5px 3px 5px;}
table.cart .cart_image {vertical-align: middle; text-align: center;}
table.cart .cart_name {text-align: left; width: 90%;}
table.cart .cart_price, table.cart .cart_total {text-align: right;}
table.cart .cart_image, table.cart .cart_quantity, table.cart .cart_delete {text-align: center;}
table.cart .cart_quantity input {max-width: 20px;}
.cart td.cart_image, .cart td.cart_name, .cart td.cart_delete, .cart td.cart_sku, .cart td.cart_price, .cart td.cart_total, .cart td.cart_quantity {border-top: 1px solid #FFFFFF;}
table.cart td.cart_op, table.cart td.opt_cart {text-align: left; font-size: 90%;} table.cart textarea {max-width: 200px;} table.table.cart table.opt_cart, table.cart td.opt_cart {padding: 0px; margin: 0px;}
td.totals_saved_txt, td.totals_saved {font-size: 110%; font-weight: bold; color: green;}
table.totals {margin: 0px 2% 0px auto;}
div#checkoutscreen div#totals {display: none; padding: 16px 0px; margin: 0px auto; clear: both; text-align: center;}
div#checkoutscreen div#totals table {margin: 0px auto;}
div#checkoutscreen div#totals table.totals td.totals, div#checkoutscreen table.totals td.totals_txt {display: none;}
div#your-shopping-cart table.cart .cart_sku, div#your-shopping-cart table.cart .cart_price, div#your-shopping-cart table.cart td.cart_op2 {display: none;}
span#coupcertlink {color: #[-- STORE.LinkColor --]; font-size: 90%; display: block; padding: 14px 0px; cursor: pointer;}
span#vieworderlink {display: none; color: #[-- STORE.LinkColor --]; font-size: 90%; padding: 14px 0px; cursor: pointer;}
span#commentslink table {margin: 0px 5%; width: 90%;}
span#commentslink table td {color: #[-- STORE.LinkColor --]; font-size: 90%; padding: 14px 0px; cursor: pointer; text-align: right;}
span#coupcertlink:hover, span#commentslink:hover, span#vieworderlink:hover {color: #[-- STORE.VisitedLinkColor --]; text-decoration: underline;}
span#commentslink table td.comm {display: none;}
table.totals td {padding-top: 3px; padding-bottom: 3px; font-size: 90%; text-align: right;}
table.totals tr td:first-child {padding-right: 15px;}
table.totals td.totals_all_txt, table.totals td.totals_all {font-size: 140%;}
div#orderinginstructions table.instruct {width: 90%; margin: 0px 5%; border-collapse: collapse; border-spacing: 0px;}
div#orderinginstructions table.instruct td {padding: 0px; text-align: left; font-size: 90%; font-weight: bold;}
div#orderinginstructions textarea.instruct {width: 100%; min-width: 100%; margin: 0px 0px 20px 0px;}
div#second-cart-side {width: 49%; float: right; clear: none; padding: 0px;}
div#second-cart-side h5 {background-color: #[-- STORE.TextColor --]; opacity: 0.9; filter: opacity(90); font-size: 120%; margin: 10px 0px 0px 0px; padding: 20px 5%; text-align: left; color: #FFFFFF;}
div#second-cart-side h5.pastsection {margin: 0px 0px 10px 0px;}
div#shipping-paymenttype {border: 1px solid #[-- STORE.Color1 --];}
div#shipoptions {font-size: 90%; border-bottom: 1px solid #[-- STORE.Color1 --]; padding: 20px 5% 50px 5%; text-align: left;}
div#shipoptions td {font-size: 100%;}
div#shipoptions input.button7 {float: right; clear: none;}
div#select-payment {font-size: 90%; padding: 40px 5%; text-align: left;}
div#select-payment input.button8[type="submit"] {width: 100%; max-width: 300px; margin: 20px auto 10px auto; line-height: 30px; height: 32px;}
span#ss_payment, span#showbasket {display: block; text-align: center;}
div#checkoutscreen {border: 1px solid #[-- STORE.Color1 --];}
div#checkoutscreen div.custom1, div#checkoutscreen div.custom2, div#checkoutscreen div.custom3, div#checkoutscreen div.custom4, div#checkoutscreen div.custom5 {padding: 10px 5%;}
table.sql_addr {margin: 20px 0px 10px 25px;}
table.sql_addr td {display: table-row;}
.cr table.addr_name {width: 50px;}
td.addr_foot {padding-bottom: 30px;}
table.sql_addr td.sql_addr_select input {position: relative; top: 25px; left: -25px;}
table.pay_holder {margin: 10px auto; padding: 0px;}
table.pay_holder td {text-align: left;}
td.ship_check, span.email_list {font-size: 90%; line-height: 40px;}
div#comments {padding: 0px 5% 10px 5%; margin: 0px; clear: both; text-align: center; font-size: 90%;} div#comments table.comm {margin: 0px auto; width: 100%;}
div#comments table td.comm_hdr {display: none;}
div#comments textarea {width: 100%; min-width: 100%; margin: 0px 0px 20px 0px;}
div#checkoutscreen table.comm {margin: 20px auto; padding: 0px;}
span.showbasket {display: block; text-align: center; font-size: 90%; line-height: 40px;}
.shipping-screen div#commentsarea {max-width: 100%; overflow: hidden;}
table.addr, table.payment {width: 90%; margin: 0px 5%; padding: 0px; border-collapse: collapse; border-spacing: 0px;}
table.bill_addr, table.ship_addr {border-collapse: collapse; border-spacing: 0px; width: 100%; margin: 10px 0px 0px 0px;}
table.bill_addr td.bill_addr_hdr, table.ship_addr td.ship_addr_hdr, table.payment td.payment_hdr {font-size: 100%; text-align: left; font-weight: bold;}
table.payment td.payment {width: 30%; padding-left: 10px; white-space: nowrap; font-size: 100%;}
table.payment td.payment_value select#selPaytype {max-width: 200px;}
table.payment td.payment_value select.payment {max-width: 90px;}
div#secureimage {margin: 0px; padding: 20px 0px; text-align: center;}
div#secureimage table {margin: 0px auto; padding: 0px;}
table.bill_addr td.addr, table.ship_addr td.addr, table.payment td.payment {width: 30%; padding: 3px 5px 3px 0px; font-size: 90%; white-space: nowrap; text-align: right; font-size: 90%;}
table.bill_addr td.addr_val input, table.ship_addr td.addr_val input, table.payment td.payment_value input, table.bill_addr td.addr_val select, table.ship_addr td.addr_val select, table.payment_value td.payment select {width: 90%;}
table.bill_addr td.addr_val, table.ship_addr td.addr_val, table.payment td.payment_value {padding: 3px 0px; text-indent: 5px; width: 70%; font-size: 90%; text-align: left;}
div#checkoutscreen input.button67[type="submit"] {width: 100%; max-width: 300px; margin: 20px auto 10px auto; line-height: 30px; height: 32px;}
body div.thankyoupage table.payment td.payment_hdr {padding-top: 10px;}
table.ship_logos {margin: 0px; float: left;}
table.ship_logos td.ship_img {text-align: center; vertical-align: middle; width: 25%;}
table.ship_logos td {font-size: 80%; width: 200px; vertical-align: top;}
######### Error Messages ##################
table.checkout_err, table.ups_error, table.inv_err {margin: 10px auto; padding: 0px; border-collapse: collapse; border: 14px solid #[-- STORE.FieldWarnShadeColor --]; border-spacing: 0px; background: #[-- STORE.FieldWarnShadeColor --];}
table.checkout_err td, table.ups_error td, table.inv_err td {vertical-align: middle; text-align: left; padding: 0px; background: #[-- STORE.FieldWarnShadeColor --]; border: 0px; color: #[-- STORE.FieldWarnHighlightColor --];}
table.checkout_err img, table.ups_error img, table.inv_err img {display: none;}
.notice {display: block; width: 80%; text-align: center; padding: 20px 0px; margin: 0px auto; border: 14px solid #[-- STORE.FieldWarnShadeColor --]; background: #[-- STORE.FieldWarnShadeColor --]; color: #[-- STORE.FieldWarnHighlightColor --];}
span.field_warn {color: red; font-weight: bold;} input.field_warn, select.field_warn {border: 1px solid #[-- STORE.FieldWarnHighlightColor --]; background: #[-- STORE.FieldWarnShadeColor --];}
######### Full Width Submit Buttons #######
input[type="submit"].button166, input[type="submit"].button8, input[type="submit"].button162 {display: block; text-align: center; min-width: 150px; width: 90%; max-width: 220px; margin: 10px auto; color: #FFFFFF; font-size: 110%;}
######### Full Width non-Submit Buttons ###
input[type="submit"].button168, input[type="submit"].button169, input[type="submit"].button170, input[type="submit"].button171, input[type="submit"].button172, input[type="submit"].button524 {display: block; text-align: center; width: 90%; max-width: 220px; margin: 10px auto; color: #FFFFFF; font-size: 110%;}
td.view_edit a {display: block; text-align: center; width: 90%; max-width: 220px; margin: 10px auto; color: #FFFFFF; font-size: 110%; padding: 0px;}
######### Small Buttons ###################
input[type="submit"].button164, input[type="submit"].button165, input[type="submit"].button173, input[type="submit"].button185, input[type="submit"].button186, input[type="submit"].button187, input[type="submit"].button188, input[type="submit"].button189, input[type="submit"].button473 {display: inline-block; text-align: center; width: 60px; max-width: 60px; margin: 5px auto; color: #FFFFFF;}
######### Other Buttons ###################
input[type="submit"], input.button183, input.button184 {display: inline-block; text-align: center; max-width: 150px; margin: 5px auto; color: #FFFFFF;}
######### Links To Look Like Buttons ######
body a.printbutton, body .buttonlookalike a {display: inline-block; text-align: center; margin: 5px auto; color: #FFFFFF; font-size: 90%; line-height: 28px; padding: 0px 10px 0px 10px;}
span.ss_wl_Label:hover, a.printbutton:hover, .buttonlookalike a:hover {text-decoration: none;}
body span.ss_wl_Label {display: inline-block; text-align: center; margin: 0px auto; color: #FFFFFF; font-size: 86%; padding: 0px 10px; width: 90px; letter-spacing: 0.4px; position: relative; top: -1px; line-height: 28px;}
######### Plain Text Buttons ##############
.basic-text-link a, .basic-text-link-small a {font-weight: bold; font-size: 90%; color: #[-- STORE.VisitedLinkColor --];}
.basic-text-link-small a {font-size: 90%; font-weight: normal;}
######### UnUsed Text Buttons #############
.unused-text-button {display: block; text-align: right; clear: both; padding: 60px 20px 10px 0px;}
.unused-text-button a, .unused-text-button input, .unused-text-button input.button9 {border: 0px; background: transparent; font-size: 80%; text-decoration: underline; font-weight: bold; color: #[-- STORE.LinkColor --];}
######### Global Button Settings ##########
span.ss_wl_Label::-moz-focus-inner, input[type="submit"].button166::-moz-focus-inner, input[type="submit"].button8::-moz-focus-inner, input[type="submit"].button162::-moz-focus-inner, input[type="submit"].button168::-moz-focus-inner, input[type="submit"].button169::-moz-focus-inner, input[type="submit"].button170::-moz-focus-inner, input[type="submit"].button171::-moz-focus-inner, input[type="submit"].button172::-moz-focus-inner, input[type="submit"].button524::-moz-focus-inner, td.view_edit a::-moz-focus-inner, input[type="submit"].button164::-moz-focus-inner, input[type="submit"].button165::-moz-focus-inner, input[type="submit"].button173::-moz-focus-inner, input[type="submit"].button185::-moz-focus-inner, input[type="submit"].button186::-moz-focus-inner, input[type="submit"].button187::-moz-focus-inner, input[type="submit"].button188::-moz-focus-inner, input[type="submit"].button189::-moz-focus-inner, input[type="submit"].button473::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input.button183::-moz-focus-inner, input.button184::-moz-focus-inner, a.printbutton::-moz-focus-inner, .buttonlookalike a::-moz-focus-inner {border-width: 1px 0; border-style: solid none; border-color: transparent; padding: 0;}
span.ss_wl_Label, input[type="submit"].button166, input[type="submit"].button8, input[type="submit"].button162, input[type="submit"].button168, input[type="submit"].button169, input[type="submit"].button170, input[type="submit"].button171, input[type="submit"].button172, input[type="submit"].button524, td.view_edit a, input[type="submit"].button164, input[type="submit"].button165, input[type="submit"].button173, input[type="submit"].button185, input[type="submit"].button186, input[type="submit"].button187, input[type="submit"].button188, input[type="submit"].button189, input[type="submit"].button473, input[type="submit"], input.button183, input.button184, a.printbutton, .buttonlookalike a {cursor: pointer; padding: 0px 10px 2px; line-height: 24px; height: 26px; background: #[-- STORE.VisitedLinkColor --]; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border: 0px;}
div#article {margin-top: 20px; padding: 20px; background: #FFFFFF; box-shadow: 1px 1px 10px #111111; -moz-box-shadow: 1px 1px 10px #111111; -webkit-box-shadow: 1px 1px 10px #111111;}
div#your-shopping-cart-live h1, div#your-shopping-cart h1, div#shipping-paymenttype h1, div#checkoutscreen h1 {background: #[-- STORE.SC_ShadeColor --];}
table.ship_logos {margin: 30px auto 0px auto; float: none;}
6. Last, in all sections in your EU-Cart.sst template file, before the </head> paste the following tags.
<style type="text/css">[-- INCLUDE cart.css PROCESS --]</style>
That should get you a good start, but you will likely need to make a few tweaks to the code once you get it to this point.