Changeset - 037295a8846d
[Not reviewed]
default
0 2 0
Thomas De Schampheleire - 8 years ago 2018-02-03 17:10:58
thomas.de_schampheleire@nokia.com
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.
2 files changed with 32 insertions and 0 deletions:
0 comments (0 inline, 0 general)
kallithea/templates/email_templates/button.html
Show inline comments
 
<%page args="url,title='',padding_top=True,padding_bottom=True" />\
 
##<!-- button -->
 
<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 -->
kallithea/tests/models/test_dump_html_mails.ref.html
Show inline comments
 
@@ -117,40 +117,42 @@ View Comment: http://comment.org
 
                <span style="color:#395fa0">brunch</span>:
 
            </div>
 
            <div>
 
                "<a style="color:#395fa0;text-decoration:none"
 
                   href="http://changeset.com">This changeset did something clever which is hard to explain</a>"
 
                by
 
                <span style="color:#395fa0">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td>
 
<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>
 
                    </td>
 
                    <td></td>
 
                </tr>
 
                <tr>
 
                    <td height="30px" colspan="3"></td>
 
                </tr>
 
            </table>
 
        </td>
 
        <td width="30px"></td>
 
@@ -274,40 +276,42 @@ View Comment: http://comment.org
 
                <span style="color:#395fa0">brunch</span>:
 
            </div>
 
            <div>
 
                "<a style="color:#395fa0;text-decoration:none"
 
                   href="http://changeset.com">This changeset did something clever which is hard to explain</a>"
 
                by
 
                <span style="color:#395fa0">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td>
 
<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>
 
                    </td>
 
                    <td></td>
 
                </tr>
 
                <tr>
 
                    <td height="30px" colspan="3"></td>
 
                </tr>
 
            </table>
 
        </td>
 
        <td width="30px"></td>
 
@@ -449,40 +453,42 @@ View Comment: http://comment.org
 
                <span style="color:#395fa0">brunch</span>:
 
            </div>
 
            <div>
 
                "<a style="color:#395fa0;text-decoration:none"
 
                   href="http://changeset.com">This changeset did something clever which is hard to explain</a>"
 
                by
 
                <span style="color:#395fa0">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td>
 
<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>
 
                    </td>
 
                    <td></td>
 
                </tr>
 
                <tr>
 
                    <td height="30px" colspan="3"></td>
 
                </tr>
 
            </table>
 
        </td>
 
        <td width="30px"></td>
 
@@ -624,40 +630,42 @@ View Comment: http://comment.org
 
                <span style="color:#395fa0">brunch</span>:
 
            </div>
 
            <div>
 
                "<a style="color:#395fa0;text-decoration:none"
 
                   href="http://changeset.com">This changeset did something clever which is hard to explain</a>"
 
                by
 
                <span style="color:#395fa0">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td>
 
<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>
 
                    </td>
 
                    <td></td>
 
                </tr>
 
                <tr>
 
                    <td height="30px" colspan="3"></td>
 
                </tr>
 
            </table>
 
        </td>
 
        <td width="30px"></td>
 
@@ -826,40 +834,42 @@ View User Profile: http://newbie.org
 
        <td height="10px" colspan="2"></td>
 
    </tr>
 
    <tr>
 
        <td>
 
            Email:
 
        </td>
 
        <td style="color:#395fa0">
 
            new@email.com
 
        </td>
 
    </tr>
 
    <tr>
 
        <td colspan="2">
 
<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>
 
                    </td>
 
                    <td></td>
 
                </tr>
 
                <tr>
 
                    <td height="30px" colspan="3"></td>
 
                </tr>
 
            </table>
 
        </td>
 
        <td width="30px"></td>
 
@@ -999,40 +1009,42 @@ View Pull Request: http://pr.org/7
 
                    </li>
 
                    <li>
 
                        <a style="color:#395fa0;text-decoration:none"
 
                           href="http://changeset_home/?repo_name=repo_org&amp;revision=567fed567fed567fed567fed567fed567fed567fed">
 
                            Make one plus two equal tree
 
                        </a>
 
                    </li>
 
            </ul>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td>
 
<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>
 
                    </td>
 
                    <td></td>
 
                </tr>
 
                <tr>
 
                    <td height="30px" colspan="3"></td>
 
                </tr>
 
            </table>
 
        </td>
 
        <td width="30px"></td>
 
@@ -1172,40 +1184,42 @@ View Pull Request: http://pr.org/7
 
                    </li>
 
                    <li>
 
                        <a style="color:#395fa0;text-decoration:none"
 
                           href="http://changeset_home/?repo_name=repo_org&amp;revision=567fed567fed567fed567fed567fed567fed567fed">
 
                            Make one plus two equal tree
 
                        </a>
 
                    </li>
 
            </ul>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td>
 
<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>
 
                    </td>
 
                    <td></td>
 
                </tr>
 
                <tr>
 
                    <td height="30px" colspan="3"></td>
 
                </tr>
 
            </table>
 
        </td>
 
        <td width="30px"></td>
 
@@ -1335,40 +1349,42 @@ View Comment: http://pr.org/comment
 
            </div>
 
            <div>
 
                <a style="color:#395fa0;text-decoration:none"
 
                   href="http://pr.org/7">#7</a>
 
                "<span style="color:#395fa0">The Title</span>"
 
                by
 
                <span style="color:#395fa0">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td>
 
<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>
 
                    </td>
 
                    <td></td>
 
                </tr>
 
                <tr>
 
                    <td height="30px" colspan="3"></td>
 
                </tr>
 
            </table>
 
        </td>
 
        <td width="30px"></td>
 
@@ -1498,40 +1514,42 @@ View Comment: http://pr.org/comment
 
            </div>
 
            <div>
 
                <a style="color:#395fa0;text-decoration:none"
 
                   href="http://pr.org/7">#7</a>
 
                "<span style="color:#395fa0">The Title</span>"
 
                by
 
                <span style="color:#395fa0">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td>
 
<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>
 
                    </td>
 
                    <td></td>
 
                </tr>
 
                <tr>
 
                    <td height="30px" colspan="3"></td>
 
                </tr>
 
            </table>
 
        </td>
 
        <td width="30px"></td>
 
@@ -1679,40 +1697,42 @@ View Comment: http://pr.org/comment
 
            </div>
 
            <div>
 
                <a style="color:#395fa0;text-decoration:none"
 
                   href="http://pr.org/7">#7</a>
 
                "<span style="color:#395fa0">The Title</span>"
 
                by
 
                <span style="color:#395fa0">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td>
 
<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>
 
                    </td>
 
                    <td></td>
 
                </tr>
 
                <tr>
 
                    <td height="30px" colspan="3"></td>
 
                </tr>
 
            </table>
 
        </td>
 
        <td width="30px"></td>
 
@@ -1860,40 +1880,42 @@ View Comment: http://pr.org/comment
 
            </div>
 
            <div>
 
                <a style="color:#395fa0;text-decoration:none"
 
                   href="http://pr.org/7">#7</a>
 
                "<span style="color:#395fa0">The Title</span>"
 
                by
 
                <span style="color:#395fa0">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td>
 
<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>
 
                    </td>
 
                    <td></td>
 
                </tr>
 
                <tr>
 
                    <td height="30px" colspan="3"></td>
 
                </tr>
 
            </table>
 
        </td>
 
        <td width="30px"></td>
 
@@ -2040,40 +2062,42 @@ View Comment: http://pr.org/comment
 
            </div>
 
            <div>
 
                <a style="color:#395fa0;text-decoration:none"
 
                   href="http://pr.org/7">#7</a>
 
                "<span style="color:#395fa0">The Title</span>"
 
                by
 
                <span style="color:#395fa0">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td>
 
<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>
 
                    </td>
 
                    <td></td>
 
                </tr>
 
                <tr>
 
                    <td height="30px" colspan="3"></td>
 
                </tr>
 
            </table>
 
        </td>
 
        <td width="30px"></td>
 
@@ -2220,40 +2244,42 @@ View Comment: http://pr.org/comment
 
            </div>
 
            <div>
 
                <a style="color:#395fa0;text-decoration:none"
 
                   href="http://pr.org/7">#7</a>
 
                "<span style="color:#395fa0">The Title</span>"
 
                by
 
                <span style="color:#395fa0">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td>
 
<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>
 
                    </td>
 
                    <td></td>
 
                </tr>
 
                <tr>
 
                    <td height="30px" colspan="3"></td>
 
                </tr>
 
            </table>
 
        </td>
 
        <td width="30px"></td>
 
@@ -2406,40 +2432,42 @@ View Comment: http://pr.org/comment
 
            </div>
 
            <div>
 
                <a style="color:#395fa0;text-decoration:none"
 
                   href="http://pr.org/7">#7</a>
 
                "<span style="color:#395fa0">The Title</span>"
 
                by
 
                <span style="color:#395fa0">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td>
 
<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>
 
                    </td>
 
                    <td></td>
 
                </tr>
 
                <tr>
 
                    <td height="30px" colspan="3"></td>
 
                </tr>
 
            </table>
 
        </td>
 
        <td width="30px"></td>
 
@@ -2592,40 +2620,42 @@ View Comment: http://pr.org/comment
 
            </div>
 
            <div>
 
                <a style="color:#395fa0;text-decoration:none"
 
                   href="http://pr.org/7">#7</a>
 
                "<span style="color:#395fa0">The Title</span>"
 
                by
 
                <span style="color:#395fa0">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td>
 
<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>
 
                    </td>
 
                    <td></td>
 
                </tr>
 
                <tr>
 
                    <td height="30px" colspan="3"></td>
 
                </tr>
 
            </table>
 
        </td>
 
        <td width="30px"></td>
0 comments (0 inline, 0 general)