Profile Picture

Spencer Burris

President/Lead Developer at the Quaternion Institute. Math student, programmer, and guitarist.

feed | tips | contact

Customizing Django-allauth Templates the Easy Way

Calendar icon November 6, 2020

Clock icon 3 min read

Folder icon #django #webdev #allauth #templates #customize in tech

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:

Allauth default template

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:

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
  1. Symlink your base template to accounts/base.html:
ln -s ../main/_base.html base.html
  1. 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 very work-in-progress site’s authentication-related pages looked like this:

Allauth custom template

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:

Allauth page titles

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 each and 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. Hopefully this has saved you some time and energy.