- Created by Steven Reynolds, last modified by Katie Price on Nov 12, 2020
You are viewing an old version of this page. View the current version.
Compare with Current View Page History
« Previous Version 4 Next »
ESN Template Code
Expand source
<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>
- No labels