1

How to customize django admin login page

Django admin custom login page

April 2020

This tutorial is the first one of a series dedicated to django admin interface customization. Today, we will learn how to replace the default django admin login page with a new shiny one.

You can find the source code in this repository

First thing we need to do is to modify our admin.py file to indicate Django that we will use our own AdminSite with our own template.

from django.contrib.admin import AdminSite
class MyAdminSite(AdminSite):
    login_template = 'backoffice/templates/admin/login.html'


...
# Then register your models with the new admin site
site = MyAdminSite()
# Register your models here.
site.register(Shop,ShopAdmin)
site.register(Product,ProductAdmin)

Next we will modify our project urls.py file to explicit set our new admin site

from django.conf.urls import url
from django.contrib import admin
from backoffice.admin import site
admin.site = site
admin.autodiscover()

urlpatterns = [
    url(r'^admin/', admin.site.urls),
]

And now we modify our settings.py file to tells Django in which directory our custom templates can be found


TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            BASE_DIR,
            os.path.join(BASE_DIR, 'templates')
        ],
        'APP_DIRS': True,
        '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',
            ],
        },
    },
]

We can now create our custom login.html page in our directory templates/admin/backoffice

Django project tree

We need to copy the default Django admin login page inside our directory

cp ../../../environnements/genericenv/lib/python3.7/site-packages/django/contrib/admin/templates/admin/login.html backoffice/templates/admin/

And start to modify it’s content to add our new design code


{% block extrastyle %}{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/login.css'%}">
<style>
body.login{
background-image: linear-gradient(120deg,#3498db,#8e44ad);
}
#header {
width: auto;
height: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 40px;
background-image: linear-gradient(120deg,#3498db,#8e44ad);
color: #ffc;
overflow: hidden;
}
.login .submit-row {
clear: both;
padding: 1em 0 0 9.4em;
margin: 0;
border: none;
background: none;
text-align: left;
background-image: linear-gradient(120deg,#3498db,#8e44ad);
}
.button, input[type="submit"], input[type="button"], .submit-row input, a.button {
background: transparent;
padding: 10px 15px;
border: none;
border-radius: 4px;
color: #fff;
cursor: pointer;
}
</style>
{{ form.media }}
{% endblock %}

We are modifying the CSS using a custom style tag in our HTML. We could have also customized with a brand new css file or even write a full new HTML file instead of overring the Django admin default login.html.

Possibilities are multiple and it’s up to you to choose what you like to do.

Django admin custom login page

Christophe Surbier