Django Admin Customization - Black Dashboard
Tags: django, dashboards, opensource, appseed
Published: 2020-11-15 10:31:31

---
title: Django Admin Customization - Black Dashboard
published: true
description: How to customize the default Django Admin UI 
tags: django, dashboards, opensource, appseed
cover_image: https://raw.githubusercontent.com/app-generator/django-admin-black/main/media/django-admin-black-screen.png
canonical_url: https://docs.appseed.us/technologies/django/templates/
---
Hello Coders,

This article explains **[how to customize the default Django admin interface](https://docs.appseed.us/content/how-to/django-admin-customization)** 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](https://appseed.us/product/black-dashboard/django/).

> Links

- 👉 [Django Black Dashboard](https://appseed.us/product/black-dashboard/django/) - product page
- 👉 [Django Admin Black](https://github.com/app-generator/django-admin-black) - sources published on Github

![Django Admin Black - Modern template for Django admin interface, animated presentation.](https://raw.githubusercontent.com/app-generator/django-admin-black/main/media/django-admin-black-intro.gif)

--- 

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

```bash
.../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:

```bash
# 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: 

```python
# 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**

```bash
# Django Root Project <-- you are here
vi templates/404.html
```

```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](https://appseed.us/product/black-dashboard/django/)

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](https://appseed.us/admin-dashboards/django-dashboard-black) as the mother project. 

```bash
# 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'):

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

---

Migrate database 

```bash
$ 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 - Dashboard Screen.](https://raw.githubusercontent.com/app-generator/django-admin-black/main/media/django-admin-black-screen.png)

---

> Django Black Admin - Create User Screen

![Django Black Admin - Create User Screen.](https://raw.githubusercontent.com/app-generator/django-admin-black/main/media/django-admin-black-screen-add-user.png)

---

> Django Black Admin - Edit User Permissions

![Django Black Admin - Edit User Permissions.](https://raw.githubusercontent.com/app-generator/django-admin-black/main/media/django-admin-black-screen-edit-permissions.png)

---

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

- 👉 [Django Black Dashboard](https://appseed.us/product/black-dashboard/django/) - free Django product 
- 👉 More [Django Dashboards](https://appseed.us/admin-dashboards/django/) - provided by AppSeed