A small note on customizing templates for django-allauth.

1. Settings. In settings.py alter TEMPLATES:

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

site-packages/allauth/templates/socialaccount/connections.html

You need to create a file

allauth/accounts/socialaccount/connections.html

in your templates folder.

4. Wrapper (23^th 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 %}.

templates/base.html

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

templates/allauth/account/base.html

{% 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/{{ brand.id }}.png" title="{{ brand.name }}">

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.