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."

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

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

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'templates')
        ],
        # Other config options...
    },
}

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

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

STATICFILES_DIRS = [BASE_DIR / "assets"]

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;
}

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' %}">

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

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.

Styling django-allauth by overriding its templates

Configuring Django

Adding styles and overriding templates