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
Top comments (4)
I didn't know is that easy. Thanks!
Yw! :)
The UI looks realy nice! Any other UI kits in the pipeline?
Thank you!
Yes .. probably CoreUI and AdminLTE will come soon.