Make emails less ugly in Microsoft Outlook
authorTim Düsterhus <duesterhus@woltlab.com>
Mon, 6 Jun 2016 14:11:54 +0000 (16:11 +0200)
committerTim Düsterhus <duesterhus@woltlab.com>
Thu, 28 Jul 2016 20:06:18 +0000 (22:06 +0200)
… also make source code of emails more ugly for everyone else :(

com.woltlab.wcf/templates/email_html.tpl
com.woltlab.wcf/templates/email_paddingHelper.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/email_registerNeedActivation.tpl

index d6094dbb2b4f3a9bc72929d206293441a41fff5d..6bdf480d8f99d23f95a047e28662a0aac6cd3d45 100644 (file)
@@ -1,16 +1,29 @@
 <html>
        <head>
                <style type="text/css">
+               * {
+                       font-family: {@$style->getVariable('wcfFontFamilyFallback', true)};
+               }
                html {
                        padding: 0;
                        margin: 0;
-                       font-family: {@$style->getVariable('wcfFontFamilyFallback', true)};
                }
                body {
                        padding: 0;
                        margin: 0;
                        background-color: {$style->getVariable('wcfContentBackground', true)};
                }
+               
+               a {
+                       color: {$style->getVariable('wcfContentLink', true)};
+                       text-decoration: none;
+               }
+               
+               {* see email_paddingHelper.tpl *}
+               table.paddingHelper.block {
+                       width: 100%;
+               }
+               
                .content {
                        padding: 0 20px;
                }
                        font-size: {$style->getVariable('wcfFontSizeTitle')};
                        color: {$style->getVariable('wcfContentHeadlineText')};
                }
-               a {
-                       color: {$style->getVariable('wcfContentLink', true)};
-                       text-decoration: none;
-               }
-               a.button {
+               
+               {* Buttons *}
+               td.button {
                        background-color: {$style->getVariable('wcfButtonPrimaryBackground', true)};
-                       color: {$style->getVariable('wcfButtonPrimaryText', true)};
                        border-radius: 2px;
                        padding: 6px 12px;
                }
+               td.button a {
+                       color: {$style->getVariable('wcfButtonPrimaryText', true)};
+               }
                </style>
        </head>
        <body>
        <div class="content">
                {@$content}
        </div>
+       {capture assign='footer'}
        {hascontent}
-       <div class="footer">
        -- <br>
        {content}
        {@MAIL_SIGNATURE|language|nl2br}
@@ -50,8 +63,9 @@
        {if MAIL_SIGNATURE|language}<br><br>{/if}
        This email was sent to you, because you registered on the {$mailbox->getUser()->registrationDate|plainTime} at {@PAGE_TITLE|language}.{/if} {* TODO: language item *}
        {/content}
-       </div>
        {/hascontent}
+       {/capture}
+       {include file='email_paddingHelper' block=true class='footer' content=$footer sandbox=true}
        
        <table>{* Do not remove: This table is needed by certain less able email clients to properly support background colors. Don't ask. *}</table>
        </body>
diff --git a/com.woltlab.wcf/templates/email_paddingHelper.tpl b/com.woltlab.wcf/templates/email_paddingHelper.tpl
new file mode 100644 (file)
index 0000000..e18171b
--- /dev/null
@@ -0,0 +1,8 @@
+{* This construct is needed for Microsoft Outlook: https://litmus.com/help/email-clients/outlookcom-margins/ *}
+<table cellpadding="0" cellspacing="0" border="0" class="paddingHelper{if $block|isset && $block} block{/if}">
+       <tr>
+               <td class="{$class}">
+                       {@$content}
+               </td>
+       </tr>
+</table>
index 13218b32150bd02d37ecf0415620edb9bb2cf0ff..bec7cbcc201077f9221fa9a13d2a92b1dabbc1a8 100644 (file)
@@ -5,9 +5,14 @@
        {capture assign='content'}
        <h1>{lang}wcf.user.register.needActivation.mail.html.headline{/lang}</h1>
        {lang}wcf.user.register.needActivation.mail.html.intro{/lang}
-       <a href="{link controller='RegisterActivation' isEmail=true}u={@$mailbox->getUser()->userID}&a={@$mailbox->getUser()->activationCode}{/link}" class="button">
+
+       {capture assign=button}
+       <a href="{link controller='RegisterActivation' isEmail=true}u={@$mailbox->getUser()->userID}&a={@$mailbox->getUser()->activationCode}{/link}">
                {lang}wcf.user.register.needActivation.mail.html.activate{/lang}
        </a>
+       {/capture}
+       {include file='email_paddingHelper' class='button' content=$button sandbox=true}
+
        {lang}wcf.user.register.needActivation.mail.html.outro{/lang}
        {/capture}
        {include file='email_html'}