DEV Community

Cover image for Django Admin Customization - Black Dashboard
Sm0ke
Sm0ke

Posted on • Updated on • Originally published at docs.appseed.us

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 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
Enter fullscreen mode Exit fullscreen mode

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/
Enter fullscreen mode Exit fullscreen mode

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",
            ],
        },
    },
]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
<!-- 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 %}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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',
    )
Enter fullscreen mode Exit fullscreen mode

Migrate database

$ python manage.py migrate admin_black
$ # or
$ python manage.py syncdb
Enter fullscreen mode Exit fullscreen mode

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 - Dashboard Screen.


Django Black Admin - Create User Screen

Django Black Admin - Create User Screen.


Django Black Admin - Edit User Permissions

Django Black Admin - Edit User Permissions.


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

Top comments (4)

Collapse
 
crearesite profile image
WebsiteMarket

I didn't know is that easy. Thanks!

Collapse
 
sm0ke profile image
Sm0ke

Yw! :)

Collapse
 
uithemes profile image
ui-themes

The UI looks realy nice! Any other UI kits in the pipeline?

Collapse
 
sm0ke profile image
Sm0ke

Thank you!
Yes .. probably CoreUI and AdminLTE will come soon.