Created
May 9, 2017 20:14
-
-
Save jasonhobbsllc/f0a354f7d005c44be47e64ad397b0500 to your computer and use it in GitHub Desktop.
Example of the xml file for the email design template within Rainmaker Platform.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml"> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
<meta name="viewport" content="width=device-width" /> | |
<title></title> | |
<style type="text/css"> | |
/********************************************** | |
* Ink v1.0.5 - Copyright 2013 ZURB Inc * | |
**********************************************/ | |
/* Client-specific Styles and Reset */ | |
#outlook a { | |
padding:0; | |
} | |
body{ | |
background: #f5f5f5; | |
width:100% !important; | |
min-width: 100%; | |
-webkit-text-size-adjust:100%; | |
-ms-text-size-adjust:100%; | |
margin:0; | |
padding:0; | |
} | |
.ExternalClass { | |
width:100%; | |
} | |
.ExternalClass, | |
.ExternalClass p, | |
.ExternalClass span, | |
.ExternalClass font, | |
.ExternalClass td, | |
.ExternalClass div { | |
line-height: 100%; | |
} | |
#backgroundTable { | |
margin:0; | |
padding:0; | |
width:100% !important; | |
line-height: 100% !important; | |
} | |
img { | |
outline:none; | |
text-decoration:none; | |
-ms-interpolation-mode: bicubic; | |
width: auto; | |
max-width: 100%; | |
clear: both; | |
display: block; | |
} | |
center { | |
width: 100%; | |
min-width: 580px; | |
} | |
a img { | |
border: none; | |
} | |
p { | |
margin: 0 0 0 10px; | |
} | |
table { | |
border-spacing: 0; | |
border-collapse: collapse; | |
} | |
td { | |
-webkit-hyphens: auto; | |
-moz-hyphens: auto; | |
hyphens: auto; | |
border-collapse: collapse !important; | |
} | |
table, tr, td { | |
padding: 0; | |
vertical-align: top; | |
text-align: left; | |
} | |
hr { | |
color: #d9d9d9; | |
background-color: #d9d9d9; | |
height: 1px; | |
border: none; | |
} | |
/* Responsive Grid */ | |
table.body { | |
height: 100%; | |
width: 100%; | |
} | |
table.container { | |
background: #fff; | |
width: 580px; | |
margin: 0 auto 40px; | |
text-align: inherit; | |
} | |
table.row { | |
padding: 0px; | |
width: 100%; | |
position: relative; | |
} | |
table.container table.row { | |
display: block; | |
} | |
td.wrapper { | |
padding: 0px 40px 0px 0px; | |
position: relative; | |
} | |
table.columns, | |
table.column { | |
margin: 0 auto; | |
} | |
table.columns td, | |
table.column td { | |
padding: 0px 0px 20px; | |
} | |
table.columns td.sub-columns, | |
table.column td.sub-columns, | |
table.columns td.sub-column, | |
table.column td.sub-column { | |
padding-right: 10px; | |
} | |
td.sub-column, td.sub-columns { | |
min-width: 0px; | |
} | |
table.row td.last, | |
table.container td.last { | |
padding-right: 0px; | |
} | |
table.one { width: 30px; } | |
table.two { width: 80px; } | |
table.three { width: 130px; } | |
table.four { width: 180px; } | |
table.five { width: 230px; } | |
table.six { width: 280px; } | |
table.seven { width: 330px; } | |
table.eight { width: 380px; } | |
table.nine { width: 430px; } | |
table.ten { width: 480px; } | |
table.eleven { width: 530px; } | |
table.twelve { width: 580px; } | |
table.one center { min-width: 30px; } | |
table.two center { min-width: 80px; } | |
table.three center { min-width: 130px; } | |
table.four center { min-width: 180px; } | |
table.five center { min-width: 230px; } | |
table.six center { min-width: 280px; } | |
table.seven center { min-width: 330px; } | |
table.eight center { min-width: 380px; } | |
table.nine center { min-width: 430px; } | |
table.ten center { min-width: 480px; } | |
table.eleven center { min-width: 530px; } | |
table.twelve center { min-width: 580px; } | |
table.one .panel center { min-width: 10px; } | |
table.two .panel center { min-width: 60px; } | |
table.three .panel center { min-width: 110px; } | |
table.four .panel center { min-width: 160px; } | |
table.five .panel center { min-width: 210px; } | |
table.six .panel center { min-width: 260px; } | |
table.seven .panel center { min-width: 310px; } | |
table.eight .panel center { min-width: 360px; } | |
table.nine .panel center { min-width: 410px; } | |
table.ten .panel center { min-width: 460px; } | |
table.eleven .panel center { min-width: 510px; } | |
table.twelve .panel center { min-width: 560px; } | |
.body .columns td.one, | |
.body .column td.one { width: 8.333333%; } | |
.body .columns td.two, | |
.body .column td.two { width: 16.666666%; } | |
.body .columns td.three, | |
.body .column td.three { width: 25%; } | |
.body .columns td.four, | |
.body .column td.four { width: 33.333333%; } | |
.body .columns td.five, | |
.body .column td.five { width: 41.666666%; } | |
.body .columns td.six, | |
.body .column td.six { width: 50%; } | |
.body .columns td.seven, | |
.body .column td.seven { width: 58.333333%; } | |
.body .columns td.eight, | |
.body .column td.eight { width: 66.666666%; } | |
.body .columns td.nine, | |
.body .column td.nine { width: 75%; } | |
.body .columns td.ten, | |
.body .column td.ten { width: 83.333333%; } | |
.body .columns td.eleven, | |
.body .column td.eleven { width: 91.666666%; } | |
.body .columns td.twelve, | |
.body .column td.twelve { width: 100%; } | |
td.offset-by-one { padding-left: 50px; } | |
td.offset-by-two { padding-left: 100px; } | |
td.offset-by-three { padding-left: 150px; } | |
td.offset-by-four { padding-left: 200px; } | |
td.offset-by-five { padding-left: 250px; } | |
td.offset-by-six { padding-left: 300px; } | |
td.offset-by-seven { padding-left: 350px; } | |
td.offset-by-eight { padding-left: 400px; } | |
td.offset-by-nine { padding-left: 450px; } | |
td.offset-by-ten { padding-left: 500px; } | |
td.offset-by-eleven { padding-left: 550px; } | |
td.expander { | |
visibility: hidden; | |
width: 0px; | |
padding: 0 !important; | |
} | |
table.columns .text-pad, | |
table.column .text-pad { | |
padding-left: 40px; | |
padding-right: 40px; | |
} | |
table.columns .left-text-pad, | |
table.columns .text-pad-left, | |
table.column .left-text-pad, | |
table.column .text-pad-left { | |
padding-left: 40px; | |
} | |
table.columns .right-text-pad, | |
table.columns .text-pad-right, | |
table.column .right-text-pad, | |
table.column .text-pad-right { | |
padding-right: 40px; | |
} | |
table.columns .top-text-pad, | |
table.columns .text-pad-top, | |
table.column .top-text-pad, | |
table.column .text-pad-top { | |
padding-top: 40px; | |
} | |
/* Block Grid */ | |
.block-grid { | |
width: 100%; | |
max-width: 580px; | |
} | |
.block-grid td { | |
display: inline-block; | |
padding:10px; | |
} | |
.two-up td { | |
width:270px; | |
} | |
.three-up td { | |
width:173px; | |
} | |
.four-up td { | |
width:125px; | |
} | |
.five-up td { | |
width:96px; | |
} | |
.six-up td { | |
width:76px; | |
} | |
.seven-up td { | |
width:62px; | |
} | |
.eight-up td { | |
width:52px; | |
} | |
/* Alignment and Visibility Classes */ | |
table.center, td.center { | |
text-align: center; | |
} | |
h1.center, | |
h2.center, | |
h3.center, | |
h4.center, | |
h5.center, | |
h6.center { | |
text-align: center; | |
} | |
span.center { | |
display: block; | |
width: 100%; | |
text-align: center; | |
} | |
img.center { | |
margin: 0 auto; | |
float: none; | |
} | |
.show-for-small, | |
.hide-for-desktop { | |
display: none; | |
} | |
.alignleft { | |
float: left; | |
margin-bottom: 20px; | |
margin-right: 20px; | |
text-align: left; | |
} | |
.alignright { | |
float: right; | |
margin-bottom: 20px; | |
margin-left: 20px; | |
text-align: right; | |
} | |
.alignnone { | |
clear: both; | |
display: block; | |
margin-bottom: 20px; | |
} | |
.aligncenter { | |
clear: both; | |
display: block; | |
margin: 0 auto 20px; | |
text-align: center; | |
} | |
/* Typography */ | |
body, table.body, h1, h2, h3, h4, h5, h6, p, td { | |
color: #333; | |
font-family: "Helvetica", "Arial", sans-serif; | |
font-weight: normal; | |
padding:0; | |
margin: 0; | |
text-align: left; | |
line-height: 1.3; | |
} | |
h1, h2, h3, h4, h5, h6 { | |
color: #111; | |
margin-bottom: 10px; | |
margin-top: 20px; | |
word-break: normal; | |
} | |
h1 {font-size: 32px;} | |
h2 {font-size: 28px;} | |
h3 {font-size: 24px;} | |
h4 {font-size: 20px;} | |
h5 {font-size: 16px;font-weight:bold;} | |
h6 {font-size: 14px;font-weight:bold;text-transform:uppercase;letter-spacing:1px;} | |
body, table.body, p, td {font-size: 14px;line-height:19px;} | |
p.lead, p.lede, p.leed { | |
font-size: 18px; | |
line-height:21px; | |
} | |
p { | |
margin-bottom: 10px; | |
} | |
small { | |
font-size: 10px; | |
} | |
a { | |
color: #2ba6cb; | |
text-decoration: none; | |
} | |
a:hover { | |
color: #2795b6 !important; | |
} | |
a:active { | |
color: #2795b6 !important; | |
} | |
a:visited { | |
color: #2ba6cb !important; | |
} | |
h1 a, | |
h2 a, | |
h3 a, | |
h4 a, | |
h5 a, | |
h6 a { | |
color: #2ba6cb; | |
} | |
h1 a:active, | |
h2 a:active, | |
h3 a:active, | |
h4 a:active, | |
h5 a:active, | |
h6 a:active { | |
color: #2ba6cb !important; | |
} | |
h1 a:visited, | |
h2 a:visited, | |
h3 a:visited, | |
h4 a:visited, | |
h5 a:visited, | |
h6 a:visited { | |
color: #2ba6cb !important; | |
} | |
/* Panels */ | |
.panel { | |
background: #fff; | |
border-left: 5px solid #f5f5f5; | |
padding-left: 20px !important; | |
} | |
.panel, | |
.panel p { | |
font-size: 13px; | |
} | |
.panel h1, | |
.panel h2, | |
.panel h3, | |
.panel h4 { | |
font-weight: bold; | |
} | |
.panel h1 { | |
font-size: 24px; | |
} | |
.panel h2 { | |
font-size: 20px; | |
} | |
.panel h3 { | |
font-size: 18px; | |
} | |
.panel h4 { | |
font-size: 16px; | |
} | |
.sub-grid table { | |
width: 100%; | |
} | |
.sub-grid td.sub-columns { | |
padding-bottom: 0; | |
} | |
/* Buttons */ | |
table.button, | |
table.tiny-button, | |
table.small-button, | |
table.medium-button, | |
table.large-button { | |
width: 100%; | |
overflow: hidden; | |
} | |
table.button td, | |
table.tiny-button td, | |
table.small-button td, | |
table.medium-button td, | |
table.large-button td { | |
display: block; | |
width: auto !important; | |
text-align: center; | |
background: #2ba6cb; | |
border: 1px solid #2284a1; | |
color: #ffffff; | |
padding: 8px 0; | |
} | |
table.tiny-button td { | |
padding: 5px 0 4px; | |
} | |
table.small-button td { | |
padding: 8px 0 7px; | |
} | |
table.medium-button td { | |
padding: 12px 0 10px; | |
} | |
table.large-button td { | |
padding: 21px 0 18px; | |
} | |
table.button td a, | |
table.tiny-button td a, | |
table.small-button td a, | |
table.medium-button td a, | |
table.large-button td a { | |
font-weight: bold; | |
text-decoration: none; | |
font-family: Helvetica, Arial, sans-serif; | |
color: #ffffff; | |
font-size: 16px; | |
} | |
table.tiny-button td a { | |
font-size: 12px; | |
font-weight: normal; | |
} | |
table.small-button td a { | |
font-size: 16px; | |
} | |
table.medium-button td a { | |
font-size: 20px; | |
} | |
table.large-button td a { | |
font-size: 24px; | |
} | |
table.button:hover td, | |
table.button:visited td, | |
table.button:active td { | |
background: #2795b6 !important; | |
} | |
table.button:hover td a, | |
table.button:visited td a, | |
table.button:active td a { | |
color: #fff !important; | |
} | |
table.button:hover td, | |
table.tiny-button:hover td, | |
table.small-button:hover td, | |
table.medium-button:hover td, | |
table.large-button:hover td { | |
background: #2795b6 !important; | |
} | |
table.button:hover td a, | |
table.button:active td a, | |
table.button td a:visited, | |
table.tiny-button:hover td a, | |
table.tiny-button:active td a, | |
table.tiny-button td a:visited, | |
table.small-button:hover td a, | |
table.small-button:active td a, | |
table.small-button td a:visited, | |
table.medium-button:hover td a, | |
table.medium-button:active td a, | |
table.medium-button td a:visited, | |
table.large-button:hover td a, | |
table.large-button:active td a, | |
table.large-button td a:visited { | |
color: #ffffff !important; | |
} | |
table.secondary td { | |
background: #e9e9e9; | |
border-color: #d0d0d0; | |
color: #555; | |
} | |
table.secondary td a { | |
color: #555; | |
} | |
table.secondary:hover td { | |
background: #d0d0d0 !important; | |
color: #555; | |
} | |
table.secondary:hover td a, | |
table.secondary td a:visited, | |
table.secondary:active td a { | |
color: #555 !important; | |
} | |
table.success td { | |
background: #5da423; | |
border-color: #457a1a; | |
} | |
table.success:hover td { | |
background: #457a1a !important; | |
} | |
table.alert td { | |
background: #c60f13; | |
border-color: #970b0e; | |
} | |
table.alert:hover td { | |
background: #970b0e !important; | |
} | |
table.radius td { | |
-webkit-border-radius: 3px; | |
-moz-border-radius: 3px; | |
border-radius: 3px; | |
} | |
table.round td { | |
-webkit-border-radius: 500px; | |
-moz-border-radius: 500px; | |
border-radius: 500px; | |
} | |
/* Outlook First */ | |
body.outlook p { | |
display: inline !important; | |
} | |
/*Media Queries */ | |
@media only screen and (max-width: 600px) { | |
table[class="body"] img { | |
width: auto !important; | |
height: auto !important; | |
} | |
table[class="body"] center { | |
min-width: 0 !important; | |
} | |
table[class="body"] .container { | |
width: 95% !important; | |
} | |
table[class="body"] .row { | |
width: 100% !important; | |
display: block !important; | |
} | |
table[class="body"] .wrapper { | |
display: block !important; | |
padding-right: 0 !important; | |
} | |
table[class="body"] .columns, | |
table[class="body"] .column { | |
table-layout: fixed !important; | |
float: none !important; | |
width: 100% !important; | |
padding-right: 0px !important; | |
padding-left: 0px !important; | |
display: block !important; | |
} | |
table[class="body"] .wrapper.first .columns, | |
table[class="body"] .wrapper.first .column { | |
display: table !important; | |
} | |
table[class="body"] table.columns td, | |
table[class="body"] table.column td { | |
width: 100% !important; | |
} | |
table[class="body"] .columns td.one, | |
table[class="body"] .column td.one { width: 8.333333% !important; } | |
table[class="body"] .columns td.two, | |
table[class="body"] .column td.two { width: 16.666666% !important; } | |
table[class="body"] .columns td.three, | |
table[class="body"] .column td.three { width: 25% !important; } | |
table[class="body"] .columns td.four, | |
table[class="body"] .column td.four { width: 33.333333% !important; } | |
table[class="body"] .columns td.five, | |
table[class="body"] .column td.five { width: 41.666666% !important; } | |
table[class="body"] .columns td.six, | |
table[class="body"] .column td.six { width: 50% !important; } | |
table[class="body"] .columns td.seven, | |
table[class="body"] .column td.seven { width: 58.333333% !important; } | |
table[class="body"] .columns td.eight, | |
table[class="body"] .column td.eight { width: 66.666666% !important; } | |
table[class="body"] .columns td.nine, | |
table[class="body"] .column td.nine { width: 75% !important; } | |
table[class="body"] .columns td.ten, | |
table[class="body"] .column td.ten { width: 83.333333% !important; } | |
table[class="body"] .columns td.eleven, | |
table[class="body"] .column td.eleven { width: 91.666666% !important; } | |
table[class="body"] .columns td.twelve, | |
table[class="body"] .column td.twelve { width: 100% !important; } | |
table[class="body"] td.offset-by-one, | |
table[class="body"] td.offset-by-two, | |
table[class="body"] td.offset-by-three, | |
table[class="body"] td.offset-by-four, | |
table[class="body"] td.offset-by-five, | |
table[class="body"] td.offset-by-six, | |
table[class="body"] td.offset-by-seven, | |
table[class="body"] td.offset-by-eight, | |
table[class="body"] td.offset-by-nine, | |
table[class="body"] td.offset-by-ten, | |
table[class="body"] td.offset-by-eleven { | |
padding-left: 0 !important; | |
} | |
table[class="body"] table.columns td.expander { | |
width: 1px !important; | |
} | |
table[class="body"] .right-text-pad, | |
table[class="body"] .text-pad-right { | |
padding-left: 10px !important; | |
} | |
table[class="body"] .left-text-pad, | |
table[class="body"] .text-pad-left { | |
padding-right: 10px !important; | |
} | |
table[class="body"] .hide-for-small, | |
table[class="body"] .show-for-desktop { | |
display: none !important; | |
} | |
table[class="body"] .show-for-small, | |
table[class="body"] .hide-for-desktop { | |
display: inherit !important; | |
} | |
} | |
</style> | |
<style type="text/css"> | |
table.facebook td { | |
background: #3b5998; | |
border-color: #2d4473; | |
} | |
table.facebook:hover td { | |
background: #2d4473 !important; | |
} | |
table.twitter td { | |
background: #00acee; | |
border-color: #0087bb; | |
} | |
table.twitter:hover td { | |
background: #0087bb !important; | |
} | |
table.google-plus td { | |
background-color: #DB4A39; | |
border-color: #CC0000; | |
} | |
table.google-plus:hover td { | |
background: #CC0000 !important; | |
} | |
.template-label { | |
color: #aaa; | |
font-weight: bold; | |
font-size: 11px; | |
} | |
.callout .wrapper { | |
padding-bottom: 20px; | |
} | |
.callout .panel { | |
background: #ECF8FF; | |
border-color: #b9e5ff; | |
} | |
.header { | |
word-break: break-word; | |
} | |
.header .container { | |
background: #f5f5f5; | |
margin-bottom: 20px; | |
margin-top: 40px; | |
} | |
.footer .wrapper { | |
background: #ebebeb; | |
} | |
.footer h5 { | |
padding-bottom: 10px; | |
} | |
table.columns .text-pad { | |
padding-left: 40px; | |
padding-right: 40px; | |
} | |
table.columns .left-text-pad { | |
padding-left: 10px; | |
} | |
table.columns .right-text-pad { | |
padding-right: 10px; | |
} | |
@media only screen and (max-width: 600px) { | |
table[class="body"] .right-text-pad { | |
padding-left: 10px !important; | |
} | |
table[class="body"] .left-text-pad { | |
padding-right: 10px !important; | |
} | |
} | |
.ninja_forms_all_fields { | |
margin-bottom: 20px; | |
} | |
.ninja_forms_all_fields td { | |
border-bottom: 1px solid #ddd; | |
padding: 10px !important; | |
} | |
.ninja_forms_all_fields td.label { | |
font-weight: bold; | |
width: 100px !important; | |
} | |
@media only screen and (max-width: 600px) { | |
table[class="body"] table.columns table.ninja_forms_all_fields td, | |
table[class="body"] table.column table.ninja_forms_all_fields td { | |
width: auto !important; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<table class="body"> | |
<tr> | |
<td class="center" align="center" valign="top"> | |
<center> | |
<table class="row header"> | |
<tr> | |
<td class="center" align="center"> | |
<center> | |
<table class="container"> | |
<tr> | |
<td class="wrapper last"> | |
<table class="twelve columns"> | |
<tr> | |
<td class="six sub-columns"> | |
{{logo}} | |
</td> | |
<td class="six sub-columns last" style="text-align:right; vertical-align:middle;"> | |
<span class="template-label">{{tag}}</span> | |
</td> | |
<td class="expander"></td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</center> | |
</td> | |
</tr> | |
</table> | |
<table class="container"> | |
<tr> | |
<td> | |
<table class="row"> | |
<tr> | |
<td class="wrapper last"> | |
<table class="twelve columns"> | |
<tr> | |
<td class="text-pad text-pad-top"> | |
{{content}} | |
</td> | |
<td class="expander"></td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</center> | |
</td> | |
</tr> | |
</table> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment