The Problem

So you’ve installed django-allauth for the Python-based web framework Django successfully and now all of your account-related pages are painful to look at. Sure, you could customize each of allauth’s provided templates yourself, but I’ll show you an easier way.

Overriding the Base Template

Starting off, the sign-in page looks something like this:

If you open up the HTML file for this template then you’ll notice that it extends account/base.html. This base.html really only does a few things:

• Sets the page title to what the child template says to
• Displays messages if there are any
• Asks the user or sign in or sign up if they are not logged in, or gives the option to sign out or change email if they are

Your project’s base template probably already does all of these things like mine. Therefore, we can get allauth to user our base templates instead of its own. All of its templates are looking for account/base.html? Let’s give it one:

1. First, create a new accounts directory inside your templates directory and go into it:

mkdir templates/accounts
cd templates/accounts

2. Symlink your base template to accounts/base.html:

ln -s ../main/_base.html base.html

3. Check the result and see what still needs to be fixed

If this didn’t work, make sure your app is higher on the list than allauth and its components in INSTALLED_APPS inside settings.py.

Cleaning Up

After overriding base.html, my work-in-progress site’s authentication-related pages looked like this:

The site may not be pretty yet, but at least it’s consistent now. However, there a few things that still need attention.

Page Titles

Allauth’s page titles are set by children templates in a block called head_title, so if you had any other name you will see something like this:

The fix is easy, you will just need to change whatever you were using (title, perhaps) to head_title in all of the template you have created.

Layout Differences

Whereas I use semantic HTML in my pages, allauth does not. For this project, I centered my main content. Because I did not put my <main> tags in my base.html, but rather each child template, allauth pages are not centered. This is also an easy fix, any container tags that effect layout need to surround {% blockcontent %}{% endblock %} in base.html.

Conclusion

Instead of copying all of allauth’s templates then editing every one of them as I’ve seen many tutorials suggest, you can make a single symlink and then make a few edits to clean things up a bit.