Skip to content

Instantly share code, notes, and snippets.

@kkszysiu

kkszysiu/sample_template.html Secret

Created August 19, 2019 01:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kkszysiu/0dca4715dd55b66e4c7e23478411727c to your computer and use it in GitHub Desktop.
Save kkszysiu/0dca4715dd55b66e4c7e23478411727c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
sample_template.html
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- This is a simple example template that you can edit to create your own custom templates -->
<!--[if gte mso 15]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>*|MC:SUBJECT|*</title>
<style type="text/css">
p{
margin:1em 0;
padding:0;
}
table{
border-collapse:collapse;
}
h1,h2,h3,h4,h5,h6{
display:block;
margin:0;
padding:0;
}
img,a img{
border:0;
height:auto;
outline:none;
text-decoration:none;
}
body,#bodyTable,#bodyCell{
height:100%;
margin:0;
padding:0;
width:100%;
}
#outlook a{
padding:0;
}
img{
-ms-interpolation-mode:bicubic;
}
table{
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
.ReadMsgBody{
width:100%;
}
.ExternalClass{
width:100%;
}
p,a,li,td,blockquote{
mso-line-height-rule:exactly;
}
a[href^=tel],a[href^=sms]{
color:inherit;
cursor:default;
text-decoration:none;
}
p,a,li,td,body,table,blockquote{
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
.ExternalClass,.ExternalClass p,.ExternalClass td,.ExternalClass div,.ExternalClass span,.ExternalClass font{
line-height:100%;
}
a[x-apple-data-detectors]{
color:inherit !important;
text-decoration:none !important;
font-size:inherit !important;
font-family:inherit !important;
font-weight:inherit !important;
line-height:inherit !important;
}
#bodyCell{
padding:9px;
}
.templateImage{
height:auto;
max-width:564px;
}
.templateContainer{
max-width:600px !important;
}
#templatePreheader{
padding-right:9px;
padding-left:9px;
}
#templatePreheader .columnContainer td{
padding:0 9px;
}
#footerContent{
padding-top:27px;
padding-bottom:18px;
}
#templateHeader,#templateBody,#templateFooter{
padding-right:18px;
padding-left:18px;
}
/*
@tab Page
@section Background Style
*/
body,#bodyTable{
/*@editable*/background-color:#FAFAFA;
}
/*
@tab Page
@section Email Border
*/
.templateContainer{
/*@editable*/border:0;
}
/*
@tab Page
@section Heading 1
*/
h1{
/*@editable*/color:#222222;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:40px;
/*@editable*/font-style:normal;
/*@editable*/font-weight:bold;
/*@editable*/line-height:150%;
/*@editable*/letter-spacing:normal;
/*@editable*/text-align:left;
}
/*
@tab Page
@section Heading 2
*/
h2{
/*@editable*/color:#222222;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:28px;
/*@editable*/font-style:normal;
/*@editable*/font-weight:bold;
/*@editable*/line-height:150%;
/*@editable*/letter-spacing:normal;
/*@editable*/text-align:left;
}
/*
@tab Page
@section Heading 3
*/
h3{
/*@editable*/color:#444444;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:22px;
/*@editable*/font-style:normal;
/*@editable*/font-weight:bold;
/*@editable*/line-height:150%;
/*@editable*/letter-spacing:normal;
/*@editable*/text-align:left;
}
/*
@tab Page
@section Heading 4
*/
h4{
/*@editable*/color:#999999;
/*@editable*/font-family:Georgia;
/*@editable*/font-size:20px;
/*@editable*/font-style:italic;
/*@editable*/font-weight:normal;
/*@editable*/line-height:150%;
/*@editable*/letter-spacing:normal;
/*@editable*/text-align:left;
}
/*
@tab Preheader
@section Preheader Style
*/
#templatePreheader{
/*@editable*/background-color:#FAFAFA;
/*@editable*/background-image:none;
/*@editable*/background-repeat:no-repeat;
/*@editable*/background-position:center;
/*@editable*/background-size:cover;
/*@editable*/border-top:0;
/*@editable*/border-bottom:0;
/*@editable*/padding-top:9px;
/*@editable*/padding-bottom:9px;
}
/*
@tab Preheader
@section Preheader Text
*/
#templatePreheader,#templatePreheader p{
/*@editable*/color:#656565;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:12px;
/*@editable*/line-height:150%;
/*@editable*/text-align:left;
}
/*
@tab Preheader
@section Preheader Link
*/
#templatePreheader a,#templatePreheader p a{
/*@editable*/color:#656565;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
/*
@tab Header
@section Header Style
*/
#templateHeader{
/*@editable*/background-color:#FFFFFF;
/*@editable*/background-image:none;
/*@editable*/background-repeat:no-repeat;
/*@editable*/background-position:center;
/*@editable*/background-size:cover;
/*@editable*/border-top:0;
/*@editable*/border-bottom:0;
/*@editable*/padding-top:18px;
/*@editable*/padding-bottom:0;
}
/*
@tab Header
@section Header Text
*/
#templateHeader,#templateHeader p{
/*@editable*/color:#606060;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:16px;
/*@editable*/line-height:150%;
/*@editable*/text-align:left;
}
/*
@tab Header
@section Header Link
*/
#templateHeader a,#templateHeader p a{
/*@editable*/color:#237A91;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
/*
@tab Body
@section Body Style
*/
#templateBody{
/*@editable*/background-color:#FFFFFF;
/*@editable*/background-image:none;
/*@editable*/background-repeat:no-repeat;
/*@editable*/background-position:center;
/*@editable*/background-size:cover;
/*@editable*/border-top:0;
/*@editable*/border-bottom:2px solid #EAEAEA;
/*@editable*/padding-top:0;
/*@editable*/padding-bottom:9px;
}
/*
@tab Body
@section Body Text
*/
#templateBody,#templateBody p{
/*@editable*/color:#606060;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:16px;
/*@editable*/line-height:150%;
/*@editable*/text-align:left;
}
/*
@tab Body
@section Body Link
*/
#templateBody a,#templateBody p a{
/*@editable*/color:#237A91;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
/*
@tab Footer
@section Footer Style
*/
#templateFooter{
/*@editable*/background-color:#FAFAFA;
/*@editable*/background-image:none;
/*@editable*/background-repeat:no-repeat;
/*@editable*/background-position:center;
/*@editable*/background-size:cover;
/*@editable*/border-top:0;
/*@editable*/border-bottom:0;
/*@editable*/padding-top:36px;
/*@editable*/padding-bottom:9px;
}
/*
@tab Footer
@section Social Bar Style
*/
#socialBar{
/*@editable*/background-color:#333333;
/*@editable*/border:0;
/*@editable*/padding:18px;
}
/*
@tab Footer
@section Social Bar Text
*/
#socialBar,#socialBar p{
/*@editable*/color:#FFFFFF;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:12px;
/*@editable*/line-height:150%;
/*@editable*/text-align:center;
}
/*
@tab Footer
@section Social Bar Link
*/
#socialBar a,#socialBar p a{
/*@editable*/color:#FFFFFF;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
/*
@tab Footer
@section Footer Text
*/
#footerContent,#footerContent p{
/*@editable*/color:#656565;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:12px;
/*@editable*/line-height:150%;
/*@editable*/text-align:center;
}
/*
@tab Footer
@section Footer Link
*/
#footerContent a,#footerContent p a{
/*@editable*/color:#656565;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
/*
@tab Footer
@section Utility Bar Style
*/
#utilityBar{
/*@editable*/background-color:#FAFAFA;
/*@editable*/border:0;
/*@editable*/padding-top:9px;
/*@editable*/padding-bottom:9px;
}
/*
@tab Footer
@section Utility Bar Text
*/
#utilityBar,#utilityBar p{
/*@editable*/color:#656565;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:12px;
/*@editable*/line-height:150%;
/*@editable*/text-align:center;
}
/*
@tab Footer
@section Utility Bar Link
*/
#utilityBar a,#utilityBar p a{
/*@editable*/color:#656565;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
@media only screen and (max-width: 480px){
body,table,td,p,a,li,blockquote{
-webkit-text-size-adjust:none !important;
}
} @media only screen and (max-width: 480px){
body{
width:100% !important;
min-width:100% !important;
}
} @media only screen and (max-width: 480px){
.templateImage{
width:100% !important;
}
} @media only screen and (max-width: 480px){
.columnContainer{
max-width:100% !important;
width:100% !important;
}
} @media only screen and (max-width: 480px){
.mobileHide{
display:none;
}
} @media only screen and (max-width: 480px){
.utilityLink{
display:block;
padding:9px 0;
}
} @media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Heading 1
*/
h1{
/*@editable*/font-size:22px !important;
/*@editable*/line-height:175% !important;
}
} @media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Heading 2
*/
h2{
/*@editable*/font-size:20px !important;
/*@editable*/line-height:175% !important;
}
} @media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Heading 3
*/
h3{
/*@editable*/font-size:18px !important;
/*@editable*/line-height:175% !important;
}
} @media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Heading 4
*/
h4{
/*@editable*/font-size:16px !important;
/*@editable*/line-height:175% !important;
}
} @media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Preheader Visibility
*/
#templatePreheader{
/*@editable*/display:block !important;
}
} @media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Preheader Text
*/
#templatePreheader,#templatePreheader p{
/*@editable*/font-size:14px !important;
/*@editable*/line-height:150% !important;
}
} @media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Header Text
*/
#templateHeader,#templateHeader p{
/*@editable*/font-size:16px !important;
/*@editable*/line-height:150% !important;
}
} @media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Body Text
*/
#templateBody,#templateBody p{
/*@editable*/font-size:16px !important;
/*@editable*/line-height:150% !important;
}
} @media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Footer Text
*/
#templateFooter,#templateFooter p{
/*@editable*/font-size:14px !important;
/*@editable*/line-height:150% !important;
}
} @media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Social Bar Text
*/
#socialBar,#socialBar p{
/*@editable*/font-size:14px !important;
/*@editable*/line-height:150% !important;
}
} @media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Utility Bar Text
*/
#utilityBar,#utilityBar p{
/*@editable*/font-size:14px !important;
/*@editable*/line-height:150% !important;
}
}</style></head>
<body>
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- BEGIN TEMPLATE // -->
<!--[if gte mso 9]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;">
<tr>
<td align="center" valign="top" width="600" style="width:600px;">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer">
<!-- BEGIN PREHEADER // -->
<tr>
<td valign="top" id="templatePreheader">
<!-- BEGIN MODULE: STANDARD PREHEADER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top">
<!--[if mso]>
</td>
<td valign="top" width="180" style="width:180px;">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="max-width:180px;" width="100%" class="columnContainer">
<tr>
<td valign="top">
<div mc:edit="preheader_rightcol_content">
<p><a href="*|ARCHIVE|*" target="_blank">View email in your browser</a></p>
</div>
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!-- // END MODULE: STANDARD PREHEADER -->
</td>
</tr>
<!-- // END PREHEADER -->
<!-- BEGIN BODY // -->
<tr>
<td valign="top" id="templateBody">
<div mc:edit="posts_list_mustache">
{{#posts_list}}
{{#image600x}}
<a href="{{ original_post_url }}"><img src="{{image600x}}"></a>
{{/image600x}}
{{#header}}
<div style="padding:0px 40px 0;">
<a href="{{ post_url }}" target="_blank">{{ header }}</a>
{{/header}}
</div>
<div class="post-body before-listicle">
{{{ before_listicle }}}
</div>
<div class="post-body listicle">
<table cellspacing="0" cellpadding="0">
{{#listicle_items_list}}
<tr>
<td style="padding:0 40px;">
<table cellspacing="0" cellpadding="0">
<tr>
<td width="50%" style="vertical-align:top;">
{{#is_image}}<img src="{{image600x}}" alt="">{{/is_image}}
{{^is_image}}{{#media_html}}{{{ media_html }}}{{/media_html}}{{/is_image}}
</td>
<td width="50%" style="padding-left:20px;vertical-align:top;">
{{#headline}}
<p>{{headline}}</p>
{{/headline}}
{{#body}}
{{{ body }}}
{{/body}}
</td>
</tr>
<tr>
<td style="height:20px;"></td>
<td></td>
</tr>
</table>
</td>
</tr>
{{/listicle_items_list}}
</table>
</div>
<div class="post-body after-listicle">
{{{ after_listicle }}}
</div>
{{/posts_list}}
</div>
</td>
</tr>
<!-- // END BODY -->
<!-- BEGIN FOOTER // -->
<tr>
<td valign="top" id="templateFooter">
<!-- BEGIN MODULE: STANDARD FOOTER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" id="socialBar">
<div mc:edit="social_bar">
<a href="*|TWITTER:PROFILEURL|*" class="utilityLink">Follow on Twitter</a><span class="mobileHide"> &nbsp; | &nbsp; </span><a href="*|FACEBOOK:PROFILEURL|*" class="utilityLink">Friend on Facebook</a>
<span class="mobileHide"> &nbsp; | &nbsp; </span><a href="*|FORWARD|*" class="utilityLink">Forward to a Friend</a>
</div>
</td>
</tr>
<tr>
<td valign="top" id="footerContent">
<div mc:edit="footer_content">
*|IF:LIST|*
<em>Copyright &copy; *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.</em>
<br>
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
*|LIST:DESCRIPTION|*
<br>
<strong>Our mailing address is:</strong>
<br> *|HTML:LIST_ADDRESS_HTML|*
<br>
<!-- *|END:IF|* -->
*|ELSE:|*
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
<em>Copyright &copy; *|CURRENT_YEAR|* *|USER:COMPANY|*, All rights reserved.</em>
<br>
<strong>Our mailing address is:</strong>
<br> *|USER:ADDRESS_HTML|*
<!-- *|END:IF|* -->
*|END:IF|*
</div>
<div mc:edit="monkeyrewards">
*|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*
</div>
</td>
</tr>
<tr>
<td valign="top" id="utilityBar">
<div mc:edit="utility_bar">
<a href="*|UNSUB|*" class="utilityLink">unsubscribe from this list</a><span class="mobileHide"> | </span><a href="*|UPDATE_PROFILE|*" class="utilityLink">update subscription preferences</a>
<!-- *|IFNOT:ARCHIVE_PAGE|* --><span class="mobileHide"> | </span><a href="*|ARCHIVE|*" class="utilityLink">view email in browser</a>
<!-- *|END:IF|* -->
</div>
</td>
</tr>
</table>
<!-- // BEGIN MODULE: STANDARD FOOTER -->
</td>
</tr>
<!-- // END FOOTER -->
</table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment