Styling django-allauth by overriding its templates
Tags: django, allauth, python
Published: 2022-01-22 19:53:34

---
title: Styling django-allauth by overriding its templates
published: true
description: Learn how to add CSS styles to Django allauth templates.
tags: django, allauth, python
---

So you've just created a new Django project, [installed and configured](https://django-allauth.readthedocs.io/en/latest/installation.html) `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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5sl7imwny9bfdyuzvqd.png)

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:

```sh
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.

```py
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:

```sh
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:

```py
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:

```css
* {
  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](https://github.com/pennersr/django-allauth/tree/master/allauth/templates/account). 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:

```twig
{% 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:

![Django allauth's login page with styles applied](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s355xoxcxtmbc9idargr.png)

You've now overridden and styled `django-allauth`. Your next steps are overriding the individual pages (which you can find in the [repo](https://github.com/pennersr/django-allauth/tree/master/allauth/templates/account)), 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](https://stackoverflow.com/a/42052522) on Stack Overflow that helped me figure this out.