Django-allauth tutorial (Part 5): Email Templates

It turned out not as easy for somebody whose everyday experience with responsive templates is limited to changing colleagues’ work.

UPDATED. 12th September 2020: I did not manage to make my own Bootstrap Email Templates not be ignored by Gmail, so I used TedGoas’ Cerberus for LingoMost and I strongly recommend you as well.

Email Templates that work [with Gmail]

I strongly recommend taking a good Email template made by professionals like TedGoas’ Cerberus. I changed it a bit to fit my needs and I love how it worked.

How it originally looks (opened in Gmail):

How I changed it(opened in Gmail):

General Notes

Text files of emails must be in your allaauth/account/email/ directory. Even if you add html there, it won’t help – you will receive html code.

What you will receive if you dare to insert html into the *.txt files in allauth/account/email/

So you need to create .html files with the same names. Specifically, create email_confirmation_message.html for Email confirmation.

If you want to change Email subjects, go and do it in files that has name ending with _subject.txt.

My attempt at BS4 template [Gmail hates it]

I tried to use Bootstrap and specifically some of their examples. I picked Jumbotron.

Bootstrap’s Jumbotron example template

Modified it as I liked and made a base.html out of it in order to use with other emails templates.

CSS file. If you want to use, say, Bootstrap, you’ll have to copy the necessary styles to your. As well as your own styles. I recommend using classes even though you won’t be able to make links to the .css file in Email template like this:

<link href="{% static 'css/email.css' %}" rel="stylesheet">

Say, you have:

<link rel="stylesheet" href="/css/bootstrap.min.css">
<link href="/static/css/extra/email.css" rel="stylesheet">

To not get confused, place your <style></style> block in the same order right at that place, don’t make one big fat <style></style>:

{#    Bootstrap 4    #}
{#    Your styles    #}

Pictures. No kind of static works, both .css files and pictures.

You will need to host them somwhere. An absolute link is fine. Like for my logo the link is:

And the picture itself:

DjangoKatya Logo

Results of this attempt are available at GitHub. Again, the base is Jumbotron by Bootstrap.

Email Confirmation

Other mobile screen’s sizes:

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.