Mercurial > kallithea
changeset 7134:037295a8846d
HTML email templates: Outlook: center 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.
One of the problems is that the action button is not centered.
An extra <center> tag solves this issue.
| author | Thomas De Schampheleire <thomas.de_schampheleire@nokia.com> |
|---|---|
| date | Sat, 03 Feb 2018 17:10:58 +0100 |
| parents | 5ab31ff3011f |
| children | ffe7f24c7c7a |
| files | kallithea/templates/email_templates/button.html kallithea/tests/models/test_dump_html_mails.ref.html |
| diffstat | 2 files changed, 295 insertions(+), 263 deletions(-) [+] |
line wrap: on
line diff
--- a/kallithea/templates/email_templates/button.html Fri Feb 09 20:14:29 2018 +0100 +++ b/kallithea/templates/email_templates/button.html Sat Feb 03 17:10:58 2018 +0100 @@ -1,26 +1,28 @@ <%page args="url,title='',padding_top=True,padding_bottom=True" />\ ##<!-- button --> -<table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> - %if padding_top: - <tr> - <td height="25px"></td> - </tr> - %endif - <tr> - <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px ${color_button}"> - <a href="${url}" style="text-decoration:none;display:block" target="_blank"> - <center style="padding:11px 20px"> - <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> - </center> - </a> - </td> - </tr> - %if padding_bottom: - <tr> - <td height="25px"></td> - </tr> - %endif -</table> +<center> + <table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> + %if padding_top: + <tr> + <td height="25px"></td> + </tr> + %endif + <tr> + <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px ${color_button}"> + <a href="${url}" style="text-decoration:none;display:block" target="_blank"> + <center style="padding:11px 20px"> + <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> + </center> + </a> + </td> + </tr> + %if padding_bottom: + <tr> + <td height="25px"></td> + </tr> + %endif + </table> +</center> ##<!-- /button -->
--- a/kallithea/tests/models/test_dump_html_mails.ref.html Fri Feb 09 20:14:29 2018 +0100 +++ b/kallithea/tests/models/test_dump_html_mails.ref.html Sat Feb 03 17:10:58 2018 +0100 @@ -126,22 +126,24 @@ </tr> <tr> <td> -<table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> - <tr> - <td height="25px"></td> - </tr> - <tr> - <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> - <a href="http://comment.org" style="text-decoration:none;display:block" target="_blank"> - <center style="padding:11px 20px"> - <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> - </center> - </a> - </td> - </tr> -</table> +<center> + <table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> + <tr> + <td height="25px"></td> + </tr> + <tr> + <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> + <a href="http://comment.org" style="text-decoration:none;display:block" target="_blank"> + <center style="padding:11px 20px"> + <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> + </center> + </a> + </td> + </tr> + </table> +</center> </td> </tr> </table> @@ -283,22 +285,24 @@ </tr> <tr> <td> -<table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> - <tr> - <td height="25px"></td> - </tr> - <tr> - <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> - <a href="http://comment.org" style="text-decoration:none;display:block" target="_blank"> - <center style="padding:11px 20px"> - <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> - </center> - </a> - </td> - </tr> -</table> +<center> + <table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> + <tr> + <td height="25px"></td> + </tr> + <tr> + <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> + <a href="http://comment.org" style="text-decoration:none;display:block" target="_blank"> + <center style="padding:11px 20px"> + <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> + </center> + </a> + </td> + </tr> + </table> +</center> </td> </tr> </table> @@ -458,22 +462,24 @@ </tr> <tr> <td> -<table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> - <tr> - <td height="25px"></td> - </tr> - <tr> - <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> - <a href="http://comment.org" style="text-decoration:none;display:block" target="_blank"> - <center style="padding:11px 20px"> - <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> - </center> - </a> - </td> - </tr> -</table> +<center> + <table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> + <tr> + <td height="25px"></td> + </tr> + <tr> + <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> + <a href="http://comment.org" style="text-decoration:none;display:block" target="_blank"> + <center style="padding:11px 20px"> + <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> + </center> + </a> + </td> + </tr> + </table> +</center> </td> </tr> </table> @@ -633,22 +639,24 @@ </tr> <tr> <td> -<table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> - <tr> - <td height="25px"></td> - </tr> - <tr> - <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> - <a href="http://comment.org" style="text-decoration:none;display:block" target="_blank"> - <center style="padding:11px 20px"> - <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> - </center> - </a> - </td> - </tr> -</table> +<center> + <table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> + <tr> + <td height="25px"></td> + </tr> + <tr> + <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> + <a href="http://comment.org" style="text-decoration:none;display:block" target="_blank"> + <center style="padding:11px 20px"> + <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> + </center> + </a> + </td> + </tr> + </table> +</center> </td> </tr> </table> @@ -835,22 +843,24 @@ </tr> <tr> <td colspan="2"> -<table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> - <tr> - <td height="25px"></td> - </tr> - <tr> - <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> - <a href="http://newbie.org" style="text-decoration:none;display:block" target="_blank"> - <center style="padding:11px 20px"> - <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> - </center> - </a> - </td> - </tr> -</table> +<center> + <table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> + <tr> + <td height="25px"></td> + </tr> + <tr> + <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> + <a href="http://newbie.org" style="text-decoration:none;display:block" target="_blank"> + <center style="padding:11px 20px"> + <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> + </center> + </a> + </td> + </tr> + </table> +</center> </td> </tr> </table> @@ -1008,22 +1018,24 @@ </tr> <tr> <td> -<table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> - <tr> - <td height="25px"></td> - </tr> - <tr> - <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> - <a href="http://pr.org/7" style="text-decoration:none;display:block" target="_blank"> - <center style="padding:11px 20px"> - <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> - </center> - </a> - </td> - </tr> -</table> +<center> + <table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> + <tr> + <td height="25px"></td> + </tr> + <tr> + <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> + <a href="http://pr.org/7" style="text-decoration:none;display:block" target="_blank"> + <center style="padding:11px 20px"> + <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> + </center> + </a> + </td> + </tr> + </table> +</center> </td> </tr> </table> @@ -1181,22 +1193,24 @@ </tr> <tr> <td> -<table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> - <tr> - <td height="25px"></td> - </tr> - <tr> - <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> - <a href="http://pr.org/7" style="text-decoration:none;display:block" target="_blank"> - <center style="padding:11px 20px"> - <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> - </center> - </a> - </td> - </tr> -</table> +<center> + <table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> + <tr> + <td height="25px"></td> + </tr> + <tr> + <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> + <a href="http://pr.org/7" style="text-decoration:none;display:block" target="_blank"> + <center style="padding:11px 20px"> + <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> + </center> + </a> + </td> + </tr> + </table> +</center> </td> </tr> </table> @@ -1344,22 +1358,24 @@ </tr> <tr> <td> -<table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> - <tr> - <td height="25px"></td> - </tr> - <tr> - <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> - <a href="http://pr.org/comment" style="text-decoration:none;display:block" target="_blank"> - <center style="padding:11px 20px"> - <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> - </center> - </a> - </td> - </tr> -</table> +<center> + <table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> + <tr> + <td height="25px"></td> + </tr> + <tr> + <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> + <a href="http://pr.org/comment" style="text-decoration:none;display:block" target="_blank"> + <center style="padding:11px 20px"> + <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> + </center> + </a> + </td> + </tr> + </table> +</center> </td> </tr> </table> @@ -1507,22 +1523,24 @@ </tr> <tr> <td> -<table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> - <tr> - <td height="25px"></td> - </tr> - <tr> - <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> - <a href="http://pr.org/comment" style="text-decoration:none;display:block" target="_blank"> - <center style="padding:11px 20px"> - <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> - </center> - </a> - </td> - </tr> -</table> +<center> + <table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> + <tr> + <td height="25px"></td> + </tr> + <tr> + <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> + <a href="http://pr.org/comment" style="text-decoration:none;display:block" target="_blank"> + <center style="padding:11px 20px"> + <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> + </center> + </a> + </td> + </tr> + </table> +</center> </td> </tr> </table> @@ -1688,22 +1706,24 @@ </tr> <tr> <td> -<table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> - <tr> - <td height="25px"></td> - </tr> - <tr> - <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> - <a href="http://pr.org/comment" style="text-decoration:none;display:block" target="_blank"> - <center style="padding:11px 20px"> - <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> - </center> - </a> - </td> - </tr> -</table> +<center> + <table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> + <tr> + <td height="25px"></td> + </tr> + <tr> + <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> + <a href="http://pr.org/comment" style="text-decoration:none;display:block" target="_blank"> + <center style="padding:11px 20px"> + <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> + </center> + </a> + </td> + </tr> + </table> +</center> </td> </tr> </table> @@ -1869,22 +1889,24 @@ </tr> <tr> <td> -<table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> - <tr> - <td height="25px"></td> - </tr> - <tr> - <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> - <a href="http://pr.org/comment" style="text-decoration:none;display:block" target="_blank"> - <center style="padding:11px 20px"> - <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> - </center> - </a> - </td> - </tr> -</table> +<center> + <table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> + <tr> + <td height="25px"></td> + </tr> + <tr> + <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> + <a href="http://pr.org/comment" style="text-decoration:none;display:block" target="_blank"> + <center style="padding:11px 20px"> + <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> + </center> + </a> + </td> + </tr> + </table> +</center> </td> </tr> </table> @@ -2049,22 +2071,24 @@ </tr> <tr> <td> -<table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> - <tr> - <td height="25px"></td> - </tr> - <tr> - <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> - <a href="http://pr.org/comment" style="text-decoration:none;display:block" target="_blank"> - <center style="padding:11px 20px"> - <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> - </center> - </a> - </td> - </tr> -</table> +<center> + <table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> + <tr> + <td height="25px"></td> + </tr> + <tr> + <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> + <a href="http://pr.org/comment" style="text-decoration:none;display:block" target="_blank"> + <center style="padding:11px 20px"> + <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> + </center> + </a> + </td> + </tr> + </table> +</center> </td> </tr> </table> @@ -2229,22 +2253,24 @@ </tr> <tr> <td> -<table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> - <tr> - <td height="25px"></td> - </tr> - <tr> - <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> - <a href="http://pr.org/comment" style="text-decoration:none;display:block" target="_blank"> - <center style="padding:11px 20px"> - <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> - </center> - </a> - </td> - </tr> -</table> +<center> + <table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> + <tr> + <td height="25px"></td> + </tr> + <tr> + <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> + <a href="http://pr.org/comment" style="text-decoration:none;display:block" target="_blank"> + <center style="padding:11px 20px"> + <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> + </center> + </a> + </td> + </tr> + </table> +</center> </td> </tr> </table> @@ -2415,22 +2441,24 @@ </tr> <tr> <td> -<table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> - <tr> - <td height="25px"></td> - </tr> - <tr> - <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> - <a href="http://pr.org/comment" style="text-decoration:none;display:block" target="_blank"> - <center style="padding:11px 20px"> - <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> - </center> - </a> - </td> - </tr> -</table> +<center> + <table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> + <tr> + <td height="25px"></td> + </tr> + <tr> + <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> + <a href="http://pr.org/comment" style="text-decoration:none;display:block" target="_blank"> + <center style="padding:11px 20px"> + <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> + </center> + </a> + </td> + </tr> + </table> +</center> </td> </tr> </table> @@ -2601,22 +2629,24 @@ </tr> <tr> <td> -<table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> - <tr> - <td height="25px"></td> - </tr> - <tr> - <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> - <a href="http://pr.org/comment" style="text-decoration:none;display:block" target="_blank"> - <center style="padding:11px 20px"> - <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> - </center> - </a> - </td> - </tr> -</table> +<center> + <table cellspacing="0" cellpadding="0" style="margin-left:auto;margin-right:auto"> + <tr> + <td height="25px"></td> + </tr> + <tr> + <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border:solid 1px #395fa0"> + <a href="http://pr.org/comment" style="text-decoration:none;display:block" target="_blank"> + <center style="padding:11px 20px"> + <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> + </center> + </a> + </td> + </tr> + </table> +</center> </td> </tr> </table>