DEV Community

Tyler Smith
Tyler Smith

Posted on

Styling django-allauth by overriding its templates

So you've just created a new Django project, installed and configured django-allauth, and navigated to localhost:8000/accounts/login. Then it hits you.

"This is kind of ugly."

Django allauth's default unstyled login page

The Django allauth package delivers a lot of functionality out of the box, but it leaves the responsibility of making its pages look pretty up to the developers who install it. So let's dig in.

Configuring Django

The django-allauth package doesn't offer any configuration to link CSS files in the <head /> or add classes to the inputs, so you have to use Django's templating system to override allauth's built-in templates.

We'll start by creating a templates/ folder in the project's main directory to hold the allauth templates. Run the following command in your console from your project's main directory:

mdkir templates
Enter fullscreen mode Exit fullscreen mode

Next, open up your project's file (located at {app_name}/ and look for the TEMPLATES config. We'll add our new templates/ folder to the DIRS configuration list.

        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'templates')
        # Other config options...
Enter fullscreen mode Exit fullscreen mode

Next, we'll need a place to store our assets like CSS files. Let's create an assets/ folder by running the following command in the project's main directory:

mdkir assets
Enter fullscreen mode Exit fullscreen mode

Now, we will tell Django to check this directory when looking for static files. Add the following to your project's file:

Enter fullscreen mode Exit fullscreen mode

Adding styles and overriding templates

Let's create a CSS file to style our form. We'll add minimal styles just to confirm we can see something on the page. Create a file at assets/accounts/auth.css and add the following styles:

* {
  outline: 1px red solid;
Enter fullscreen mode Exit fullscreen mode

Next, we'll copy the base template that all the django-allauth pages use so we can override it. The easiest way to get the markup from allauth's templates is to visit the allauth GitHub templates directory. Copy the markup from the base.html file into your project at templates/account/base.html.

In your newly-copied templates/account/base.html, add the following line inside the <head /> element to load our CSS file:

{% load static %}
<link rel="stylesheet" href="{% static 'accounts/auth.css' %}">
Enter fullscreen mode Exit fullscreen mode

Now go to your browser and refresh localhost:8000/accounts/login. You should see something like the following:

Django allauth's login page with styles applied

You've now overridden and styled django-allauth. Your next steps are overriding the individual pages (which you can find in the repo), adding classes to the elements, then adding CSS styles to those classes.

It's worth mentioning that there is more than one way to override allauth's templates: Django is very flexible. You may find a way that works better for you. If you do, please leave a comment and share your knowledge.

Also, please like or comment if you found this post helpful. Finally, I'd like to give a special shout-out to this answer on Stack Overflow that helped me figure this out.

Top comments (3)

tarikwaleed profile image
Tarik Waleed • Edited

Nice Article,Tyler thanks for postig that. i found it really convinent to copy the files i want to override in my templates directory.
in my templates directory i'll create a new directory called account then i'll copy the files i want from /{PROJECT_DIR}/.venv/lib/python3.8/site-packages/allauth/templates/account .
dont' forget to copy base.html

tylerlwsmith profile image
Tyler Smith

Thanks Tarik, I'm glad you liked it!

n3xt profile image
Yash Oswal

How can I do this with react.

I want to use dang-allauth with react's UI but whenever I make a request to the accounts/login endpoint it doesn't pick up the value. Later on investigation I found that even though I make a request from front-end to the same endpoint it is not using the value of React UI but from its own template which always remains empty.

Can you help how to achieve this?