[Grant]

That horrid customer details page on the last page of the checkout was hurting my eyes so I had a play around and came up with this. I've still got a lot of stuff to workout on this page for my site but i thought i'd post this up before I start making too many modifications and it's too hard to back track...

I've left out a few things like the email address and the extra fields call codes but if you need them in there just copy & paste them into this script from your customer_details.tpl

Hope it's useful to somebody

Here's how the standard customer_details.tpl displays :

http://www.wyzeshop.com/screenshot10.gif

Here's how this new sexy one looks :

http://www.wyzeshop.com/screenshot9.gif

Here's how you do it :

1. Create a new file - skin1/customer/main/sexy_customer_details.tpl and put this inside it :

{* $Id: sexy_customer_details.tpl,v 1 2006/06/01 15:15:52 max Exp $ *}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div class="sidebox">
<div class="boxhead"><h2>{$lng.lbl_billing_address}</h2></div>
<div class="boxbody">


{if $userinfo.default_fields.firstname}{$userinfo.b_fi rstname}{if
$userinfo.default_fields.lastname} {$userinfo.b_lastname}{/if}{/if}

{if $userinfo.default_fields.b_address}{$userinfo.b_ad dress}{/if}{if
$userinfo.b_address_2}

{$userinfo.b_address_2}{/if}

{if $userinfo.default_fields.b_city}{$userinfo.b_city} {/if}

{if $userinfo.default_fields.b_state}{$userinfo.b_stat ename} {/if}


{if $userinfo.default_fields.b_country}{$userinfo.b_co untryname} {/if}

{if $userinfo.default_fields.b_zipcode}{$userinfo.b_zi pcode} {/if}
</div>
</div></td>
<td><div class="sidebox">
<div class="boxhead"><h2>{$lng.lbl_shipping_address}</h2></div>
<div class="boxbody">


{if $userinfo.default_fields.firstname}{$userinfo.s_fi rstname}{if
$userinfo.default_fields.lastname} {$userinfo.s_lastname} {/if}{/if}

{if $userinfo.default_fields.s_address}{$userinfo.s_ad dress} {/if}
{if $userinfo.s_address_2}

{$userinfo.s_address_2} {/if}

{if $userinfo.default_fields.s_city}{$userinfo.s_city} {/if}

{if $userinfo.default_fields.s_state}{$userinfo.s_stat ename} {/if}

{if $userinfo.default_fields.s_country}{$userinfo.s_co untryname} {/if}

{if $userinfo.default_fields.s_zipcode}{$userinfo.s_zi pcode} {/if}
</div>
</div></td>
</tr>
</table>

2. Open skin1.css & add the following code right at the bottom :

.sidebox {
margin: 0 auto;
width: 28em;
background: url(images/sbbody-r.gif) no-repeat bottom right;
font-size: 100%;
}
.boxhead {
background: url(images/sbhead-r.gif) no-repeat top right;
margin: 0;
padding: 0;
text-align: left;
}
.boxhead h2 {
background: url(images/sbhead-l.gif) no-repeat top left;
margin: 0;
padding: 22px 30px 5px;
color: white;
font-weight: bold;
font-size: 1.2em;
line-height: 1em;
text-shadow: rgba(0,0,0,.4) 0px 2px 5px;
}
.boxbody {
background: url(images/sbbody-l.gif) no-repeat bottom left;
margin: 0;
padding: 5px 30px 31px;
}

3. Download the following 4 images and put them in your images directory.

http://www.wyzeshop.com/xcartforum/sbbody-l.gif
http://www.wyzeshop.com/xcartforum/sbbody-r.gif
http://www.wyzeshop.com/xcartforum/sbhead-l.gif
http://www.wyzeshop.com/xcartforum/sbhead-r.gif

4. Open skin1/customer/main/checkout.tpl

Find :

{include file="customer/main/customer_details.tpl"}

Replace with :

{include file="customer/main/sexy_customer_details.tpl"}

Best thing about this little mod = if you don't like it just undo step 4 and it will all go back to how it was before