Hi,
I really like the layout of Meta’s notification emails, but mine are still very plain. How can I get the template that you use here?
Thanks!
Hi,
I really like the layout of Meta’s notification emails, but mine are still very plain. How can I get the template that you use here?
Thanks!
I fear this one fell between the cracks. Could someone tell me how I can get the new email template?
@neil any idea what we are doing here?
Here’s the html and css to use in Admin > Customize > Email Style. It’s taken from the summary email template.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="%{html_lang}" xml:lang="%{html_lang}">
<head>
<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<title></title>
</head>
<body>
<!--[if mso]>
<style type="text/css">
body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !important;}
</style>
<![endif]-->
<table class="e-header">
<tr>
<td>
<a href="https://www.example.com">
<img src="my-site-logo.png" height="40" alt="My Site Name">
</a>
</td>
</tr>
</table>
<table class="e-body">
<tr>
<td class="e-side-spacer">
<div class="with-accent-colors">
<table class="spacer">
<tbody>
<tr>
<td height="400px"> </td>
</tr>
</tbody>
</table>
</div>
</td>
<td class="e-middle">
<table align="center" class="with-accent-colors">
<tbody>
<tr>
<td class="with-dir e-middle-wrap">
<br/>
<center class="with-accent-colors" style="font-size:22px;font-weight:400;text-align:left;"> </center>
<br/>
<table align="center" class="e-contents">
<tbody>
<tr>
<td class="with-dir">
%{email_content}
</td>
</tr>
</tbody>
</table>
<div style="background-color:#f3f3f3">
<table class="spacer" style="padding:0;width:100%">
<tbody><tr><td height="40" style="border-collapse:collapse!important;font-size:40px;line-height:40px;margin:0;mso-line-height-rule:exactly;padding:0;"> </td></tr></tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="e-side-spacer">
<!-- Background that goes down part-way behind content -->
<div class="with-accent-colors">
<table class="spacer">
<tbody>
<tr>
<td height="400px"> </td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
<!-- prevent Gmail on iOS font size manipulation -->
<div style="display:none;white-space:nowrap;font:15px courier;line-height:0">
</div>
<style>
@media only screen {
html {
min-height: 100%;
background: #f3f3f3
}
}
@media only screen and (max-width:900px) {
table.body img {
width: auto;
height: auto
}
table.body center {
min-width: 0!important;
}
table.body .side-spacer {
width: 2.5%!important;
}
table.body .column,
table.body .columns {
height: auto!important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 16px!important;
padding-right: 16px!important
}
table.body .column .column,
table.body .column .columns,
table.body .columns .column,
table.body .columns .columns {
padding-left: 0!important;
padding-right: 0!important
}
}
</style>
</body>
</html>
.e-header { background-color: white; width: 100%; }
.e-header td {
text-align: center;
padding: 20px 0;
}
.e-header a {
text-decoration: none;
}
.e-header img {
clear:both;
display:block;
height:40px;
margin:auto;
max-width:100%;
outline:0;
}
.e-body {
width:100%;
background:#f3f3f3;
padding:0;
border-spacing:0;
font-family:Helvetica,Arial,sans-serif;
font-size:14px;
font-weight:200;
line-height:1.3;
vertical-align:top;
}
.e-side-spacer {
width:5%;
vertical-align:top;
padding:0;
}
.e-side-spacer .spacer {
border-spacing:0;
padding:0;
width:100%;
}
.e-side-spacer .spacer td {
height:200px;
border-collapse:collapse!important;
margin:0;
mso-line-height-rule:exactly;
padding:0;
}
.e-middle {
vertical-align:top;
padding:0;
font-family:Helvetica,Arial,sans-serif;
}
.e-middle table {
border-spacing:0;
margin:0;
padding:0;
text-align:inherit;
vertical-align:top;
width:100%;
}
.e-middle .e-middle-wrap {
border-collapse:collapse!important;
color:#0a0a0a;
line-height:1.3;
margin:0;
padding:0;
vertical-align:top;
word-wrap:normal;
}
.e-contents {
border-spacing:0;
background:#fefefe;
margin:0;
padding:0;
text-align:center;
vertical-align:top;
width:100%;
}
.e-contents td {
-moz-hyphens:auto;
-webkit-hyphens:auto;
border-collapse:collapse!important;
color:#0a0a0a;
hyphens:auto;
line-height:1.3;
margin:0;
padding:16px;
vertical-align:top;
word-wrap:normal;
}
Awesome, thanks Neil!
Will this Admin > Customize > Email Style
be introduced in 2.4?
Yes. it is already included in current beta.
One minor fix: the content area didn’t contain any padding. I copied this bit of style from the emails that I receive from meta:
<td class="with-dir" style="border-collapse:collapse!important;color:#0a0a0a;line-height:1.3;margin:0;padding:16px;vertical-align:top;word-wrap:normal;text-align:left">
%{email_content}
</td>
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.