All geek questions in one place

Django HTML email template does not load css into email

I am sending emails from Django as follows:

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 receive an email without any css. I loaded the template itself in Django using:

 return render(request, 'templatename_html')

The template loads properly with all css in django, but not when sending email to gmail. What's wrong?

+6
source share
3 answers

Like other developers, the mentioned email clients do not download external css, so you must embed them. Attaching css manually is a bad solution. There are libraries for inline css. One of them is django-inlinecss . You can store the code exactly as it is. All you have to do is install django-inlinecss and change "deposit_email.html". I don’t know how it looks because you do not publish it, so I will give you an example of a simple header, such as an email template, which I used earlier 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 here. The first line loads the inlinecss tag.

 {% load inlinecss %}

The second line starts html, which will be css nested. It also downloads email.css, which can be any static file in your django project.

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

After that, a table-based template that has a header and a body with a django block. End line

 {% endinlinecss %}

What ends with inlinecss. As you can see, I have embedded my entire template. I recommend having one or more parent email templates that contain the template structure, rather than using template inheritance for specific emails. So you need to specify a template and embed your CSS once.

And last but not least. In order for the table template to play well, you need email.css styles. CSS is a little big but simple in nature. Add to this your own styles.

  #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 The result of the html email is useless for publishing, but basically it will put all your css properties as inline properties in the html tags.

+6
source

I am writing this for other people who may face the same problem as me in the future. Apparently, as Mr. Leonardo noted, HTML emails do not read external or even internal CSS at all, because the head of the template is disabled and only the body part is used. So the solution is to use table and html attributes with inline css to create an html email template.

thanks

+2
source

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>

This works for me ..

0
source

Source: https://habr.com/ru/post/958047/

More articles:


All Articles