Login/Register
Django HTML E-mail template doesn't load css in the e-mail
Asked Answered
djangodjango-email
T

3

20

I am sending HTML E-mail from Django like this:

template_html = "email/deposit_email.html"
                email_context = Context({ 'contact': contact, 'amount': amount})

                subject, from_email, to = 'Deposit Successfully created.', settings.EMAIL_HOST_USER, contact_email
                text_content = "Thank you for depositing the amount of " + str(amount) + "."

                html = loader.get_template(template_html)
                html_content = html.render(email_context)
                msg = EmailMultiAlternatives(subject, text_content, from_email, [to])
                msg.attach_alternative(html_content, "text/html")
                msg.send()

I am getting an e-mail without any css. I loaded the template itself in Django using:

return render(request, 'templatename_html')

The template is loading properly with all css in the django but not while sending e-mail in the gmail. What's wrong?

Tanguy answered 14/11, 2013 at 5:39 Comment(6)
Most css does not work in email clients – Sequence
I am opening the e-mail from gmail.com – Tanguy
Gmail does not support either. – Sequence
huh?Then how come when I receive e-mails from oDesk and groupon they come with proper css? – Tanguy
Open these emails and read their source code. html email are styled with tables and html attributes – Sequence
@Tanguy also make sure you are using absolute URL while including the CSS since relative URL will fail to download any CSS resource and IMAGES that you might be using. – Crownpiece
L
22

As other devs mentioned email clients do not load external css, so you have to inline it. Inlining css manually is poor decision. There are libraries to inline css. One of them is django-inlinecss. You can keep you code exactly as it is. All you need to do is to install django-inlinecss and to change "deposit_email.html". I do not know how it looks, because you have not publish it, so I give you example of simple header like email template I used before with success.

{% load inlinecss %}
{% inlinecss "css/email.css" %}

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <table class="body">
    <tr>
      <td class="center" align="center" valign="top">
        <center>

          <table class="row header">
            <tr>
              <td class="center" align="center">
                <center>

                  <table class="container">
                    <tr>
                      <td class="wrapper last">

                        <table class="twelve columns">
                          <tr>
                            <td>
                              <img src="your_header_link">
                            </td>
                            <td class="expander"></td>
                          </tr>
                        </table>

                      </td>
                    </tr>
                  </table>

                </center>
              </td>
            </tr>
          </table>

          <table class="container">
            <tr>
              <td>
                <table class="row">
                  <tr>
                    <td class="wrapper last">

                      <table class="twelve columns">
                        <tr>
                          <td>

                            {% block content %} Email {% endblock %}

                            <td class="expander"></td>
                        </tr>
                      </table>

                      </td>
                  </tr>
                </table>
                </td>
            </tr>
          </table>

        </center>
        </td>
    </tr>
  </table>
</body>

</html>
{% endinlinecss %}

Not much going on here. First line loads inlinecss tag.

{% load inlinecss %}

Second line starts html, which will be css inlined. It also load email.css which can be any static file in your django project.

{% inlinecss "css/email.css" %}

After that table based template which has header and body with django block 'content'. Final line is

{% endinlinecss %}

Which ends inlinecss. As you can see I inline my entire template. I recommend to have one or more parent email templates, which contain template structure and than to use template inheritance for particular emails. In that way you need to specify template and inline your css once.

Last but not least. In order for table template to play nicely you need email.css styles. CSS is a bit big, but simple in nature. Add your own styles on top of that.

        #outlook a {
            padding: 0;
        }

        body {
            width: 100% !important;
            min-width: 100%;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            margin: 0;
            padding: 0;
        }

        .ExternalClass {
            width: 100%;
        }

        .ExternalClass,
        .ExternalClass p,
        .ExternalClass span,
        .ExternalClass font,
        .ExternalClass td,
        .ExternalClass div {
            line-height: 100%;
        }

        #backgroundTable {
            margin: 0;
            padding: 0;
            width: 100% !important;
            line-height: 100% !important;
        }

        img {
            outline: none;
            text-decoration: none;
            -ms-interpolation-mode: bicubic;
            width: auto;
            max-width: 100%;
            float: left;
            clear: both;
            display: block;
        }

        center {
            width: 100%;
            min-width: 580px;
        }

        a img {
            border: none;
        }

        p {
            margin: 0 0 0 10px;
        }

        table {
            border-spacing: 0;
            border-collapse: collapse;
        }

        td {
            word-break: normal;
            -webkit-hyphens: auto;
            -moz-hyphens: auto;
            hyphens: auto;
            border-collapse: collapse !important;
        }

        table, tr, td {
            padding: 0;
            vertical-align: top;
            text-align: left;
        }

        hr {
            color: #d9d9d9;
            background-color: #d9d9d9;
            height: 1px;
            border: none;
        }

        /* Responsive Grid */

        table.body {
            height: 100%;
            width: 100%;
        }

        table.container {
            width: 580px;
            margin: 0 auto;
            text-align: inherit;
        }

        table.row {
            padding: 0px;
            width: 100%;
            position: relative;
        }

        table.container table.row {
            display: block;
        }

        td.wrapper {
            padding: 10px 20px 0px 0px;
            position: relative;
        }

        table.columns,
        table.column {
            margin: 0 auto;
        }

        table.columns td,
        table.column td {
            padding: 0px 0px 10px;
        }

        table.columns td.sub-columns,
        table.column td.sub-columns,
        table.columns td.sub-column,
        table.column td.sub-column {
            padding-right: 10px;
        }

        td.sub-column, td.sub-columns {
            min-width: 0px;
        }

        table.row td.last,
        table.container td.last {
            padding-right: 0px;
        }

        table.one {
            width: 30px;
        }

        table.two {
            width: 80px;
        }

        table.three {
            width: 130px;
        }

        table.four {
            width: 180px;
        }

        table.five {
            width: 230px;
        }

        table.six {
            width: 280px;
        }

        table.seven {
            width: 330px;
        }

        table.eight {
            width: 380px;
        }

        table.nine {
            width: 430px;
        }

        table.ten {
            width: 480px;
        }

        table.eleven {
            width: 530px;
        }

        table.twelve {
            width: 580px;
        }

        table.one center {
            min-width: 30px;
        }

        table.two center {
            min-width: 80px;
        }

        table.three center {
            min-width: 130px;
        }

        table.four center {
            min-width: 180px;
        }

        table.five center {
            min-width: 230px;
        }

        table.six center {
            min-width: 280px;
        }

        table.seven center {
            min-width: 330px;
        }

        table.eight center {
            min-width: 380px;
        }

        table.nine center {
            min-width: 430px;
        }

        table.ten center {
            min-width: 480px;
        }

        table.eleven center {
            min-width: 530px;
        }

        table.twelve center {
            min-width: 580px;
        }

        table.one .panel center {
            min-width: 10px;
        }

        table.two .panel center {
            min-width: 60px;
        }

        table.three .panel center {
            min-width: 110px;
        }

        table.four .panel center {
            min-width: 160px;
        }

        table.five .panel center {
            min-width: 210px;
        }

        table.six .panel center {
            min-width: 260px;
        }

        table.seven .panel center {
            min-width: 310px;
        }

        table.eight .panel center {
            min-width: 360px;
        }

        table.nine .panel center {
            min-width: 410px;
        }

        table.ten .panel center {
            min-width: 460px;
        }

        table.eleven .panel center {
            min-width: 510px;
        }

        table.twelve .panel center {
            min-width: 560px;
        }

        .body .columns td.one,
        .body .column td.one {
            width: 8.333333%;
        }

        .body .columns td.two,
        .body .column td.two {
            width: 16.666666%;
        }

        .body .columns td.three,
        .body .column td.three {
            width: 25%;
        }

        .body .columns td.four,
        .body .column td.four {
            width: 33.333333%;
        }

        .body .columns td.five,
        .body .column td.five {
            width: 41.666666%;
        }

        .body .columns td.six,
        .body .column td.six {
            width: 50%;
        }

        .body .columns td.seven,
        .body .column td.seven {
            width: 58.333333%;
        }

        .body .columns td.eight,
        .body .column td.eight {
            width: 66.666666%;
        }

        .body .columns td.nine,
        .body .column td.nine {
            width: 75%;
        }

        .body .columns td.ten,
        .body .column td.ten {
            width: 83.333333%;
        }

        .body .columns td.eleven,
        .body .column td.eleven {
            width: 91.666666%;
        }

        .body .columns td.twelve,
        .body .column td.twelve {
            width: 100%;
        }

        td.offset-by-one {
            padding-left: 50px;
        }

        td.offset-by-two {
            padding-left: 100px;
        }

        td.offset-by-three {
            padding-left: 150px;
        }

        td.offset-by-four {
            padding-left: 200px;
        }

        td.offset-by-five {
            padding-left: 250px;
        }

        td.offset-by-six {
            padding-left: 300px;
        }

        td.offset-by-seven {
            padding-left: 350px;
        }

        td.offset-by-eight {
            padding-left: 400px;
        }

        td.offset-by-nine {
            padding-left: 450px;
        }

        td.offset-by-ten {
            padding-left: 500px;
        }

        td.offset-by-eleven {
            padding-left: 550px;
        }

        td.expander {
            visibility: hidden;
            width: 0px;
            padding: 0 !important;
        }

        table.columns .text-pad,
        table.column .text-pad {
            padding-left: 10px;
            padding-right: 10px;
        }

        table.columns .left-text-pad,
        table.columns .text-pad-left,
        table.column .left-text-pad,
        table.column .text-pad-left {
            padding-left: 10px;
        }

        table.columns .right-text-pad,
        table.columns .text-pad-right,
        table.column .right-text-pad,
        table.column .text-pad-right {
            padding-right: 10px;
        }

        /* Block Grid */

        .block-grid {
            width: 100%;
            max-width: 580px;
        }

        .block-grid td {
            display: inline-block;
            padding: 10px;
        }

        .two-up td {
            width: 270px;
        }

        .three-up td {
            width: 173px;
        }

        .four-up td {
            width: 125px;
        }

        .five-up td {
            width: 96px;
        }

        .six-up td {
            width: 76px;
        }

        .seven-up td {
            width: 62px;
        }

        .eight-up td {
            width: 52px;
        }

        /* Alignment & Visibility Classes */

        table.center, td.center {
            text-align: center;
        }

        h1.center,
        h2.center,
        h3.center,
        h4.center,
        h5.center,
        h6.center {
            text-align: center;
        }

        span.center {
            display: block;
            width: 100%;
            text-align: center;
        }

        img.center {
            margin: 0 auto;
            float: none;
        }

        .show-for-small,
        .hide-for-desktop {
            display: none;
        }

        /* Typography */

        body, table.body, h1, h2, h3, h4, h5, h6, p, td {
            color: #222222;
            font-family: "Helvetica", "Arial", sans-serif;
            font-weight: normal;
            padding: 0;
            margin: 0;
            text-align: left;
            line-height: 1.3;
        }

        h1, h2, h3, h4, h5, h6 {
            word-break: normal;
        }

        h1 {
            font-size: 40px;
        }

        h2 {
            font-size: 36px;
        }

        h3 {
            font-size: 32px;
        }

        h4 {
            font-size: 28px;
        }

        h5 {
            font-size: 24px;
        }

        h6 {
            font-size: 20px;
        }

        body, table.body, p, td {
            font-size: 14px;
            line-height: 19px;
        }

        p.lead, p.lede, p.leed {
            font-size: 18px;
            line-height: 21px;
        }

        p {
            margin-bottom: 10px;
        }

        small {
            font-size: 10px;
        }

        a {
            color: #2ba6cb;
            text-decoration: none;
        }

        a:hover {
            color: #2795b6 !important;
        }

        a:active {
            color: #2795b6 !important;
        }

        a:visited {
            color: #2ba6cb !important;
        }

        h1 a,
        h2 a,
        h3 a,
        h4 a,
        h5 a,
        h6 a {
            color: #2ba6cb;
        }

        h1 a:active,
        h2 a:active,
        h3 a:active,
        h4 a:active,
        h5 a:active,
        h6 a:active {
            color: #2ba6cb !important;
        }

        h1 a:visited,
        h2 a:visited,
        h3 a:visited,
        h4 a:visited,
        h5 a:visited,
        h6 a:visited {
            color: #2ba6cb !important;
        }

        /* Panels */

        .panel {
            background: #f2f2f2;
            border: 1px solid #d9d9d9;
            padding: 10px !important;
        }

        .sub-grid table {
            width: 100%;
        }

        .sub-grid td.sub-columns {
            padding-bottom: 0;
        }

        /* Buttons */

        table.button,
        table.tiny-button,
        table.small-button,
        table.medium-button,
        table.large-button {
            width: 100%;
            overflow: hidden;
        }

        table.button td,
        table.tiny-button td,
        table.small-button td,
        table.medium-button td,
        table.large-button td {
            display: block;
            width: auto !important;
            text-align: center;
            background: #2ba6cb;
            border: 1px solid #2284a1;
            color: #ffffff;
            padding: 8px 0;
        }

        table.tiny-button td {
            padding: 5px 0 4px;
        }

        table.small-button td {
            padding: 8px 0 7px;
        }

        table.medium-button td {
            padding: 12px 0 10px;
        }

        table.large-button td {
            padding: 21px 0 18px;
        }

        table.button td a,
        table.tiny-button td a,
        table.small-button td a,
        table.medium-button td a,
        table.large-button td a {
            font-weight: bold;
            text-decoration: none;
            font-family: Helvetica, Arial, sans-serif;
            color: #ffffff;
            font-size: 16px;
        }

        table.tiny-button td a {
            font-size: 12px;
            font-weight: normal;
        }

        table.small-button td a {
            font-size: 16px;
        }

        table.medium-button td a {
            font-size: 20px;
        }

        table.large-button td a {
            font-size: 24px;
        }

        table.button:hover td,
        table.button:visited td,
        table.button:active td {
            background: #2795b6 !important;
        }

        table.button:hover td a,
        table.button:visited td a,
        table.button:active td a {
            color: #fff !important;
        }

        table.button:hover td,
        table.tiny-button:hover td,
        table.small-button:hover td,
        table.medium-button:hover td,
        table.large-button:hover td {
            background: #2795b6 !important;
        }

        table.button:hover td a,
        table.button:active td a,
        table.button td a:visited,
        table.tiny-button:hover td a,
        table.tiny-button:active td a,
        table.tiny-button td a:visited,
        table.small-button:hover td a,
        table.small-button:active td a,
        table.small-button td a:visited,
        table.medium-button:hover td a,
        table.medium-button:active td a,
        table.medium-button td a:visited,
        table.large-button:hover td a,
        table.large-button:active td a,
        table.large-button td a:visited {
            color: #ffffff !important;
        }

        table.secondary td {
            background: #e9e9e9;
            border-color: #d0d0d0;
            color: #555;
        }

        table.secondary td a {
            color: #555;
        }

        table.secondary:hover td {
            background: #d0d0d0 !important;
            color: #555;
        }

        table.secondary:hover td a,
        table.secondary td a:visited,
        table.secondary:active td a {
            color: #555 !important;
        }

        table.success td {
            background: #5da423;
            border-color: #457a1a;
        }

        table.success:hover td {
            background: #457a1a !important;
        }

        table.alert td {
            background: #c60f13;
            border-color: #970b0e;
        }

        table.alert:hover td {
            background: #970b0e !important;
        }

        table.radius td {
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }

        table.round td {
            -webkit-border-radius: 500px;
            -moz-border-radius: 500px;
            border-radius: 500px;
        }

        /* Outlook First */

        body.outlook p {
            display: inline !important;
        }

        /*  Media Queries */

        @media only screen and (max-width: 600px) {

            table[class="body"] img {
                width: auto !important;
                height: auto !important;
            }

            table[class="body"] center {
                min-width: 0 !important;
            }

            table[class="body"] .container {
                width: 95% !important;
            }

            table[class="body"] .row {
                width: 100% !important;
                display: block !important;
            }

            table[class="body"] .wrapper {
                display: block !important;
                padding-right: 0 !important;
            }

            table[class="body"] .columns,
            table[class="body"] .column {
                table-layout: fixed !important;
                float: none !important;
                width: 100% !important;
                padding-right: 0px !important;
                padding-left: 0px !important;
                display: block !important;
            }

            table[class="body"] .wrapper.first .columns,
            table[class="body"] .wrapper.first .column {
                display: table !important;
            }

            table[class="body"] table.columns td,
            table[class="body"] table.column td {
                width: 100% !important;
            }

            table[class="body"] .columns td.one,
            table[class="body"] .column td.one {
                width: 8.333333% !important;
            }

            table[class="body"] .columns td.two,
            table[class="body"] .column td.two {
                width: 16.666666% !important;
            }

            table[class="body"] .columns td.three,
            table[class="body"] .column td.three {
                width: 25% !important;
            }

            table[class="body"] .columns td.four,
            table[class="body"] .column td.four {
                width: 33.333333% !important;
            }

            table[class="body"] .columns td.five,
            table[class="body"] .column td.five {
                width: 41.666666% !important;
            }

            table[class="body"] .columns td.six,
            table[class="body"] .column td.six {
                width: 50% !important;
            }

            table[class="body"] .columns td.seven,
            table[class="body"] .column td.seven {
                width: 58.333333% !important;
            }

            table[class="body"] .columns td.eight,
            table[class="body"] .column td.eight {
                width: 66.666666% !important;
            }

            table[class="body"] .columns td.nine,
            table[class="body"] .column td.nine {
                width: 75% !important;
            }

            table[class="body"] .columns td.ten,
            table[class="body"] .column td.ten {
                width: 83.333333% !important;
            }

            table[class="body"] .columns td.eleven,
            table[class="body"] .column td.eleven {
                width: 91.666666% !important;
            }

            table[class="body"] .columns td.twelve,
            table[class="body"] .column td.twelve {
                width: 100% !important;
            }

            table[class="body"] td.offset-by-one,
            table[class="body"] td.offset-by-two,
            table[class="body"] td.offset-by-three,
            table[class="body"] td.offset-by-four,
            table[class="body"] td.offset-by-five,
            table[class="body"] td.offset-by-six,
            table[class="body"] td.offset-by-seven,
            table[class="body"] td.offset-by-eight,
            table[class="body"] td.offset-by-nine,
            table[class="body"] td.offset-by-ten,
            table[class="body"] td.offset-by-eleven {
                padding-left: 0 !important;
            }

            table[class="body"] table.columns td.expander {
                width: 1px !important;
            }

            table[class="body"] .right-text-pad,
            table[class="body"] .text-pad-right {
                padding-left: 10px !important;
            }

            table[class="body"] .left-text-pad,
            table[class="body"] .text-pad-left {
                padding-right: 10px !important;
            }

            table[class="body"] .hide-for-small,
            table[class="body"] .show-for-desktop {
                display: none !important;
            }

            table[class="body"] .show-for-small,
            table[class="body"] .hide-for-desktop {
                display: inherit !important;
            }
        }

PS Resulting email html is to messy to publish, but basically it will put all your css properties as inline properties on html tags.

Loyalty answered 5/2, 2017 at 20:34 Comment(1)
I like the idea of django-inlinecss. Unfortunately, there are bugs, at least with using Django templated for loops, that make it not viable for me. I had a series of rows where only the first one with the same style as the others got the inline style added. – Chinchy
T
6

I am writing this for other people who might run into the same problem like me in the future. Apparently as Mr. Leonardo as pointed out, HTML e-mails doesn't read the external or even internal css at all because the head part of the template are opted out and only body part are used. Thus the solution is to use table and html attributes with inline css to style the html email template.

Thanks

Tanguy answered 14/11, 2013 at 6:2 Comment(0)
U
1

The one way is to use inline css in the code, 

 <div class="pre"><strong>Title,</strong>&nbsp;</div>
<div class="pre">&nbsp;</div>
<blockquote>
<div class="pre">Message part</div>
</blockquote>
<div class="pre">&nbsp;</div>
<div class="pre"><span style="background-color: #800080;">Thanks</span>,<br /> <br />

</div>
</div>

It works for me..

Unvoiced answered 26/10, 2015 at 2:16 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.