For my latest web app I’m using Django allauth, a plugin which allows you to easily add loads of different providers (Google, Microsoft, Apple – and more than 100 others at current count) to authenticate users. It saves a lot of work since email address verification, password reset etc is all handled by the third-party provider. Following the quickstart is very easy to get it working BUT the html template pages were a little bit tricky to get my head around, and they don’t have any styling applied by default:
It works but obviously needs styling for a real app, so here’s a write up of how I modified the templates, using Bootstrap. This guide assumes you’ve got Django and Bootstrap setup already.
Add menu bar and footer
The web app I’m working on already has a Bootstrap menu and footer which I want to appear on every page, including all of the allauth pages – and there are loads of them! I’ve already created my own template/base.html which every other page uses. The key thing to grasp is that the lowest-level template on which every allauth page is built is at your-django-app/templates/allauth/layouts/base.html, so we need to modify that to use our base.html
- Start by creating the folder structure and copying existing template from github.
- We can remove the html, head and body tags, since these are already setup in our app’s base.html
- Add {% extends “base.html” %} to the top of the file
- Switch the {% block body %} opening and closing tag for {% block content %}, and leave the rest of code inside here.
- Ensure there is a {% block content %} tag in the app’s base.html, which is where the allauth content (and all your other pages content) is inserted.
{% extends "base.html" %}
{% load i18n %}
{% block head_title %}{% endblock head_title %}
{% block extra_head %}
{% endblock extra_head %}
{% block content %}
<!-- Use the content from the original template inside the body tags here -->
{% endblock content %}
{% block extra_body %}
{% endblock extra_body %}
That immediately looks a lot better and the authentication pages look like part of the app, but the styling of the h1 and p tags is not correct and it would look better in a centred container with some padding (in templates/base.html just add a div or section with an appropriate Bootstrap class).
HTML tag styling
In the second image you can see the tags do have a different style to the original, which is picked up from Bootstrap now we have that imported from templates/base.html, however, it’s not the h1 style that I’m using on my other pages – I want it with
class="fw-light"
. You may think you then have to add that class to every h1 tag, meaning you need to get copies of all the other allauth templates, but actually it’s been setup a bit differently which does actually make changing all tags easier, but its confusing at first.
Each element has its own template e.g. templates/elements/h1.html which you can copy from the allauth github page:
{% comment %} djlint:off {% endcomment %}{% load allauth %}<h1>{% slot %}{% endslot %}</h1>
Just at the class inside the single h1 tag here, and it changes every h1 tag in all of the allauth templates – now the auth pages look are styled like the rest of the app:
Branded login buttons
The examples I’ve shown are for the /accounts/google/login/?process=login page which is the step AFTER you’ve chosen a provider. Allauth gives a list of providers (which you as the developer need to signup for and enable) at the accounts/login/ page, and its much nicer and more familiar for users have the branded buttons.
For the login page, you need to create templates/account/login.html to override allauth’s login page. This template needs
{% extends "account/base_entrance.html" %}
this time, and we’ll place everything we want to show as before inside:
{% block content %}
Many providers have a brand kit that you can import, for example Google has a tool that creates the html and css for the sign in to google button, and you can just include this inside the block content tags. Microsoft has similar brand kit you can use.
The css or image button needs to be wrapped in a link tag with the href pointing to the correct provider, e.g.:
{% provider_login_url 'google' process='login' %}
Now we have our login pages, with matching styles for the rest of the Django app, and the provider branded buttons:
Template folder structure
├── templates │ ├── account │ │ └── login.html │ ├── allauth │ │ ├── elements │ │ │ ├── h1.html │ │ │ └── p.html │ │ └── layouts │ │ └── base.html (from allauth) │ ├── base.html (your app's template with header and footer)
Leave a Reply