Django-allauth tutorial (Part 4): Customization of Templates (upd. 23th August 2020)

A small note on customizing templates for django-allauth.

1. Settings. In alter TEMPLATES:

        'DIRS': [
# your original templates folder
os.path.join(BASE_DIR, 'templates'),
# NEW! for django-allauth
os.path.join(BASE_DIR, 'templates', 'allauth'  


2. Location. In order to access site-packages you need to go to your virtual environment’s directory and then into site-packages. WIth Pycharm, just open Project (View -> Tool Windows -> Project) and got into External Libraries.

Then find allauth/templates.

3. Directory. As for templates themselves, I do not recommend changing site-packages folder.

In order to override templates for django-allauth, you need to create accounts/ directory in your templates folder and add html pages with the names of the pages you want to change.

Say, instead of altering


You need to create a file


in your templates folder.

4. Wrapper (23th August 2020). All the templates will be extending base.html template and be contained in {% block content %}.

If you want to make a wrapper specifically for allauth templates, I recommend in your copied allauth templates change {% block content %} to {% block content2 %}.


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


{% block content %}
# some wrapper you want specifically for allauth templates
{% block content_auth %}Here will go everything about allauth{% endblock content_auth %}
{% endblock content %}

For example, template/allauth/account/email.html

{% extends 'account/base.html' %}
{% block content_auth %}{% endblock content_auth %}

5. Include. In templates you will encounter tag {% include %}. If you want to alter the code that it contains, go find it in site-packages/allauth/templates/, copy and paste on template. For example, for page account/login.html you will see this {% include %}:

{% include "socialaccount/snippets/provider_list.html" with process="login" %}

It is easily found:

So in the end account/login.html has this:

6. Logo. You can go further and go and find what stands before get_provider in allauth directory and add them manually (if you need it). But I recommend assigning them CSS classes like this:

.socialaccount_provider .vk{
    background-color: #4a76a8
    padding: 10px;
    border-radius: 10px;

That results in something like this:

Or assign a picture as <img>:

<img src="/static/social/{{ }}.png" title="{{ }}">

Or any way you want to (background-image etc.)

7. Freedom. You are not exactly obliged to use these template tags. You just have to include {% csrf_token %} and all of the {% load %} instances.

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.