Skip to main content

Django Templates - Admin Customization

Learn how to customize the admin section for a Django Project

This article explains how to customize the default Django admin interface using a free and modern UI Kit - Black Dashboard crafted by Creative-Tim. The final package is available for download directly from Github (MIT License) and can be used in any Django Project (new or legacy).

Django Admin Black - Modern template for Django admin interface, animated presentation.

✅ Django Default Admin​

Being a "batteries-included" framework, Django provides by default a rich set of pages commonly used in all modern web applications: Login, Registration, change password, error pages (404, 500 pages), widgets to paginate and manage tables plus other resources used in the Admin section.

We can visualize all default pages by accessing the installation directory for Django. Below is a snapshot with just a few default pages and components shipped by Django: 

.../site-packages/django/contrib/admin/templates/
│
├── admin/
│   │
│   ├── auth/
│   │   └── user/
│   │       ├── add_form.html
│   │       └── change_password.html
│   │
│   ├── 404.html
│   ├── 500.html
│   ├── actions.html
│   ├── app_index.html
│   ├── base.html
│   ├── base_site.html
│   ├── index.html
│   ├── invalid_setup.html
│   ├── login.html
│   ├── pagination.html
│   ├── popup_response.html
│   └── submit_line.html
│
└── registration/
    ├── logged_out.html
    ├── password_change_done.html
    ├── password_change_form.html
    ├── password_reset_complete.html
    ├── password_reset_confirm.html
    ├── password_reset_done.html
    ├── password_reset_email.html
    └── password_reset_form.html

To customize any default page we need to create our own template directory, create the file using the same name and position in the parent directory, and inform Django to use it.

To go deeper, we will customize the 404 error page and configure Django to use it. Let's go!

✅ Customize 404 Page​

As mentioned above, the first step is to create a template directory:

# Django Root Project <-- you are here
$ mkdir -p templates/

Update Django Settings

To use the new templates the project settings file should be updated as below:

# core/settings.py
# ...

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",

        # Add the templates directory to the DIR option:
        "DIRS": [os.path.join(BASE_DIR, "templates"), ], # <- New Line
        "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",
            ],
        },
    },
]

When the application requests a template file, Django will try to resolve a template file by scanning first the directories defined by the user in the settings file. If nothing is found, the default version will be used from site-packages/django/contrib/admin/templates/ directory (the default location).

Customize 404 page

The custom version of our 404 page can be easily done by copying the default version from admin/templates/ directory and save it in the directory created above. 

# Django Root Project <-- you are here
$ vi templates/404.html
<!-- templates/404.html --> 

{% extends "admin/base_site.html" %}
{% load i18n %}

{% block title %}{% trans 'Page not found' %}{% endblock %}

{% block content %}

<!-- The updated line -->
<h2>{% trans 'Page not found' %} - SOMETHING Custom</h2>

<p>{% trans "We're sorry, but the requested page could not be found." %}</p>

{% endblock %}

Once we save the file, Django will use it when a 404 error case occurs when users interact with our application.

✅ Django Admin Black​

This free sample can be used in any Django project by typing a few commands in the terminal and later, update the settings file to use the new interface. Here are the installation steps:

Install the package via PIP

$ pip install django-admin-black
// OR
$ pip install git+https://github.com/app-generator/django-admin-black.git

Add admin_black application to the INSTALLED_APPS setting of your Django project settings.py file (note it should be before django.contrib.admin):

    INSTALLED_APPS = (
        ...
        'admin_black.apps.AdminBlackConfig',
        'django.contrib.admin',
    )

Add admin_black urls in your Django Project urls.py file.

    from django.urls import path, include

    urlpatterns = [
        ...
        path('', include('admin_black.urls')),
    ]

Collect static if you are in production environment:

$ python manage.py collectstatic

Start the app

$ # Set up the database
$ python manage.py makemigrations
$ python manage.py migrate
$
$ # Create the superuser
$ python manage.py createsuperuser
$
$ # Start the application (development mode)
$ python manage.py runserver # default port 8000

Access the app in the browser: http://127.0.0.1:8000/ (default Django PORT)

Django Admin Customization for Black Dashboard - Tutorial provided by AppSeed.

✅ More Django Templates (all free)​

👉 Datta Able Django​

Datta Able Bootstrap Lite is the most stylized Bootstrap 4 Template, among all other Lite/Free admin templates in the market.

It comes with high feature-rich pages and components with fully developer-centric code - design from CodedThemes.

Datta Able Django - Django Admin fully customized by AppSeed.

👉 Django Argon Dashboard​

Open-source Django project crafted on top of Argon Dashboard, an open-source Bootstrap 5 design from Creative-Tim.

The product is designed to deliver the best possible user experience with highly customizable feature-rich pages. Material Material has easy and intuitive responsive design whether it is viewed on retina screens or laptops.

Django Argon Dashboard - Django Admin fully customized by AppSeed.

👉 Django Material Dashboard​

Open-source Django project crafted on top of Material Dashboard, an open-source Boostrap 5 design from Creative-Tim

The product is designed to deliver the best possible user experience with highly customizable feature-rich pages. Material Material has easy and intuitive responsive design whether it is viewed on retina screens or laptops.

Django Material Dashboard - Django Admin fully customized by AppSeed.

✅ Resources​