Skip to content

Commit

Permalink
#39 Improve email layout for Thunderbird
Browse files Browse the repository at this point in the history
…and do some autumn cleaning as well.

Fixes #39
  • Loading branch information
simison committed Nov 2, 2016
1 parent 92ebfac commit e5f6d7b
Showing 1 changed file with 17 additions and 21 deletions.
38 changes: 17 additions & 21 deletions modules/core/server/views/email-templates/email.server.view.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,6 @@
# @link https://raw.githubusercontent.com/TomFrankly/mailchimp-responsive-template/master/Responsive%20Basic%20Chopped%20and%20Screwed.html
# License: @link http://creativecommons.org/licenses/by-sa/3.0/
#
#
#
#
# This email is optimized for mobile email clients, and even
# works relatively well in the Android Gmail App, which does
# not support Media Queries, but does have limited mobile-
Expand All @@ -23,17 +20,17 @@
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width"/>
{% if mailTitle %}
<title>{{ mailTitle }}</title>
{% else %}
<title>{{title}}</title>
<title>{{ title }}</title>
{% endif %}

<style type="text/css">
/*////// RESET STYLES //////*/
body, #bodyTable, #bodyCell, #footerTable, #footerCell, #headerTable, #headerCell{height:100% !important; margin:0; padding:0; width:100% !important;}
body, #bodyTable, #bodyCell, #footerTable, #footerCell, #headerTable, #headerCell{margin:0; padding:0; width:100% !important;}
table{border-collapse:collapse;}
img, a img{border:0; outline:none; text-decoration:none;}
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
Expand Down Expand Up @@ -127,7 +124,7 @@

{% block header %}
<!-- EMAIL HEADER -->
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="headerTable">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="headerTable">
<tr>
<td align="center" valign="top" id="headerCell">
<!-- HEADER CONTAINER // -->
Expand All @@ -144,31 +141,31 @@
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<!--
{#<!--
The centering table keeps the content
tables centered in the emailBody table,
in case its width is set to 100%.
-->
-->#}
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<!--
{#<!--
The flexible container has a set width
that gets overridden by the media query.
Most content tables within can then be
given 100% widths.
-->
-->#}
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell">

<!-- CONTENT TABLE // -->
<!--
{#<!--
The content table is the first element
that's entirely separate from the structural
framework of the email.
-->
-->#}
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="middle" align="center" style="text-align:center">
Expand Down Expand Up @@ -229,7 +226,7 @@ <h2 class="logo-text">TRUSTROOTS</h2>

{% block footer %}
<!-- EMAIL FOOTER -->
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="footerTable">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="footerTable">
<tr>
<td align="center" valign="top" id="footerCell">
<!-- FOOTER CONTAINER // -->
Expand All @@ -241,37 +238,36 @@ <h2 class="logo-text">TRUSTROOTS</h2>
<table border="0" cellpadding="0" cellspacing="0" width="600" id="emailFooter">



<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<!--
{#<!--
The centering table keeps the content
tables centered in the emailBody table,
in case its width is set to 100%.
-->
-->#}
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<!--
{#<!--
The flexible container has a set width
that gets overridden by the media query.
Most content tables within can then be
given 100% widths.
-->
-->#}
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell">


<!-- CONTENT TABLE // -->
<!--
{#<!--
The content table is the first element
that's entirely separate from the structural
framework of the email.
-->
-->#}
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="footerContent">
Expand Down

0 comments on commit e5f6d7b

Please sign in to comment.