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 (0)

Fun with console.log()

This post briefly outlines the top 10 neat tricks you can use to level up your logging experience.