ESN - HTML Template

ESN Template Code

Template Code
<html>
<style type="text/css">
/*////// RESET STYLES //////*/
body, #bodyTable, #bodyCell {
height: 100% !important;
margin: 0;efm
padding: 0;
width: 100% !important;
}

table {
border-collapse: collapse;
}

img, a img {
border: 0;
outline: none;
text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}

p {
margin: 1em 0;
}
/*////// CLIENT-SPECIFIC STYLES //////*/
.ReadMsgBody {
width: 100%;
}

.ExternalClass {
width: 100%;
}
/* Force Hotmail/Outlook.com to display emails at full width. */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;
}
/* Force Hotmail/Outlook.com to display line heights normally. */
table, td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* Remove spacing between tables in Outlook 2007 and up. */
#outlook a {
padding: 0;
}
/* Force Outlook 2007 and up to provide a "view in browser" message. */
img {
-ms-interpolation-mode: bicubic;
}
/* Force IE to smoothly render resized images. */
body, table, td, p, a, li, blockquote {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
/*////// FRAMEWORK STYLES //////*/
.flexibleContainerCell {
padding-top: 20px;
padding-Right: 20px;
padding-Left: 20px;
}

.flexibleImage {
height: auto;
}

.bottomShim {
padding-bottom: 20px;
}

.imageContent, .imageContentLast {
padding-bottom: 20px;
}

.nestedContainerCell {
padding-top: 20px;
padding-Right: 20px;
padding-Left: 20px;
}
/*////// GENERAL STYLES //////*/
body, #bodyTable {
background-color: #F5F5F5;
}

#bodyCell {
padding-top: 40px;
padding-bottom: 40px;
}



/*-------------BACKGROUND COLOUR--------------*/
#emailBody {
background-color: #F7F7F7;
border: 1px solid #DDDDDD;
border-collapse: separate;
border-radius: 4px;
}


h1, h2, h3, h4, h5, h6 {
color: #202020;
font-family: Helvetica;
font-size: 20px;
line-height: 125%;
text-align: Left;
}

.textContent, .textContentLast {
color: #404040;
font-family: Helvetica;
font-size: 16px;
line-height: 125%;
text-align: Left;
padding-bottom: 20px;
}

.textContent a, .textContentLast a {
color: #2C9AB7;
text-decoration: underline;
}


/*-------------CONTENT BOX COLOUR--------------*/
.nestedContainer {
background-color: #E5E5E5;
border: 1px solid #CCCCCC;
}




/*-------------BUTTON COLOUR--------------*/ 
.emailButton {
background-color: #442983;
border-collapse: separate;
border-radius: 4px;
}



/*-------------BUTTON TEXT COLOUR--------------*/
.buttonContent {
color: #FFFFFF;
font-family: Helvetica;
font-size: 18px;
font-weight: bold;
line-height: 100%;
padding: 15px;
text-align: center;
}



.buttonContent a {
color: #FFFFFF;
display: block;
text-decoration: none;
}

.emailCalendar {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
}

.emailCalendarMonth {
background-color: #2C9AB7;
color: #FFFFFF;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}

.emailCalendarDay {
color: #2C9AB7;
font-family: Helvetica, Arial, sans-serif;
font-size: 60px;
font-weight: bold;
line-height: 100%;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
/*////// MOBILE STYLES //////*/
@media only screen and (max-width: 600px) {
/*////// CLIENT-SPECIFIC STYLES //////*/
body {
width: 100% !important;
min-width: 100% !important;
}
/* Force iOS Mail to render the email at full width. */
/*////// FRAMEWORK STYLES //////*/
/*
CSS selectors are written in attribute
selector format to prevent Yahoo Mail
from rendering media query styles on
desktop.
*/
table[id="emailBody"], table[class="flexibleContainer"] {
width: 100% !important;
}
/*
The following style rule makes any
image classed with 'flexibleImage'
fluid when the query activates.
Make sure you add an inline max-width
to those images to prevent them
from blowing out.
*/
img[class="flexibleImage"] {
height: auto !important;
width: 100% !important;
}
/*
Make buttons in the email span the
full width of their container, allowing
for left- or right-handed ease of use.
*/
table[class="emailButton"] {
width: 100% !important;
}

td[class="buttonContent"] {
padding: 0 !important;
}

td[class="buttonContent"] a {
padding: 15px !important;
}

td[class="textContentLast"], td[class="imageContentLast"] {
padding-top: 20px !important;
}
/*////// GENERAL STYLES //////*/
td[id="bodyCell"] {
padding-top: 10px !important;
padding-Right: 10px !important;
padding-Left: 10px !important;
}
}
</style>
<body>
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- EMAIL CONTAINER // -->
<!--
The table "emailBody" is the email's container.
Its width can be set to 100% for a color band
that spans the width of the page.
-->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="emailBody">
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<!--
The table cell imageContent has padding
applied to the bottom as part of the framework,
ensuring images space correctly in Android Gmail.
-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" class="imageContent">
<img src="http://enodo-ftp.cloudapp.net/Distributors/Images/ESN/TemplateImage.png"class="flexibleImage" style="max-width:560px;" />
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<!--
To move or duplicate any of the design patterns
in this email, simply move or copy the entire
MODULE ROW section for each content block.
-->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<!--
The centering table keeps the content
tables centered in the emailBody table,
in case its width is set to 100%.
-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<!--
The flexible container has a set width
that gets overridden by the media query.
Most content tables within can then be
given 100% widths.
-->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<!--
The content table is the first element
that's entirely separate from the structural
framework of the email.
-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="textContent">
<h3>Success!</h3>
<br />
Your recent order has been despatched today and is on its way.
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<!--
To move or duplicate any of the design patterns
in this email, simply move or copy the entire
MODULE ROW section for each content block.
-->
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell bottomShim">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="nestedContainer">
<tr>
<td align="center" valign="top" class="nestedContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="textContent">
<h3>Shipping To:</h3>
<br />
{Receiver}
<br />
{Instructions}
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell bottomShim">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="nestedContainer">
<tr>
<td align="center" valign="top" class="nestedContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="textContent">
<h3>Tracking:</h3>
<br />
Your recent order will be delivered to you by {CarrierName} under tracking number {Connote}.
</td>
</tr>
<tr>
<td align="center" valign="top" class="bottomShim">
<table border="0" cellpadding="0" cellspacing="0" width="260" class="emailButton">
<tr>
<td align="center" valign="middle" class="buttonContent">
<a href="https://trackingtool.efmlogistics.com.au/?id={Connote}&account=118562" target="_blank">Track My Order</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell bottomShim">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="nestedContainer">
<tr>
<td align="center" valign="top" class="nestedContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="textContent">
<h3>Questions:</h3>
Please contact efm logistics if your enquiry is related to the transport of the goods.
</td>
</tr>
<tr>
<td align="center" valign="top" class="bottomShim">
<table border="0" cellpadding="0" cellspacing="0" width="260" class="emailButton">
<tr>
<td align="center" valign="middle" class="buttonContent">
<a href="mailto:enquiries@efmlogistics.com.au?subject=Consignment Enquiry: {Connote}">Email efm</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" class="textContent">
Alternatively if your enquiry is related to the product, please contact CUSTOMER on [CUSTOMER CONTACT DETAILS].
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<!--
To move or duplicate any of the design patterns
in this email, simply move or copy the entire
MODULE ROW section for each content block.
-->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<!--
The centering table keeps the content
tables centered in the emailBody table,
in case its width is set to 100%.
-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<!--
The flexible container has a set width
that gets overridden by the media query.
Most content tables within can then be
given 100% widths.
-->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<!--
The content table is the first element
that's entirely separate from the structural
framework of the email.
-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="textContent">
Thank you for your recent transaction.
<br /><br />
<h3>{Sender}</h3>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<!--
The table cell imageContent has padding
applied to the bottom as part of the framework,
ensuring images space correctly in Android Gmail.
-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="imageContent">
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
</table>
<!-- // EMAIL CONTAINER -->
</td>
</tr>
</table>
</center>
</body>
</html>