Django Admin Customization - Black Dashboard

Hello Coders,

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) along with another Django Starter that uses the same design: Django Black Dashboard.

Links

• 👉 Django Black Dashboard - product page
• 👉 Django Admin Black - sources published on Github

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/

Step #2 - 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).

Step #3 - 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 in Step #2

# 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.

How to use it

Change the directory INSIDE your Django project. In case you don't have one, feel free to use Django Dashboard Black as the mother project.

# YOU should be in the ROOT project
$ pip install git+https://github.com/app-generator/django-admin-black.git
$ # or
$ easy_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',
    )

Migrate database

$ python manage.py migrate admin_black
$ # or
$ python manage.py syncdb

Clear your browser cache, start the application and access the admin module. The new UI should be up & running:

Django Black Admin - Dashboard Screen

Django Black Admin - Create User Screen

Django Black Admin - Edit User Permissions

Thank You! for reaching this point. More resources can be found by accessing the links:

• 👉 Django Black Dashboard - free Django product
• 👉 More Django Dashboards - provided by AppSeed