Custom HTML email renderers and new email style (#991)

* Custom HTML email renderers

* Move inline_css call

* Small fixes

* New HTML mail style for pretix

* Thumbs

* Inlinestyle for notifications

* Documentation

* Set line-height

src/pretix/base/__init__.py

@@ -12,6 +12,7 @@ class PretixBaseConfig(AppConfig):
         from . import exporters  # NOQA
         from . import invoice  # NOQA
         from . import notifications  # NOQA
+        from . import email  # NOQA
         from .services import auth, export, mail, tickets, cart, orders, invoices, cleanup, update_check, quotas, notifications  # NOQA
 
         try:

src/pretix/base/email.py

@@ -1,7 +1,18 @@
 import logging
 from smtplib import SMTPRecipientsRefused, SMTPSenderRefused
 
+import bleach
+import markdown
+from django.conf import settings
 from django.core.mail.backends.smtp import EmailBackend
+from django.dispatch import receiver
+from django.template.loader import get_template
+from django.utils.translation import ugettext_lazy as _
+from inlinestyler.utils import inline_css
+
+from pretix.base.models import Event, Order
+from pretix.base.signals import register_html_mail_renderers
+from pretix.base.templatetags.rich_text import markdown_compile
 
 logger = logging.getLogger('pretix.base.email')
 
@@ -24,3 +35,103 @@ class CustomSMTPBackend(EmailBackend):
                 raise SMTPRecipientsRefused(senderrs)
         finally:
             self.close()
+
+
+class BaseHTMLMailRenderer:
+    """
+    This is the base class for all HTML e-mail renderers.
+    """
+
+    def __init__(self, event: Event):
+        self.event = event
+
+    def __str__(self):
+        return self.identifier
+
+    def render(self, plain_body: str, plain_signature: str, subject: str, order: Order=None) -> str:
+        """
+        This method should generate the HTML part of the email.
+
+        :param plain_body: The body of the email in plain text.
+        :param plain_signature: The signature with event organizer contact details in plain text.
+        :param subject: The email subject.
+        :param order: The order if this email is connected to one, otherwise ``None``.
+        :return: An HTML string
+        """
+        raise NotImplementedError()
+
+    @property
+    def verbose_name(self) -> str:
+        """
+        A human-readable name for this renderer. This should be short but self-explanatory.
+        """
+        raise NotImplementedError()  # NOQA
+
+    @property
+    def identifier(self) -> str:
+        """
+        A short and unique identifier for this renderer.
+        This should only contain lowercase letters and in most cases will be the same as your package name or prefixed
+        with your package name.
+        """
+        raise NotImplementedError()  # NOQA
+
+    @property
+    def thumbnail_filename(self) -> str:
+        """
+        A file name discoverable in the static file storage that contains a preview of your renderer. This should
+        be with aspect resolution 4:3.
+        """
+        raise NotImplementedError()  # NOQA
+
+    @property
+    def is_available(self) -> bool:
+        """
+        This renderer will only be available if this returns ``True``. You can use this to limit this renderer
+        to certain events. Defaults to ``True``.
+        """
+        return True
+
+
+class TemplateBasedMailRenderer(BaseHTMLMailRenderer):
+
+    @property
+    def template_name(self):
+        raise NotImplemented
+
+    def render(self, plain_body: str, plain_signature: str, subject: str, order: Order) -> str:
+        body_md = bleach.linkify(markdown_compile(plain_body))
+        htmlctx = {
+            'site': settings.PRETIX_INSTANCE_NAME,
+            'site_url': settings.SITE_URL,
+            'body': body_md,
+            'subject': str(subject),
+            'color': '#8E44B3'
+        }
+        if self.event:
+            htmlctx['event'] = self.event
+            htmlctx['color'] = self.event.settings.primary_color
+
+        if plain_signature:
+            signature_md = plain_signature.replace('\n', '<br>\n')
+            signature_md = bleach.linkify(bleach.clean(markdown.markdown(signature_md), tags=bleach.ALLOWED_TAGS + ['p', 'br']))
+            htmlctx['signature'] = signature_md
+
+        if order:
+            htmlctx['order'] = order
+
+        tpl = get_template(self.template_name)
+        body_html = inline_css(tpl.render(htmlctx))
+        return body_html
+
+
+class ClassicMailRenderer(TemplateBasedMailRenderer):
+    verbose_name = _('pretix default')
+    identifier = 'classic'
+    thumbnail_filename = 'pretixbase/email/thumb.png'
+    template_name = 'pretixbase/email/plainwrapper.html'
+
+
+@receiver(register_html_mail_renderers, dispatch_uid="pretixbase_email_renderers")
+def base_renderers(sender, **kwargs):
+    return [ClassicMailRenderer]

src/pretix/base/models/event.py

@@ -19,7 +19,6 @@ from django.utils.timezone import make_aware, now
 from django.utils.translation import ugettext_lazy as _
 from i18nfield.fields import I18nCharField, I18nTextField
 
-from pretix.base.email import CustomSMTPBackend
 from pretix.base.models.base import LoggedModel
 from pretix.base.reldate import RelativeDateWrapper
 from pretix.base.validators import EventSlugBlacklistValidator
@@ -327,6 +326,8 @@ class Event(EventMixin, LoggedModel):
         Returns an email server connection, either by using the system-wide connection
         or by returning a custom one based on the event's settings.
         """
+        from pretix.base.email import CustomSMTPBackend
+
         if self.settings.smtp_use_custom or force_custom:
             return CustomSMTPBackend(host=self.settings.smtp_host,
                                      port=self.settings.smtp_port,
@@ -479,6 +480,31 @@ class Event(EventMixin, LoggedModel):
 
         return OrderedDict(sorted(providers.items(), key=lambda v: str(v[1].verbose_name)))
 
+    def get_html_mail_renderer(self):
+        """
+        Returns the currently selected HTML email renderer
+        """
+        return self.get_html_mail_renderers()[
+            self.settings.mail_html_renderer
+        ]
+
+    def get_html_mail_renderers(self) -> dict:
+        """
+        Returns a dictionary of initialized HTML email renderers mapped by their identifiers.
+        """
+        from ..signals import register_html_mail_renderers
+
+        responses = register_html_mail_renderers.send(self)
+        renderers = {}
+        for receiver, response in responses:
+            if not isinstance(response, list):
+                response = [response]
+            for p in response:
+                pp = p(self)
+                if pp.is_available:
+                    renderers[pp.identifier] = pp
+        return renderers
+
     def get_invoice_renderers(self) -> dict:
         """
         Returns a dictionary of initialized invoice renderers mapped by their identifiers.

src/pretix/base/models/orders.py

@@ -508,7 +508,7 @@ class Order(LoggedModel):
         with language(self.locale):
             recipient = self.email
             try:
-                email_content = render_mail(template, context)[0]
+                email_content = render_mail(template, context)
                 mail(
                     recipient, subject, template, context,
                     self.event, self.locale, self, headers, sender,

src/pretix/base/services/mail.py

@@ -2,22 +2,19 @@ import logging
 from email.utils import formataddr
 from typing import Any, Dict, List, Union
 
-import bleach
 import cssutils
-import markdown
 from celery import chain
 from django.conf import settings
 from django.core.mail import EmailMultiAlternatives, get_connection
 from django.template.loader import get_template
 from django.utils.translation import ugettext as _
 from i18nfield.strings import LazyI18nString
-from inlinestyler.utils import inline_css
 
+from pretix.base.email import ClassicMailRenderer
 from pretix.base.i18n import language
 from pretix.base.models import Event, Invoice, InvoiceAddress, Order
 from pretix.base.services.invoices import invoice_pdf_task
 from pretix.base.signals import email_filter
-from pretix.base.templatetags.rich_text import markdown_compile
 from pretix.celery_app import app
 from pretix.multidomain.urlreverse import build_absolute_uri
 
@@ -88,7 +85,8 @@ def mail(email: str, subject: str, template: Union[str, LazyI18nString],
                     'invoice_name': '',
                     'invoice_company': ''
                 })
-        body, body_md = render_mail(template, context)
+        renderer = ClassicMailRenderer(None)
+        body_plain = render_mail(template, context)
         subject = str(subject).format_map(context)
         sender = sender or (event.settings.get('mail_from') if event else settings.MAIL_FROM)
         if event:
@@ -97,19 +95,11 @@ def mail(email: str, subject: str, template: Union[str, LazyI18nString],
             sender = formataddr((settings.PRETIX_INSTANCE_NAME, sender))
 
         subject = str(subject)
-        body_plain = body
-
-        htmlctx = {
-            'site': settings.PRETIX_INSTANCE_NAME,
-            'site_url': settings.SITE_URL,
-            'body': body_md,
-            'color': '#8E44B3'
-        }
+        signature = ""
 
         bcc = []
         if event:
-            htmlctx['event'] = event
-            htmlctx['color'] = event.settings.primary_color
+            renderer = event.get_html_mail_renderer()
             if event.settings.mail_bcc:
                 bcc.append(event.settings.mail_bcc)
 
@@ -127,9 +117,6 @@ def mail(email: str, subject: str, template: Union[str, LazyI18nString],
             signature = str(event.settings.get('mail_text_signature'))
             if signature:
                 signature = signature.format(event=event.name)
-                signature_md = signature.replace('\n', '<br>\n')
-                signature_md = bleach.linkify(bleach.clean(markdown.markdown(signature_md), tags=bleach.ALLOWED_TAGS + ['p', 'br']))
-                htmlctx['signature'] = signature_md
                 body_plain += signature
                 body_plain += "\r\n\r\n-- \r\n"
 
@@ -137,7 +124,6 @@ def mail(email: str, subject: str, template: Union[str, LazyI18nString],
                 body_plain += _(
                     "You are receiving this email because you placed an order for {event}."
                 ).format(event=event.name)
-                htmlctx['order'] = order
                 body_plain += "\r\n"
                 body_plain += _(
                     "You can view your order details at the following URL:\n{orderurl}."
@@ -151,8 +137,11 @@ def mail(email: str, subject: str, template: Union[str, LazyI18nString],
                 )
             body_plain += "\r\n"
 
-        tpl = get_template('pretixbase/email/plainwrapper.html')
-        body_html = tpl.render(htmlctx)
+        try:
+            body_html = renderer.render(body_plain, signature, str(subject), order)
+        except:
+            logger.exception('Could not render HTML body')
+            body_html = None
 
         send_task = mail_send_task.si(
             to=[email],
@@ -182,7 +171,7 @@ def mail_send_task(*args, to: List[str], subject: str, body: str, html: str, sen
                    order: int=None) -> bool:
     email = EmailMultiAlternatives(subject, body, sender, to=to, bcc=bcc, headers=headers)
     if html is not None:
-        email.attach_alternative(inline_css(html), "text/html")
+        email.attach_alternative(html, "text/html")
     if invoices:
         invoices = Invoice.objects.filter(pk__in=invoices)
         for inv in invoices:
@@ -225,5 +214,4 @@ def render_mail(template, context):
     else:
         tpl = get_template(template)
         body = tpl.render(context)
-    body_md = bleach.linkify(markdown_compile(body))
-    return body, body_md
+    return body

src/pretix/base/services/notifications.py

@@ -1,5 +1,6 @@
 from django.conf import settings
 from django.template.loader import get_template
+from inlinestyler.utils import inline_css
 
 from pretix.base.i18n import language
 from pretix.base.models import LogEntry, NotificationSetting, User
@@ -91,7 +92,7 @@ def send_notification_mail(notification: Notification, user: User):
     }
 
     tpl_html = get_template('pretixbase/email/notification.html')
-    body_html = tpl_html.render(ctx)
+    body_html = inline_css(tpl_html.render(ctx))
     tpl_plain = get_template('pretixbase/email/notification.txt')
     body_plain = tpl_plain.render(ctx)
 

src/pretix/base/settings.py

@@ -225,6 +225,10 @@ DEFAULTS = {
         'default': None,
         'type': LazyI18nString
     },
+    'mail_html_renderer': {
+        'default': 'classic',
+        'type': str
+    },
     'mail_prefix': {
         'default': None,
         'type': str

src/pretix/base/signals.py

@@ -124,6 +124,16 @@ subclass of pretix.base.payment.BasePaymentProvider or a list of these
 As with all event-plugin signals, the ``sender`` keyword argument will contain the event.
 """
 
+register_html_mail_renderers = EventPluginSignal(
+    providing_args=[]
+)
+"""
+This signal is sent out to get all known HTML email renderers. Receivers should return a
+subclass of pretix.base.email.BaseHTMLMailRenderer or a list of these
+
+As with all event-plugin signals, the ``sender`` keyword argument will contain the event.
+"""
+
 register_invoice_renderers = EventPluginSignal(
     providing_args=[]
 )

src/pretix/base/templates/pretixbase/email/base.html

@@ -5,163 +5,206 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, user-scalable=false">
-</head>
-<style type="text/css">
-    body {
-        background-color: #e8e8e8;
-        background-position: top;
-        background-repeat: repeat-x;
-        font-family: "Open Sans", "OpenSans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-        font-size: 14px;
-        line-height: 20px;
-        color: #333;
-        margin: 0;
-    }
-
-    .header h1 {
-        margin-top: 20px;
-        margin-bottom: 20px;
-    }
-
-    .header h1 a, .content h2 a, .content h3 a {
-        text-decoration: none;
-    }
-
-    .content h2, .content h3 {
-        margin-bottom: 20px;
-        margin-top: 10px;
-    }
-
-    a {
-        color: {{ color }};
-        font-weight: bold;
-    }
-
-    a:hover, a:focus {
-        color: {{ color }};
-        text-decoration: underline;
-    }
-
-    a:hover, a:active {
-        outline: 0;
-    }
-
-    p {
-        margin: 0 0 10px;
-
-        /* These are technically the same, but use both */
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-
-        -ms-word-break: break-all;
-        /* This is the dangerous one in WebKit, as it breaks things wherever */
-        word-break: break-all;
-        /* Instead use this non-standard one: */
-        word-break: break-word;
-
-        /* Adds a hyphen where the word breaks, if supported (No Blink) */
-        -ms-hyphens: auto;
-        -moz-hyphens: auto;
-        -webkit-hyphens: auto;
-        hyphens: auto;
-    }
-
-    .footer {
-        padding: 10px;
-        text-align: center;
-        font-size: 12px;
-    }
-
-    .content {
-        padding: 8px 18px 8px;
-    }
-
-    ::selection {
-        background: {{ color }};
-        color: #FFF;
-    }
-
-    table.layout {
-        width: 90%;
-        max-width: 900px;
-        border-spacing: 0px;
-        border-collapse: separate;
-        margin: auto;
-    }
-
-    .content table {
-        width: 100%;
-    }
-
-    .content table td {
-        vertical-align: top;
-        text-align: left;
-        padding: 5px 0;
-    }
-    a.button {
-        display: inline-block;
-        padding: 10px 16px;
-        font-size: 14px;
-        line-height: 1.33333;
-        border: 1px solid #cccccc;
-        border-radius: 6px;
-        -webkit-border-radius: 6px;
-        -moz-border-radius: 6px;
-        margin: 5px;
-        text-decoration: none;
-        color: {{ color }};
-    }
-
-    @media (max-width: 480px) {
-        .header h1 {
-            font-size: 19px;
-            line-height: 24px;
-            margin: 0 9px 3px 0;
-            border-radius: 5px 5px;
-            -webkit-border-radius: 5px 5px;
-            -moz-border-radius: 5px 5px;
-        }
-
-        .header h1 a {
-            padding: 3px 9px;
-            display: block;
-        }
-
-        .header {
+    <style type="text/css">
+        body {
+            background-color: #eee;
+            background-position: top;
+            background-repeat: repeat-x;
+            font-family: "Open Sans", "OpenSans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-size: 14px;
+            line-height: 20px;
+            color: #333;
             margin: 0;
-            padding: 12px 0 8px;
+            padding-top: 20px;
         }
-    }
 
-    td.containertd {
-        background-color: #FFFFFF;
-        border: 1px solid #cccccc;
-    }
+        table.layout > tr > td {
+            background-color: white;
+            padding: 0;
+        }
 
-    {% block addcss %}{% endblock %}
-</style>
-<body>
-    <table class="layout">
+        table.layout > tr > td.header {
+            padding: 0 20px;
+            text-align: center;
+        }
+
+        .header h2 {
+            margin-top: 20px;
+            margin-bottom: 10px;
+            font-size: 22px;
+            line-height: 26px;
+        }
+
+        .header h1 {
+            margin-top: 0;
+            margin-bottom: 20px;
+            font-size: 26px;
+            line-height: 30px;
+        }
+
+        .header h2 a, .header h1 a, .content h2 a, .content h3 a {
+            text-decoration: none;
+        }
+
+        .content h2, .content h3 {
+            margin-bottom: 20px;
+            margin-top: 10px;
+        }
+
+        a {
+            color: {{ color }};
+            font-weight: bold;
+        }
+
+        a:hover, a:focus {
+            color: {{ color }};
+            text-decoration: underline;
+        }
+
+        a:hover, a:active {
+            outline: 0;
+        }
+
+        p {
+            margin: 0 0 10px;
+
+            /* These are technically the same, but use both */
+            overflow-wrap: break-word;
+            word-wrap: break-word;
+
+            -ms-word-break: break-all;
+            /* This is the dangerous one in WebKit, as it breaks things wherever */
+            word-break: break-all;
+            /* Instead use this non-standard one: */
+            word-break: break-word;
+
+            /* Adds a hyphen where the word breaks, if supported (No Blink) */
+            -ms-hyphens: auto;
+            -moz-hyphens: auto;
+            -webkit-hyphens: auto;
+            hyphens: auto;
+        }
+        p:last-child {
+            margin-bottom: 0;
+        }
+
+        .footer {
+            padding: 10px;
+            text-align: center;
+            font-size: 12px;
+        }
+
+        .content {
+            padding: 0 18px;
+        }
+
+        ::selection {
+            background: {{ color }};
+            color: #FFF;
+        }
+
+        table.layout {
+            width: 100%;
+            max-width: 600px;
+            border-spacing: 0px;
+            border-collapse: separate;
+            margin: auto;
+        }
+
+        img.wide {
+            width: 100%;
+            height: auto;
+        }
+
+        .content table {
+            width: 100%;
+        }
+
+        .content table td {
+            vertical-align: top;
+            text-align: left;
+            padding: 0;
+        }
+
+        a.button {
+            display: inline-block;
+            padding: 10px 16px;
+            font-size: 14px;
+            line-height: 1.33333;
+            border: 1px solid #cccccc;
+            border-radius: 6px;
+            -webkit-border-radius: 6px;
+            -moz-border-radius: 6px;
+            margin: 5px;
+            text-decoration: none;
+            color: {{ color }};
+        }
+
+        {% block addcss %}{% endblock %}
+    </style>
+    <!--[if mso]>
+        <style type="text/css">
+        body, table, td {
+            font-family: "Open Sans", "OpenSans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
+        }
+        </style>
+    <![endif]-->
+</head>
+<body align="center">
+    <!--[if gte mso 9]>
+    <table width="100%"><tr><td align="center">
+    <table width="600"><tr><td align="center"
+    <![endif]-->
+    <table class="layout" width="600" border="0" cellspacing="0">
+        <!--[if !mso]><!-- -->
         <tr>
-            <td class="header" background="">
-                {% if event %}
-                    <h1><a href="{% abseventurl event "presale:event.index" %}" target="_blank">{{ event.name }}</a></h1>
-                {% else %}
-                    <h1><a href="{{ site_url }}" target="_blank">{{ site }}</a></h1>
-                {% endif %}
+            <td>
+                <img class="wide" src="data:image/png;base64,
+                iVBORw0KGgoAAAANSUhEUgAAAlgAAAA8CAAAAACf95tlAAAAAXNCSVQI5gpbmQAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAG/SURBVHja7dvRboMwDIXhvf/DLiQQAwkku9+qDgq2hPyfN6j1qTlx06/uMunbLMnnhL98fuzRDtYILEeZ7GBNwAIWsIB1LdkOVgaWo4gdLAGWo6x2sFZgOUq1g1WB5SjNDlYDlqcEK1dDB5anmK3eE7C4FnIpBNbVFLo7sB7d3huwKFlULGA9pWQJsJxls4G1ActbooWr2IHlLbMFrBlY7rJbwNqBxb2QZ8nAuiUGO9ICLOo71R1YN0X9td8KLJ8ZeDEDrAd+Za3A4mLIz4TAujGqv+tUYPmN4v8LcweW3zS1t++hActzCrtRYD3pMJQOLOeJ7NyBpZFdoWaFDVjuJ6BRswpTBZbCAn5hpsDq/fbHpDMTBZbC1TAzT2ApyMIVsDROQ2GWwFJo8PR2YP3eOtywzwrsGYD1J9vlHXzcmSKw7q/wU2OEwHpdtALHILA00jJfV8DSaVofvYOPlckB658sp/8VNrBkANahqnXqfhhXJgasgymHD8REZwfWmezzga+tQdhcAet0qry1FYV3osD6dP1QJL3YbYUkhfUCsK6einWRPI0pxjROWZbK+QcsAiwCLEKARYBFgEXIu/wAYbjtwujw8KwAAAAASUVORK5CYII="
+                style="max-height: 60px;">
             </td>
         </tr>
+        <!--<![endif]-->
+        <tr>
+            <td class="header" align="center">
+                <!--[if gte mso 9]>
+                    <table cellpadding="20"><tr><td align="center">
+                <![endif]-->
+                {% if event %}
+                    <h2><a href="{% abseventurl event "presale:event.index" %}" target="_blank">{{ event.name }}</a>
+                    </h2>
+                {% else %}
+                    <h2><a href="{{ site_url }}" target="_blank">{{ site }}</a></h2>
+                {% endif %}
+                {% block header %}
+                    <h1>{{ subject }}</h1>
+                {% endblock %}
+                <!--[if gte mso 9]>
+                    </td></tr></table>
+                <![endif]-->
+            </td>
+        </tr>
+        {% include "pretixbase/email/separator.html" %}
         {% block content %}
         {% endblock %}
+        <!--[if !mso]><!-- -->
         <tr>
-            <td class="footer">
-                <div>
-                    {% include "pretixbase/email/email_footer.html" %}
-                </div>
+            <td>
+                <br>
+                <img class="wide" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAA8CAYAAAC6nMS5AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAPnSURBVHic7d3dbuJIEAbQsg2Ecd7/TQeDf3svVuFmdjJLxsGm+xwJKXcpqS76U3VTVCmlFAAArKbeugAAgNwIWAAAKxOwAABWJmABAKxMwAIAWNlh6wIAIiKWZYllWWKe5/vfEREppfsnIqKqqvsnIqKu66jrOpqmuf8NsDUBC3i6lFJM0xTjOMY0TbEsS6y1MaaqqqjrOg6HQxyPxzgcDvcwBvAslT1YwDN8BKpxHGOe56f+76Zp4ng83gMXwHcTsIBvsyxLDMMQfd/fr/y2Vtd1nE6nOJ1O0TTN1uUAmRKwgNV9hKppmrYu5VOHwyHO53Mcj8etSwEyI2ABqxmGIW6329OvAP9WXddxPp/j7e1t61KATAhYwF/r+z5ut9turgG/StAC1iJgAV82z3N0Xbf7q8BHNU0Tbdt6EA98mYAFPCylFNfrNfq+37qUb3U6naJtW2segIcJWMBDhmGIrutW21u1d1VVRdu2cTqdti4FeCECFvC/lDK1+h3TLOARAhbwR/M8x+VyeblvB66taZp4f3+3Pwv4IwEL+NQ4jnG5XIq5EvyTqqri/f3d7izgUwIW8FvDMMTlctm6jF1q29Y6B+C3BCzgP91ut7her1uXsWvn8zl+/PixdRnADglYwC+6riv2Mfuj3t7eom3brcsAdqbeugBgX4Srx/R9H13XbV0GsDMCFnB3u92Eqy/4+KkggA8CFhAR/z5o9+bq60reEQb8SsAC7qsY+Dtd18U4jluXAeyAgAWFW5ZFuFqRhaxAhIAFxfv586cloitKKVnMCghYULKu60xbvsE8z96zQeEELCjUOI4eZX+jvu+9x4KCCVhQoI9rLL6Xq0Iol4AFBbperw7+J0gpuSqEQglYUJh5nl0NPlHf9zFN09ZlAE8mYEFh/KzL85liQXkELCiIaco2pmmKYRi2LgN4IgELCuL38rZjigVlEbCgEMMwxLIsW5dRrGVZTLGgIAIWFML0ant6AOUQsKAA4zja2L4D8zxbPgqFELCgACYn+6EXUAYBCzK3LItvDu7INE3ewkEBBCzInIfV+6MnkD8BCzLnMN8fPYH8CViQsXmePW7fIX2B/AlYkDGTkv3SG8ibgAUZ87h9v/QG8iZgQaZSSg7xHZumKVJKW5cBfBMBCzIlXO2fHkG+BCzIlMN7//QI8iVgQaYc3vunR5AvAQsyZQ3A/tnoDvkSsCBDKSUPqF/Asiz6BJkSsCBDplevQ68gTwIWZMjV0+vQK8iTgAUZMhV5HXoFeRKwIEPe9bwOvYI8CViQIYf269AryJOABQCwMgELMmQq8jr0CvIkYEGGHNqvQ68gT/8AETAn3pyLgvsAAAAASUVORK5CYII="
+                style="max-height: 60px;">
             </td>
         </tr>
+        <!--<![endif]-->
     </table>
+    <div class="footer">
+        {% include "pretixbase/email/email_footer.html" %}
+    </div>
     <br/>
     <br/>
+    <!--[if gte mso 9]>
+    </td></tr></table>
+    </td></tr></table>
+    <![endif]-->
 </body>
 </html>

src/pretix/base/templates/pretixbase/email/notification.html

@@ -1,15 +1,20 @@
 {% extends "pretixbase/email/base.html" %}
 {% load eventurl %}
 {% load i18n %}
+{% block header %}
+    <h1>
+        {% if notification.url %}<a href="{{ notification.url }}">{% endif %}
+        {{ notification.title }}
+        {% if notification.url %}</a>{% endif %}
+    </h1>
+{% endblock %}
 {% block content %}
     <tr>
         <td class="containertd">
+            <!--[if gte mso 9]>
+                    <table cellpadding="20"><tr><td>
+            <![endif]-->
             <div class="content">
-                <h3>
-                    {% if notification.url %}<a href="{{ notification.url }}">{% endif %}
-                    {{ notification.title }}
-                    {% if notification.url %}</a>{% endif %}
-                </h3>
                 {% if notification.detail %}
                     <p>{{ notification.detail }}</p>
                 {% endif %}
@@ -35,10 +40,17 @@
                     </p>
                 {% endif %}
             </div>
+            <!--[if gte mso 9]>
+                    </td></tr></table>
+            <![endif]-->
         </td>
     </tr>
+    {% include "pretixbase/email/separator.html" %}
     <tr>
         <td class="containertd">
+            <!--[if gte mso 9]>
+                    <table cellpadding="20"><tr><td>
+            <![endif]-->
             <div class="content">
                 {% trans "You receive these emails based on your notification settings." %}<br>
                 <a href="{{ settings_url }}">
@@ -48,6 +60,9 @@
                     {% trans "Click here disable all notifications immediately." %}
                 </a>
             </div>
+            <!--[if gte mso 9]>
+                    </td></tr></table>
+            <![endif]-->
         </td>
     </tr>
 {% endblock %}

src/pretix/base/templates/pretixbase/email/plainwrapper.html

@@ -4,17 +4,24 @@
 {% block content %}
     <tr>
         <td class="containertd">
+            <!--[if gte mso 9]>
+                    <table cellpadding="20"><tr><td>
+                <![endif]-->
             <div class="content">
                 {{ body|safe }}
             </div>
+            <!--[if gte mso 9]>
+                    </td></tr></table>
+                <![endif]-->
         </td>
     </tr>
     {% if order %}
-        <tr>
-            <td class="gap"></td>
-        </tr>
+        {% include "pretixbase/email/separator.html" %}
         <tr>
             <td class="order containertd">
+                <!--[if gte mso 9]>
+                    <table cellpadding="20"><tr><td>
+                <![endif]-->
                 <div class="content">
                     {% trans "You are receiving this email because you placed an order for the following event:" %}<br>
                     <strong>{% trans "Event:" %}</strong> {{ event.name }}<br>
@@ -24,18 +31,25 @@
                         {% trans "View order details" %}
                     </a>
                 </div>
+                <!--[if gte mso 9]>
+                    </td></tr></table>
+                <![endif]-->
             </td>
         </tr>
     {% endif %}
 	{% if signature %}
-        <tr>
-            <td class="gap"></td>
-        </tr>
+        {% include "pretixbase/email/separator.html" %}
         <tr>
             <td class="order containertd">
+                <!--[if gte mso 9]>
+                    <table cellpadding="20"><tr><td>
+                <![endif]-->
                 <div class="content">
                     {{ signature | safe }}
                 </div>
+                <!--[if gte mso 9]>
+                    </td></tr></table>
+                <![endif]-->
             </td>
         </tr>
     {% endif %}

src/pretix/base/templates/pretixbase/email/separator.html

@@ -0,0 +1,15 @@
+<!--[if !mso]><!-- -->
+<tr>
+    <td>
+        <img class="wide" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAAoBAMAAADQ9ZkHAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAC1QTFRF7u7u7+/v8PDw8fHx8vLy9PT09fX19/f3+Pj4+fn5+vr6/Pz8/f39/v7+////BLnnfgAAAKJJREFUaN7t1cGtgUEARtFfQkREDypQihpUoIQXpahADUqRiIgINdjehcXbSTjf8s5mchYzw9P+vQEBLFiwYMGChQAWLFiwYMFCAAsWLFhfipX9pe/S1+nH9EX6OX2Wfk2fpN/TR73QMgeH9E36Nn2fvko/pc/TL+nT9Fv6OP0xvB8sWLA+g+XZ9hvCggULFiwEsGDBggULFgJYsGDBgvXzewGTOlWA3NB0eQAAAABJRU5ErkJggg=="
+            style="max-height: 40px;">
+    </td>
+</tr>
+<!--<![endif]-->
+<!--[if gte mso 9]>
+<tr>
+    <td background="white" style="background-color: white;">
+        <hr background="white" style="background-color: white;"/>
+    </td>
+</tr>
+<![endif]-->