Modify Order Confirmation Email

**lat9** · 4 Jan 2012, 05:06 PM

You'll need to start with the email template for the order confirmation (/email/email_template_checkout.html). That file contains both the html and the css associated with that email.

**sports guy** · 4 Jan 2012, 06:25 PM

Here are the contents of this file: /email/email_template_checkout.html

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=$CHARSET" />
<base href="$BASE_HREF" />

<style type="text/css">
body {background-color:#002142; color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center;}
a:link {color:#0066cc;}
a:hover {background-color:#eeeecc; color:#0066cc;}
a:visited {color:#0066cc;}
.holder {background-color:#f9f9f9; border:1px solid #9a9a9a; font-size:9px; text-align:left; width:550px;}
.header {font-size:10px; padding:10px; width:550px;}
.content {font-size:10px; padding:5px; width:550px;}
.footer {border-top:1px solid #9a9a9a; font-size:9px; text-align:center; width:550px;}
.extra-info {background-color:#cccc99; border:1px dashed #9a9a9a; font-size:10px; margin-top:10px; padding:5px; width:550px;}
.content-line {padding:5px; font-size:10px;}
.content-line-title {font-weight:bold; font-size:11px; padding-top:3px;}
.order-detail-area {background-color:#cbe5fe; border:1px #9a9a9a; width:542px; padding:2px; font-size:10px;}
.product-details {font-size:10px;}
.product-details-num {font-size:10px; font-weight:bold;}
.order-totals-text {font-size:10px; font-weight:bold;}
.order-totals-num {font-size:10px; }
.comments {background-color:#88c3fb; border:1px #9a9a9a; width:542px; padding:2px; font-size:10px;}
.address-block {background-color:#dbdbdb; border:1px solid #9a9a9a; margin-top:3px;}
.address {font-size:10px;}
.payment-detail, .payment-footer {font-size:10px;}
.extra-info {background-color:#cccc99; border:1px solid #9a9a9a; font-size:10px; margin-top:10px; padding:5px; width:550px;}
.extra-info-bold {font-weight:bold;}
.disclaimer {background-color:#f9f9f9; border:1px solid #cccccc; font-size:10px; margin-top:10px; padding:5px; width:550px;}
.disclaimer1 {color:#666666; padding:5px;}
.disclaimer1 a:link {color:#666666;}
.disclaimer1 a:visited {color:#666666;}
.disclaimer2 {color:#666666; padding:5px;}
.copyright {border-bottom:0px solid #9a9a9a; padding:5px;}

</style>
</head>

<body>
<div class="holder">

  <!-- Header Section -->
  <div class="header">
  <img src="email/logo.png" alt="logo" />
  </div>


  <!-- Content Section -->
  <div class="content" style="width: 550px; height: 313px">
    <div class="content-line">
      $EMAIL_TEXT_HEADER <br /><br />
      $EMAIL_FIRST_NAME $EMAIL_LAST_NAME,<br />
      $EMAIL_THANKS_FOR_SHOPPING<br />
      $EMAIL_DETAILS_FOLLOW<br /><br />

      $INTRO_ORDER_NUM_TITLE $INTRO_ORDER_NUMBER<br />
      $INTRO_DATE_TITLE $INTRO_DATE_ORDERED<br />
      <a href="$INTRO_URL_VALUE">$INTRO_URL_TEXT</a>
  </div>
  <div class="content-line"><strong>$PRODUCTS_TITLE</strong></div>
    <div class="order-detail-area">$PRODUCTS_DETAIL</div>
  <div class="order-detail-area">$ORDER_TOTALS</div>

  <div class="comments">$ORDER_COMMENTS</div>

 <div class="content-line"><strong>$HEADING_ADDRESS_INFORMATION</strong></div>
  <div class="address-block">
  <table border="0" width="100%" cellspacing="0" cellpadding="2">
    <tr>
    <td valign="top" width="50%">
      <table border="0" width="100%" cellspacing="0" cellpadding="2">
      <tr>
        <td class="content-line-title"><strong>$ADDRESS_DELIVERY_TITLE</strong></td>
      </tr>
      <tr>
        <td class="address">$ADDRESS_DELIVERY_DETAIL</td>
      </tr>

      <tr>
        <td class="content-line-title"><strong>$SHIPPING_METHOD_TITLE</strong></td>
      </tr>
      <tr>
        <td class="content-line">$SHIPPING_METHOD_DETAIL</td>
      </tr>
      </table>
    </td>
    <td valign="top" width="50%">
      <table border="0" width="100%" cellspacing="0" cellpadding="2">
      <tr>
        <td class="content-line-title">$ADDRESS_BILLING_TITLE</td>
      </tr>
      <tr>
        <td class="address">$ADDRESS_BILLING_DETAIL</td>
      </tr>
      <tr>
        <td class="content-line-title"><strong>$PAYMENT_METHOD_TITLE</strong></td>
      </tr>
      <tr>
        <td class="payment-detail">$PAYMENT_METHOD_DETAIL</td>
      </tr>
      <tr>
        <td class="payment-footer">$PAYMENT_METHOD_FOOTER</td>
      </tr>
      </table>
     </td>
    </tr>
  </table>
 </div>
</div>

  <!-- Footer Section -->
  <div class="footer">
    <div class="copyright">$EMAIL_FOOTER_COPYRIGHT</div>
  </div>

</div>
<div class="disclaimer">
  <div class="disclaimer1">$EMAIL_DISCLAIMER</div>
  <div class="disclaimer2">$EMAIL_SPAM_DISCLAIMER</div>
</div>
</body>
</html>

But as you can see the .order-detail-area and .address-block already have background colors defined, that do not show up in the actual order confirmation email.

**stevesh** · 4 Jan 2012, 06:29 PM

In the image you posted, the background color of the part you want to be lighter is #002142, according to Colorzilla. That (body) is the rule you want to change first, then add that color to the sections you want to be that color. I don't know why the later rules aren't being applied.

**sports guy** · 4 Jan 2012, 07:14 PM

Hmmmm. The background (body) is one of the main components for my template. Please see my website here: http://www.framesforlife.com/ I was able to change the darker boxes to the correct lighter color in every e-mail template (without the background color getting into the way) except for this e-mail. My hope was to just make these two dark boxes white or the correct lighter color. Not to change the background of every other e-mail that I already customized.

If I change the body color then the e-mails are not going to match my template as well. I want the background color blue. I just do not want these two boxes that contain my information to be blue. Couldn't I add some code to my order.php and/or css to make just these two backgrounds lighter? Once again all my other e-mails are already customized and showing properly. This is the only e-mail that the dark blue background comes into play with the dark text.

**sports guy** · 17 Jan 2012, 06:07 PM

Originally Posted by lat9

You'll need to start with the email template for the order confirmation (/email/email_template_checkout.html). That file contains both the html and the css associated with that email.

Thank you, I just changed the background image on this one e-mail to white. All other e-mails display just fine with the blue background.

Thread: Modify Order Confirmation Email

Thread Tools

Search Thread

Display

Hybrid View

Re: Modify Order Confirmation Email

Re: Modify Order Confirmation Email

Re: Modify Order Confirmation Email

Re: Modify Order Confirmation Email

Re: Modify Order Confirmation Email

Similar Threads

v138a Modify Product Details in order confirmation email

Order Confirmation Email content, trying to find and modify...

Modify Order Confirmation Email

Modify Order Confirmation email text for moneyorder payment module

Posting Permissions