> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/pennersr/django-allauth/llms.txt
> Use this file to discover all available pages before exploring further.
# Templates
> Customize the look and feel of django-allauth pages
django-allauth provides a flexible template system that allows you to customize the look and feel of all authentication pages. You can either completely override templates or use the element-based styling system for quick customization.
## Overview
The built-in templates are intentionally plain and unstyled. django-allauth doesn't make assumptions about your frontend framework, allowing you to use Bootstrap, Tailwind, Material UI, or any other styling approach.
There are two main approaches to customizing templates:
1. **Element-based styling** - Override layout and element templates for quick visual changes
2. **Full template override** - Copy and customize individual templates for complete control
## Template Configuration
### Django Template Settings
django-allauth templates are discovered via Django's template loader. Ensure your `TEMPLATES` setting is configured correctly:
```python theme={null}
# settings.py
from pathlib import Path
BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATES = [
{
"BACKEND": "django.template.backends.django.DjangoTemplates",
"DIRS": [
BASE_DIR / "templates", # Your project templates
],
"APP_DIRS": True, # Required for allauth templates
"OPTIONS": {
"context_processors": [
"django.template.context_processors.debug",
"django.template.context_processors.request",
"django.contrib.auth.context_processors.auth",
"django.contrib.messages.context_processors.messages",
],
},
},
]
```
### Template Extension
**Setting:** `ACCOUNT_TEMPLATE_EXTENSION`\
**Default:** `"html"`\
**Source:** `allauth/account/app_settings.py:457`
Change the template file extension:
```python theme={null}
ACCOUNT_TEMPLATE_EXTENSION = "jinja"
```
## Element-Based Styling
The fastest way to customize appearance is by overriding layout and element templates. This approach lets you style all pages by modifying just a few files.
### Template Structure
```
Your Project Templates/
├── allauth/
│ ├── layouts/
│ │ ├── base.html # Overall base template
│ │ ├── entrance.html # Login/signup pages
│ │ └── manage.html # Account management pages
│ └── elements/
│ ├── button.html
│ ├── form.html
│ ├── h1.html
│ └── ... (other elements)
├── account/
│ └── (optional full overrides)
└── socialaccount/
└── (optional full overrides)
```
### Layout Templates
#### allauth/layouts/base.html
The overall base template for all allauth pages.
```django theme={null}
{% block head_title %}{% endblock %}
{% block content %}
{% endblock %}
```
#### allauth/layouts/entrance.html
Layout for authentication pages (login, signup, password reset).
```django theme={null}
{% extends "allauth/layouts/base.html" %}
{% block content %}
```
## Template Tags
django-allauth provides custom template tags.
### user\_display
Display a user without making assumptions about representation:
```django theme={null}
{% load account %}
{# Direct usage #}
{% user_display user %}
{# As variable for translation #}
{% user_display user as user_display %}
{% blocktrans %}{{ user_display }} has logged in{% endblocktrans %}
```
Configure display format with `ACCOUNT_USER_DISPLAY` setting.
### provider\_login\_url
Generate social provider login URLs:
```django theme={null}
{% load socialaccount %}
Sign in with Google
{# With process parameter #}
Connect GitHub
```
## Real-World Examples
### Bootstrap 5 Styling
For a complete Bootstrap 5 example, see the [example project templates](https://codeberg.org/allauth/django-allauth/src/branch/main/examples/regular-django/example/templates).
### Tailwind CSS Example
```django theme={null}
{% extends "allauth/layouts/base.html" %}
{% block content %}
{% endblock %}
```
## Best Practices
1. **Start with layouts** - Override layout templates first for quick wins
2. **Use element templates** - Modify element templates for consistent styling
3. **Keep structure** - Maintain the original template structure and blocks
4. **Test responsive design** - Ensure templates work on all device sizes
5. **Internationalization** - Use `{% trans %}` tags for translatable text
6. **Accessibility** - Include proper labels, ARIA attributes, and semantic HTML
7. **Version control** - Track which templates you've overridden
## Related
* [Forms](/configuration/forms) - Customize form fields and validation
* [Adapters](/configuration/adapters) - Customize behavior
* [Settings](/configuration/settings) - Configure template extension