Can I get the 'Customize Email Style' template from Meta?

[bartv (Bart)]

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!

[bartv (Bart)]

I fear this one fell between the cracks. Could someone tell me how I can get the new email template?

[sam (Sam Saffron)]

@neil any idea what we are doing here?

[neil (Neil Lalonde)]

Here’s the html and css to use in Admin > Customize > Email Style. It’s taken from the summary email template.

html

<!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">&nbsp;</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;">&nbsp;</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;">&#xA0;</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">&nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</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>

css

.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;
}

[bartv (Bart)]

Awesome, thanks Neil!

[Bas (Bas van Leeuwen)]

Will this Admin > Customize > Email Style be introduced in 2.4?

[sam (Sam Saffron)]

Yes. it is already included in current beta.

[bartv (Bart)]

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>