Skip to content

Instantly share code, notes, and snippets.

@Gamesh
Created June 2, 2015 08:30
Show Gist options
  • Save Gamesh/3cd1a0926227fdceee0e to your computer and use it in GitHub Desktop.
Save Gamesh/3cd1a0926227fdceee0e to your computer and use it in GitHub Desktop.
mail_template.tpl
{*
* Template based on Antwort responsive email template
* http://internations.github.io/antwort/
*
* Use elements ex.: {'content text'|string_format:$em}
*}
{* small font, grey color like "muted" in twitter bootstrap*}
{$muted='<em style="font-style:italic; font-size: 12px; color: #aaa;">%s</em><br><br>'}
{* header *}
{$div='<div style="font-weight: bold; font-size: 18px; line-height: 24px; color: #D03C0F">%s</div><br>'}
{* paragraph *}
{$p='%s<br><br>'}
{* emphasized text/monospaced *}
{$em='<span style="font-family: Andale Mono, Courier, monospace; color: #666;">%s</span>'}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="lt">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0"> {* So that mobile webkit will display zoomed in *}
<meta name="format-detection" content="telephone=no"> {* disable auto telephone linking in iOS *}
<title>System - {$subject}</title>
{literal}
<style type="text/css">
/* Resets: see reset.css for details */
.ReadMsgBody { width: 100%; background-color: #ececec;}
.ExternalClass {width: 100%; background-color: #ececec;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;}
body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
body {margin:0; padding:0;}
table {border-spacing:0;}
table td {border-collapse:collapse;}
.yshortcuts a {border-bottom: none !important;}
.label,.badge {
color: #999;
display: inline-block;
font-size: 11.844px;
font-weight: bold;
line-height: 14px;
vertical-align: baseline;
white-space: nowrap;
}
table[class="container"]{
padding-bottom: 20px;
}
/* Constrain email width for small screens */
@media screen and (max-width: 600px) {
table[class="container"] {
width: 95% !important;
}
}
/* Give content more room on mobile */
@media screen and (max-width: 480px) {
td[class="container-padding"] {
padding-left: 12px !important;
padding-right: 12px !important;
}
}
</style>
{/literal}
</head>
<body style="margin:0; padding:10px 0;" bgcolor="#ececec" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<br>
{* 100% wrapper (grey background) *}
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#ececec">
<tr>
<td align="center" valign="top" bgcolor="#ececec" style="background-color: #ececec;">
{* 720px container (white background) recommended minimum *}
<table border="0" width="720" cellpadding="0" cellspacing="0" class="container" bgcolor="#ffffff" style="padding-bottom: 20px;">
<tr>
<td class="container-padding" bgcolor="#ffffff" style="background-color: #ffffff; padding-left: 30px; padding-right: 30px; font-size: 14px; line-height: 20px; font-family: Arial, sans-serif; color: #333;">
<br>
{block "mail_body"}
{$message}
{/block}
</td>
</tr>
</table>
{*/720px container *}
</td>
</tr>
</table>
{*/100% wrapper*}
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment