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.
Top comments (3)
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
accountthen i'll copy the files i want from/{PROJECT_DIR}/.venv/lib/python3.8/site-packages/allauth/templates/account.dont' forget to copy
base.htmlThanks Tarik, I'm glad you liked it!
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?