changeset 7135:ffe7f24c7c7a

HTML email templates: Outlook: fix padding inside of action button The rendering of HTML emails in Outlook is very restricted and based on old Internet Explorer versions (more or less the same rendering as in Microsoft Word). To make the Kallithea emails look the same as in the browser, some adaptations are needed. The padding inside the button is completely lost in Outlook, the text sticks to the border. This can be fixed by moving the padding styling from the <center> tag to the <td> cell.
author Thomas De Schampheleire <thomas.de_schampheleire@nokia.com>
date Sat, 03 Feb 2018 17:13:18 +0100
parents 037295a8846d
children 10ee27bae2ff
files kallithea/templates/email_templates/button.html kallithea/tests/models/test_dump_html_mails.ref.html
diffstat 2 files changed, 32 insertions(+), 32 deletions(-) [+]
line wrap: on
line diff
--- a/kallithea/templates/email_templates/button.html	Sat Feb 03 17:10:58 2018 +0100
+++ b/kallithea/templates/email_templates/button.html	Sat Feb 03 17:13:18 2018 +0100
@@ -8,9 +8,9 @@
         </tr>
         %endif
         <tr>
-            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px ${color_button}">
+            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px ${color_button};padding:11px 20px 11px 20px">
                 <a href="${url}" style="text-decoration:none;display:block" target="_blank">
-                    <center style="padding:11px 20px">
+                    <center>
                         <font size="3">
                             <span style="${sans_style};font-weight:700;font-size:15px;line-height:14px;color:${color_button};white-space:nowrap;vertical-align:middle">${_(title)}</span>
                         </font>
--- a/kallithea/tests/models/test_dump_html_mails.ref.html	Sat Feb 03 17:10:58 2018 +0100
+++ b/kallithea/tests/models/test_dump_html_mails.ref.html	Sat Feb 03 17:13:18 2018 +0100
@@ -132,9 +132,9 @@
             <td height="25px"></td>
         </tr>
         <tr>
-            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0">
+            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0;padding:11px 20px 11px 20px">
                 <a href="http://comment.org" style="text-decoration:none;display:block" target="_blank">
-                    <center style="padding:11px 20px">
+                    <center>
                         <font size="3">
                             <span style="font-family:Helvetica,Arial,sans-serif;font-weight:700;font-size:15px;line-height:14px;color:#395fa0;white-space:nowrap;vertical-align:middle">View Comment</span>
                         </font>
@@ -291,9 +291,9 @@
             <td height="25px"></td>
         </tr>
         <tr>
-            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0">
+            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0;padding:11px 20px 11px 20px">
                 <a href="http://comment.org" style="text-decoration:none;display:block" target="_blank">
-                    <center style="padding:11px 20px">
+                    <center>
                         <font size="3">
                             <span style="font-family:Helvetica,Arial,sans-serif;font-weight:700;font-size:15px;line-height:14px;color:#395fa0;white-space:nowrap;vertical-align:middle">View Comment</span>
                         </font>
@@ -468,9 +468,9 @@
             <td height="25px"></td>
         </tr>
         <tr>
-            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0">
+            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0;padding:11px 20px 11px 20px">
                 <a href="http://comment.org" style="text-decoration:none;display:block" target="_blank">
-                    <center style="padding:11px 20px">
+                    <center>
                         <font size="3">
                             <span style="font-family:Helvetica,Arial,sans-serif;font-weight:700;font-size:15px;line-height:14px;color:#395fa0;white-space:nowrap;vertical-align:middle">View Comment</span>
                         </font>
@@ -645,9 +645,9 @@
             <td height="25px"></td>
         </tr>
         <tr>
-            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0">
+            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0;padding:11px 20px 11px 20px">
                 <a href="http://comment.org" style="text-decoration:none;display:block" target="_blank">
-                    <center style="padding:11px 20px">
+                    <center>
                         <font size="3">
                             <span style="font-family:Helvetica,Arial,sans-serif;font-weight:700;font-size:15px;line-height:14px;color:#395fa0;white-space:nowrap;vertical-align:middle">View Comment</span>
                         </font>
@@ -849,9 +849,9 @@
             <td height="25px"></td>
         </tr>
         <tr>
-            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0">
+            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0;padding:11px 20px 11px 20px">
                 <a href="http://newbie.org" style="text-decoration:none;display:block" target="_blank">
-                    <center style="padding:11px 20px">
+                    <center>
                         <font size="3">
                             <span style="font-family:Helvetica,Arial,sans-serif;font-weight:700;font-size:15px;line-height:14px;color:#395fa0;white-space:nowrap;vertical-align:middle">View User Profile</span>
                         </font>
@@ -1024,9 +1024,9 @@
             <td height="25px"></td>
         </tr>
         <tr>
-            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0">
+            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0;padding:11px 20px 11px 20px">
                 <a href="http://pr.org/7" style="text-decoration:none;display:block" target="_blank">
-                    <center style="padding:11px 20px">
+                    <center>
                         <font size="3">
                             <span style="font-family:Helvetica,Arial,sans-serif;font-weight:700;font-size:15px;line-height:14px;color:#395fa0;white-space:nowrap;vertical-align:middle">View Pull Request</span>
                         </font>
@@ -1199,9 +1199,9 @@
             <td height="25px"></td>
         </tr>
         <tr>
-            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0">
+            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0;padding:11px 20px 11px 20px">
                 <a href="http://pr.org/7" style="text-decoration:none;display:block" target="_blank">
-                    <center style="padding:11px 20px">
+                    <center>
                         <font size="3">
                             <span style="font-family:Helvetica,Arial,sans-serif;font-weight:700;font-size:15px;line-height:14px;color:#395fa0;white-space:nowrap;vertical-align:middle">View Pull Request</span>
                         </font>
@@ -1364,9 +1364,9 @@
             <td height="25px"></td>
         </tr>
         <tr>
-            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0">
+            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0;padding:11px 20px 11px 20px">
                 <a href="http://pr.org/comment" style="text-decoration:none;display:block" target="_blank">
-                    <center style="padding:11px 20px">
+                    <center>
                         <font size="3">
                             <span style="font-family:Helvetica,Arial,sans-serif;font-weight:700;font-size:15px;line-height:14px;color:#395fa0;white-space:nowrap;vertical-align:middle">View Comment</span>
                         </font>
@@ -1529,9 +1529,9 @@
             <td height="25px"></td>
         </tr>
         <tr>
-            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0">
+            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0;padding:11px 20px 11px 20px">
                 <a href="http://pr.org/comment" style="text-decoration:none;display:block" target="_blank">
-                    <center style="padding:11px 20px">
+                    <center>
                         <font size="3">
                             <span style="font-family:Helvetica,Arial,sans-serif;font-weight:700;font-size:15px;line-height:14px;color:#395fa0;white-space:nowrap;vertical-align:middle">View Comment</span>
                         </font>
@@ -1712,9 +1712,9 @@
             <td height="25px"></td>
         </tr>
         <tr>
-            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0">
+            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0;padding:11px 20px 11px 20px">
                 <a href="http://pr.org/comment" style="text-decoration:none;display:block" target="_blank">
-                    <center style="padding:11px 20px">
+                    <center>
                         <font size="3">
                             <span style="font-family:Helvetica,Arial,sans-serif;font-weight:700;font-size:15px;line-height:14px;color:#395fa0;white-space:nowrap;vertical-align:middle">View Comment</span>
                         </font>
@@ -1895,9 +1895,9 @@
             <td height="25px"></td>
         </tr>
         <tr>
-            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0">
+            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0;padding:11px 20px 11px 20px">
                 <a href="http://pr.org/comment" style="text-decoration:none;display:block" target="_blank">
-                    <center style="padding:11px 20px">
+                    <center>
                         <font size="3">
                             <span style="font-family:Helvetica,Arial,sans-serif;font-weight:700;font-size:15px;line-height:14px;color:#395fa0;white-space:nowrap;vertical-align:middle">View Comment</span>
                         </font>
@@ -2077,9 +2077,9 @@
             <td height="25px"></td>
         </tr>
         <tr>
-            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0">
+            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0;padding:11px 20px 11px 20px">
                 <a href="http://pr.org/comment" style="text-decoration:none;display:block" target="_blank">
-                    <center style="padding:11px 20px">
+                    <center>
                         <font size="3">
                             <span style="font-family:Helvetica,Arial,sans-serif;font-weight:700;font-size:15px;line-height:14px;color:#395fa0;white-space:nowrap;vertical-align:middle">View Comment</span>
                         </font>
@@ -2259,9 +2259,9 @@
             <td height="25px"></td>
         </tr>
         <tr>
-            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0">
+            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0;padding:11px 20px 11px 20px">
                 <a href="http://pr.org/comment" style="text-decoration:none;display:block" target="_blank">
-                    <center style="padding:11px 20px">
+                    <center>
                         <font size="3">
                             <span style="font-family:Helvetica,Arial,sans-serif;font-weight:700;font-size:15px;line-height:14px;color:#395fa0;white-space:nowrap;vertical-align:middle">View Comment</span>
                         </font>
@@ -2447,9 +2447,9 @@
             <td height="25px"></td>
         </tr>
         <tr>
-            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0">
+            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0;padding:11px 20px 11px 20px">
                 <a href="http://pr.org/comment" style="text-decoration:none;display:block" target="_blank">
-                    <center style="padding:11px 20px">
+                    <center>
                         <font size="3">
                             <span style="font-family:Helvetica,Arial,sans-serif;font-weight:700;font-size:15px;line-height:14px;color:#395fa0;white-space:nowrap;vertical-align:middle">View Comment</span>
                         </font>
@@ -2635,9 +2635,9 @@
             <td height="25px"></td>
         </tr>
         <tr>
-            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0">
+            <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0;padding:11px 20px 11px 20px">
                 <a href="http://pr.org/comment" style="text-decoration:none;display:block" target="_blank">
-                    <center style="padding:11px 20px">
+                    <center>
                         <font size="3">
                             <span style="font-family:Helvetica,Arial,sans-serif;font-weight:700;font-size:15px;line-height:14px;color:#395fa0;white-space:nowrap;vertical-align:middle">View Comment</span>
                         </font>