From 873ad34747c4908b2f77589f244a090573ec48ae Mon Sep 17 00:00:00 2001
From: Sawyer Hollenshead <s.hollenshead@gmail.com>
Date: Tue, 24 Jul 2012 16:37:19 -0700
Subject: [PATCH] Update all html email templates
---
.gitignore | 1 +
resources/email_templates/confirm.html.ejs | 174 +++++++++++----------
resources/email_templates/new.html.ejs | 174 +++++++++++----------
resources/email_templates/reset.html.ejs | 174 +++++++++++----------
4 files changed, 277 insertions(+), 246 deletions(-)
diff --git a/.gitignore b/.gitignore
index ff96dc53d..6dd547343 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,3 +11,4 @@
.DS_Store
Thumbs.db
/locale
+/resources/email_templates/email-test.html
\ No newline at end of file
diff --git a/resources/email_templates/confirm.html.ejs b/resources/email_templates/confirm.html.ejs
index 4e6529f29..0a6d93eda 100644
--- a/resources/email_templates/confirm.html.ejs
+++ b/resources/email_templates/confirm.html.ejs
@@ -1,93 +1,103 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <style type="text/css">
- #outlook a{
- padding:0;
- }
- body{
- background: url("<%= cachify('/common/i/grain.png') %>") #76868f;
- background: url("<%= cachify('/pages/i/marketplace-header.png') %>") top repeat-x, url("<%= cachify('/common/i/grain.png') %>") #76868f;
- margin:0;
- padding:0;
- width:100% !important;
- -webkit-text-size-adjust:none;
- font-family: Helvetica, Arial, sans-serif;
- font-size: 14px;
- color: #424f5a;
- }
- img{
- border:0;
- height:auto;
- line-height:100%;
- outline:none;
- text-decoration:none;
- }
- a{
- color: #3b9bda;
- text-decoration: none;
- }
- a:hover{
- text-decoration: underline;
- }
- p{
- margin: 0 0 15px;
- line-height: 1.5;
- }
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <title>Persona</title>
+ <style type="text/css">
+ #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
+ body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
+ body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
- h2{
- font-size: 18px;
- margin: 20px 0 15px;
- }
+ body{
+ background: #45505b;
+ margin:0;
+ padding:0;
+ width:100% !important;
+ -webkit-text-size-adjust:none;
+ font-family: Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ color: #424f5a;
+ }
+ img{
+ border:0;
+ height:auto;
+ line-height:100%;
+ outline:none;
+ text-decoration:none;
+ }
+ a{
+ color: #3b9bda;
+ text-decoration: none;
+ }
+ a:hover{
+ text-decoration: underline;
+ }
+ p{
+ margin: 0 0 15px;
+ line-height: 1.5;
+ }
- p:last-child{
- margin-bottom: 0;
- }
- table td{
- border-collapse:collapse;
- }
+ h2{
+ font-size: 18px;
+ margin: 20px 0 15px;
+ }
- #content{
- border-radius: 3px;
- padding: 30px;
- }
- </style>
- </head>
- <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="-webkit-text-size-adjust: none;margin: 0;padding: 0;background-color: #76868f;width: 100% !important;">
- <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="margin: 0;padding: 0;height: 100% !important;width: 100% !important;">
- <td align="left" valign="top" style="border-collapse: collapse;">
- <center>
- <table border="0" cellpadding="0" cellspacing="0" width="600">
- <tr class="spacer">
- <td height="30px"></td>
- </tr>
- <tr>
- <td align="left" valign="top" style="border-collapse: collapse;">
- <img src="<%= cachify('/pages/i/persona-logo-wordmark.png') %>" alt="Mozilla Persona" />
- </td>
- </tr>
- <tr class="spacer">
- <td height="30px"></td>
- </tr>
- </table><!-- #header -->
- <table id="content" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #fff;">
- <tr>
- <td align="left" valign="top" class="email-content" style="border-collapse: collapse;">
- <p><%= gettext('Thank you for using Persona.') %></p>
+ p:last-child{
+ margin-bottom: 0;
+ }
+ table td{
+ border-collapse:collapse;
+ }
+ </style>
+ </head>
+ <body style="-webkit-text-size-adjust: none;margin: 0;padding: 0;background-color: #45505b;width: 100% !important;">
+ <center>
+ <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
+ <tr style="margin: 0;
+ padding: 0;
+ height: 100% !important;
+ width: 100% !important;
+ background: #45505b;
+ -webkit-text-size-adjust:none;
+ font-family: Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ color: #424f5a;">
+ <td align="center" valign="top" style="border-collapse: collapse;">
+
- <p><a href="<%= link %>" style="color: #3b9bda; font-weight: bold;"><%= format(gettext('Click to confirm this email address and automatically sign in to %s'), [site]) %>.</a></p>
+ <table border="0" cellpadding="0" cellspacing="0" width="90%">
+ <tr class="spacer">
+ <td height="30px"></td>
+ </tr>
+ <tr>
+ <td align="left" valign="top" style="border-collapse: collapse;">
+ <img src="<%= cachify('/pages/i/persona-logo-wordmark.png') %>" alt="Mozilla Persona" />
+ </td>
+ </tr>
+ <tr class="spacer">
+ <td height="30px"></td>
+ </tr>
+ </table><!-- #header -->
+ <table id="content" border="0" cellpadding="0" cellspacing="0" width="90%" style="background-color: #fff; border-radius: 3px; margin-bottom: 60px;">
+ <tr>
+ <td align="left" valign="top" class="email-content" style="border-collapse: collapse; padding: 30px;">
+ <p><%= gettext('Thank you for using Persona.') %></p>
- <p><%= gettext('Note: If you are NOT trying to sign into this website, please ignore this email.') %></p>
+ <p><a href="<%= link %>" style="color: #3b9bda; font-weight: bold;"><%= format(gettext('Click to confirm this email address and automatically sign in to %s'), [site]) %>.</a></p>
+
+ <p><%= gettext('Note: If you are NOT trying to sign into this website, please ignore this email.') %></p>
+
+ <p><%= gettext('Thank you,') %><br />
+ <%= gettext('The Persona team') %></p>
+ </td>
+ </tr>
+ </table><!-- #content -->
+
- <p><%= gettext('Thank you,') %><br />
- <%= gettext('The Persona team') %></p>
- </td>
- </tr>
- </table><!-- #content -->
- </center>
</td>
</tr>
</table><!-- #container table -->
+ </center>
+
</body>
-</html>
+</html>
\ No newline at end of file
diff --git a/resources/email_templates/new.html.ejs b/resources/email_templates/new.html.ejs
index 9efd4bd29..33f604e48 100644
--- a/resources/email_templates/new.html.ejs
+++ b/resources/email_templates/new.html.ejs
@@ -1,93 +1,103 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <style type="text/css">
- #outlook a{
- padding:0;
- }
- body{
- background: url("<%= cachify('/common/i/grain.png') %>") #76868f;
- background: url("<%= cachify('/pages/i/marketplace-header.png') %>") top repeat-x, url("<%= cachify('/common/i/grain.png') %>") #76868f;
- margin:0;
- padding:0;
- width:100% !important;
- -webkit-text-size-adjust:none;
- font-family: Helvetica, Arial, sans-serif;
- font-size: 14px;
- color: #424f5a;
- }
- img{
- border:0;
- height:auto;
- line-height:100%;
- outline:none;
- text-decoration:none;
- }
- a{
- color: #3b9bda;
- text-decoration: none;
- }
- a:hover{
- text-decoration: underline;
- }
- p{
- margin: 0 0 15px;
- line-height: 1.5;
- }
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <title>Persona</title>
+ <style type="text/css">
+ #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
+ body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
+ body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
- h2{
- font-size: 18px;
- margin: 20px 0 15px;
- }
+ body{
+ background: #45505b;
+ margin:0;
+ padding:0;
+ width:100% !important;
+ -webkit-text-size-adjust:none;
+ font-family: Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ color: #424f5a;
+ }
+ img{
+ border:0;
+ height:auto;
+ line-height:100%;
+ outline:none;
+ text-decoration:none;
+ }
+ a{
+ color: #3b9bda;
+ text-decoration: none;
+ }
+ a:hover{
+ text-decoration: underline;
+ }
+ p{
+ margin: 0 0 15px;
+ line-height: 1.5;
+ }
- p:last-child{
- margin-bottom: 0;
- }
- table td{
- border-collapse:collapse;
- }
+ h2{
+ font-size: 18px;
+ margin: 20px 0 15px;
+ }
- #content{
- border-radius: 3px;
- padding: 30px;
- }
- </style>
- </head>
- <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="-webkit-text-size-adjust: none;margin: 0;padding: 0;background-color: #76868f;width: 100% !important;">
- <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="margin: 0;padding: 0;height: 100% !important;width: 100% !important;">
- <td align="left" valign="top" style="border-collapse: collapse;">
- <center>
- <table border="0" cellpadding="0" cellspacing="0" width="600">
- <tr class="spacer">
- <td height="30px"></td>
- </tr>
- <tr>
- <td align="left" valign="top" style="border-collapse: collapse;">
- <img src="<%= cachify('/pages/i/persona-logo-wordmark.png') %>" alt="Mozilla Persona" />
- </td>
- </tr>
- <tr class="spacer">
- <td height="30px"></td>
- </tr>
- </table><!-- #header -->
- <table id="content" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #fff;">
- <tr>
- <td align="left" valign="top" class="email-content" style="border-collapse: collapse;">
- <p><%= gettext('Thank you for using Persona.') %></p>
+ p:last-child{
+ margin-bottom: 0;
+ }
+ table td{
+ border-collapse:collapse;
+ }
+ </style>
+ </head>
+ <body style="-webkit-text-size-adjust: none;margin: 0;padding: 0;background-color: #45505b;width: 100% !important;">
+ <center>
+ <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
+ <tr style="margin: 0;
+ padding: 0;
+ height: 100% !important;
+ width: 100% !important;
+ background: #45505b;
+ -webkit-text-size-adjust:none;
+ font-family: Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ color: #424f5a;">
+ <td align="center" valign="top" style="border-collapse: collapse;">
+
- <p><a href="<%= link %>" style="color: #3b9bda; font-weight: bold;"><%= format(gettext('Click to confirm this email address and automatically sign in to %s'), [site]) %>.</a></p>
+ <table border="0" cellpadding="0" cellspacing="0" width="90%">
+ <tr class="spacer">
+ <td height="30px"></td>
+ </tr>
+ <tr>
+ <td align="left" valign="top" style="border-collapse: collapse;">
+ <img src="<%= cachify('/pages/i/persona-logo-wordmark.png') %>" alt="Mozilla Persona" />
+ </td>
+ </tr>
+ <tr class="spacer">
+ <td height="30px"></td>
+ </tr>
+ </table><!-- #header -->
+ <table border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #fff; border-radius: 3px; margin-bottom: 60px;">
+ <tr>
+ <td align="left" valign="top" class="email-content" style="border-collapse: collapse; padding: 30px;">
+ <p><%= gettext('Thank you for using Persona.') %></p>
- <p><%= gettext('Note: If you are NOT trying to sign into this website, please ignore this email.') %></p>
+ <p><a href="<%= link %>" style="color: #3b9bda; font-weight: bold;"><%= format(gettext('Click to confirm this email address and automatically sign in to %s'), [site]) %>.</a></p>
+
+ <p><%= gettext('Note: If you are NOT trying to sign into this website, please ignore this email.') %></p>
+
+ <p><%= gettext('Thank you,') %><br />
+ <%= gettext('The Persona team') %></p>
+ </td>
+ </tr>
+ </table><!-- #content -->
+
- <p><%= gettext('Thank you,') %><br />
- <%= gettext('The Persona team') %></p>
- </td>
- </tr>
- </table><!-- #content -->
- </center>
</td>
</tr>
</table><!-- #container table -->
+ </center>
+
</body>
-</html>
+</html>
\ No newline at end of file
diff --git a/resources/email_templates/reset.html.ejs b/resources/email_templates/reset.html.ejs
index 1766a14f7..c505dcaec 100644
--- a/resources/email_templates/reset.html.ejs
+++ b/resources/email_templates/reset.html.ejs
@@ -1,93 +1,103 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <style type="text/css">
- #outlook a{
- padding:0;
- }
- body{
- background: url("<%= cachify('/common/i/grain.png') %>") #76868f;
- background: url("<%= cachify('/pages/i/marketplace-header.png') %>") top repeat-x, url("<%= cachify('/common/i/grain.png') %>") #76868f;
- margin:0;
- padding:0;
- width:100% !important;
- -webkit-text-size-adjust:none;
- font-family: Helvetica, Arial, sans-serif;
- font-size: 14px;
- color: #424f5a;
- }
- img{
- border:0;
- height:auto;
- line-height:100%;
- outline:none;
- text-decoration:none;
- }
- a{
- color: #3b9bda;
- text-decoration: none;
- }
- a:hover{
- text-decoration: underline;
- }
- p{
- margin: 0 0 15px;
- line-height: 1.5;
- }
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <title>Persona</title>
+ <style type="text/css">
+ #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
+ body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
+ body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
- h2{
- font-size: 18px;
- margin: 20px 0 15px;
- }
+ body{
+ background: #45505b;
+ margin:0;
+ padding:0;
+ width:100% !important;
+ -webkit-text-size-adjust:none;
+ font-family: Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ color: #424f5a;
+ }
+ img{
+ border:0;
+ height:auto;
+ line-height:100%;
+ outline:none;
+ text-decoration:none;
+ }
+ a{
+ color: #3b9bda;
+ text-decoration: none;
+ }
+ a:hover{
+ text-decoration: underline;
+ }
+ p{
+ margin: 0 0 15px;
+ line-height: 1.5;
+ }
- p:last-child{
- margin-bottom: 0;
- }
- table td{
- border-collapse:collapse;
- }
+ h2{
+ font-size: 18px;
+ margin: 20px 0 15px;
+ }
- #content{
- border-radius: 3px;
- padding: 30px;
- }
- </style>
- </head>
- <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="-webkit-text-size-adjust: none;margin: 0;padding: 0;background-color: #76868f;width: 100% !important;">
- <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="margin: 0;padding: 0;height: 100% !important;width: 100% !important;">
- <td align="left" valign="top" style="border-collapse: collapse;">
- <center>
- <table border="0" cellpadding="0" cellspacing="0" width="600">
- <tr class="spacer">
- <td height="30px"></td>
- </tr>
- <tr>
- <td align="left" valign="top" style="border-collapse: collapse;">
- <img src="<%= cachify('/pages/i/persona-logo-wordmark.png') %>" alt="Mozilla Persona" />
- </td>
- </tr>
- <tr class="spacer">
- <td height="30px"></td>
- </tr>
- </table><!-- #header -->
- <table id="content" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #fff;">
- <tr>
- <td align="left" valign="top" class="email-content" style="border-collapse: collapse;">
- <p><%= gettext('Forgot your password for Persona? It happens to the best of us.') %></p>
+ p:last-child{
+ margin-bottom: 0;
+ }
+ table td{
+ border-collapse:collapse;
+ }
+ </style>
+ </head>
+ <body style="-webkit-text-size-adjust: none;margin: 0;padding: 0;background-color: #45505b;width: 100% !important;">
+ <center>
+ <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
+ <tr style="margin: 0;
+ padding: 0;
+ height: 100% !important;
+ width: 100% !important;
+ background: #45505b;
+ -webkit-text-size-adjust:none;
+ font-family: Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ color: #424f5a;">
+ <td align="center" valign="top" style="border-collapse: collapse;">
+
- <p><a href="<%= link %>" style="color: #3b9bda; font-weight: bold;"><%= gettext('Click to reset your password:') %> <%= link %></a></p>
+ <table border="0" cellpadding="0" cellspacing="0" width="90%">
+ <tr class="spacer">
+ <td height="30px"></td>
+ </tr>
+ <tr>
+ <td align="left" valign="top" style="border-collapse: collapse;">
+ <img src="<%= cachify('/pages/i/persona-logo-wordmark.png') %>" alt="Mozilla Persona" />
+ </td>
+ </tr>
+ <tr class="spacer">
+ <td height="30px"></td>
+ </tr>
+ </table><!-- #header -->
+ <table id="content" border="0" cellpadding="0" cellspacing="0" width="90%" style="background-color: #fff; border-radius: 3px; margin-bottom: 60px;">
+ <tr>
+ <td align="left" valign="top" class="email-content" style="border-collapse: collapse; padding: 30px;">
+ <p><%= gettext('Forgot your password for Persona? It happens to the best of us.') %></p>
- <p><%= gettext('Note: If you did NOT ask to reset your password, please ignore this email.') %></p>
+ <p><a href="<%= link %>" style="color: #3b9bda; font-weight: bold;"><%= gettext('Click here to reset your password.') %></a></p>
+
+ <p><%= gettext('Note: If you did NOT ask to reset your password, please ignore this email.') %></p>
+
+ <p><%= gettext('Thank you,') %><br />
+ <%= gettext('The Persona team') %></p>
+ </td>
+ </tr>
+ </table><!-- #content -->
+
- <p><%= gettext('Thank you,') %><br />
- <%= gettext('The Persona team') %></p>
- </td>
- </tr>
- </table><!-- #content -->
- </center>
</td>
</tr>
</table><!-- #container table -->
+ </center>
+
</body>
-</html>
+</html>
\ No newline at end of file
--
GitLab