How to Override and Extend Basic Django Admin Templates?

The Django admin interface provides a robust way to manage our application's data, offering a user-friendly and efficient design. By default, it gives a clean and functional design that is suitable for most needs. Sometimes we need more customized features to better align with our specific requirements like user-centric experience, custom branding, or enhanced functionality then Django admin templates are the way to go.

However, the Django admin panel is lightweight and recommended for use during development only. If we need to provide a more process-centric interface that abstracts away the implementation details of database tables and fields, then it's time to write our own views. In this article, we will learn how to customize the Django Admin Panel that best fits our project requirements.

Why need to customize Admin Templates?

• Tailor the admin interface to our project's branding and design language
• Enhance the admin's experience with custom layouts and functionality with the help of personalized tools to improve efficiency.

Locating Admin Templates

Django Admin templates are used as the basis for the admin interface which we get within the Django package. Below are the ways to find them:

• Default location: The templates are located in the Django installation directory under this path - "django/contrib/admin/template/admin/".

Also we can refer to the Django documentation or directly browse/go through the source code if we want to understand the structure or content of these templates in more detail.

Creating Custom Templates

To override Django's default admin templates, we need to first create custom templates within our project as per the project's need.

Step 1: Create a new directory in the root directory: templates/admin

In the root directory, create a templates folder and a subfolder named admin. We will place all the admin's related templates in this directory only.

 myproject/
     template/
        admin/

Step 2: Copy the templates we want to customized from Django's directory into ours.

• We can now go to the Django's admin template directory: "django/contrib/admin/templates/admin", and copy the templates we want to customize (e.g., base-site.html, change_form.html, change_list.html).
• After copying, paste them into our templates/admin directory. Then the structure of our directory should look like this:

myproject/
    templates/
        admin/
            base_site.html
            index.html
            login.html

The base_site.html, index.html, login.html are the specific Django admin templates we are going to override.

Example: Customizing "base_site.html"

Use Case: Suppose we have to build a Django project for a company, and the default Django admin interface doesn't reflect the company's branding, by customizing "base_site.html" we are doing the following things:

• Add the name or logo of company to the admin header.
• Reflecting company's branding, modifying the page titles.
• Ff there are unnecessary elements like global navigation bar then removing it if not needed.

{% extends "admin/base.html" %}

{% block title %}{{ title }} | My Modified Admin{% endblock %}

{% block branding %}
<h1 id="site-name"><a href="{% url 'admin:index' %}">My Custom Admin Interface</a></h1>
{% endblock %}

{% block nav-global %}{% endblock %}

Explanation of the above code:

1. {% extends "admin/base.html" %}: This line tells Django that this template base_site.html is extended version of base.html. In which the admin/base.html provides the basic structure and elements like headers, footers, and navigation for the admin interface. By extending this base.html we can override or add specific blocks of content with the existing one in it .

2. {% block title %}{{ title }} | My Modified Admin{% endblock %}: this block customizes the <title> tag of HTML document.

• block title : This block is defined in admin/base.html template, and we are overriding it.
• {{ title }} : It acts as a placeholder that Django automatically fills in with the name of the current page We are viewing in the admin panel, such as "Change User" or "Site Administration".
• My custom Admin: This is our customized text we're adding to the title, basically what we want to be in the title of the page.

This block allow to add branding or additional information to the browser tab.

3. {% block branding %}: Located at the top left of the admin pages. This block is also defined in admin/base.html. By default this section shows "Django administration" with a link back to the main admin index page. If we want to change the title or logo or want to add our own branding , below is the way given.

4. <h1 id="site-name"><a href="{% url 'admin:index' %}">My Custom Admin Interface</a></h1>

{% endblock %}:

• The <h1> tag with id='site-name' is a place where the content of the branding is store(like logo or site name).
• {% url 'admin:index' %}": This will generates the URL for the admin index page.
• "My Custom Admin Interface": Here we can add the custom text of our choice for our site's branding, which will appear in the header.

5. {% block nav-global %}{% endblock %}: this block used to customized or remove the global navigation bar, in which the links to various admin tools or external resources are available. In which block nav-global this contains navigation elements like links to documentation, support or other tools, and {% endblock %} this is overridden but left empty, but remove the global navigation bar effectively from the admin interface. So by overriding this block we can control what, if any, global navigation elements appear.

Step 5: Test our Custom Template

Run the Django development server and navigate to the part where we use template. Then Verify that our changes are applies as expected or not.

Step 7: Use Template Inheritance

{% load static %}
<!--template/base.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}My website{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">

</head>
<body>
    <header>
        <h1>{% block header %}Welcome to My Website{% endblock %}</h1>
    </header>
    <nav>
        {% block nav %}
        <ul>
            <li><a href="{% url 'home' %}">Home</a></li>
        </ul>
        {% endblock %}
    </nav>
    <main>
        {% block content %}{% endblock %}
    </main>
    <footer>
        {% block footer %}Copyright © 2024{% endblock %}
    </footer>
</body>
</html>

{% load static %} : This will help to load our static files like css/javaScript etc. Make sure we add our all the files and folders in correct path because this may create confusion.

Then extends the base class by creating this child class given below:

<!-- templates/home.html -->
{% extends "base.html" %}

{% block title %}Home | My Website{% endblock %}

{% block content %}
    <p>This is the home page content.</p>
    <p>this home.html extends the base.html content and also adds its own.</p>
{% endblock %}

Step 7: Handle Static and Media Files

If our custom templates includes static files like CSS, JavaScript , images then we must ensure they are handled properly or correctly linked. We can place our static files in a separate directory named static/ of our app or project. And then use {% static %} tag to reference static files like this:

<link rel="stylesheet" href="{% static 'css/style.css' %}">

Overriding Templates

To override template, place the custom template in the correct directory structure within the project. Django will automatically use this instead of default one.

1. Matching the Template: Django searches for the templates in our app's directory that is templates/admin/ , and if there is a template with the same name as of the default template then Django uses our Custom created Template.
2. Use Template Inheritance: To add the custom content to a Django amin template while retaining the existing content, we can extends the base template and override only the specific blocks we need to customize. By including {% extends "admin/base.html" %} at top of our custom template will help to maintain consistency with other admin templates.

Examples 1: Customize the login page with additional fields:

In the login.html within templates/admin and add the following code.

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

{% block title %}Log in | Admin{% endblock %}

{% block content %}
    <div id="content-main">
        <h1>Log in to the custom admin interface...</h1>
        <form method="post" action="{% url 'admin:login' %}">
            {% csrf_token %}
            {{ form.as_p }}

            <div class="extra-field">
                <label for="security_question">Security Question:</label>
                <input type="text" name="security_question" id="security_question" placeholder="Your favourite location?">
            </div>

            <button type="submit" class="btn btn-primary">Log in</button>
        </form>
    </div>
{% endblock %}

In this example we extends login.html template to customize the admin login page and then adds an additional input field for a security question, which users are prompted to fill in along with their login credentials.

Example 2: Adding a Footer to the Admin Interface

Add custom footer message at the bottom to all pages in Django admin interface.

In the base_site.html within templates/admin/ add the following code.

{% extends "admin/base.html" %}

{% block footer %}
    {{ block.super }}
    <div style="text-align: center; padding: 20px; background-color: rgb(43, 174, 210); border-top: 1px solid #ddd;">
        <p style="margin: 0; color: #333;">
            &copy; 2024 My Customized Admin Interface is visible. All rights reserved.
        </p>
        <p style="margin: 5px 0; font-size: 0.9em; color: #666;">
            Powered by Django | <a href="https://www.djangoproject.com/" target="_blank" style="color: #007bff; text-decoration: none;">Django Project</a>
        </p>
    </div>
{% endblock %}

In this example within this block {% block footer %} - {% endblock %}

There is a div in which style of the footer with the message which appear on the footer is written also {{ block.super }} this tags ensures that if there is any original footer content is already present will be preserved and our custom content is appended.

Example 3: Customizing the Django Admin Dashboard Page

Add a welcome message and link to the admin index page.

In the index.html within templates/admin add the following code.

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

{% block content %}
    <h2>Welcome to the Admin Dashboard!</h2>
    <p>Manage and handle your application content with ease.</p>
    <div class="custom-welcome">
        <p>Here you can view and manage all aspects of your site. Use the menu on the left to navigate through the different sections.</p>
        <p>If you have any issues, please contact the site administrator for assistance.</p>
    </div>
    {{ block.super }}
{% endblock %}

{% block extrahead %}
    <style>
        .custom-welcome {
            background-color: #f9f9f9;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .custom-welcome p {
            margin: 0 0 10px;
        }
    </style>
{% endblock %}

In this example in base_site.html includes overall layout and style of the admin pages and we added our custom content , the content block is overridden to add a custom welcome message and additional information also we include inline styles in extrahead block as per our need, and also maintain the original content as it is.

Example 4: Customizing the Django admin interface and modify the sidebar

{% extends "admin/index.html" %}

{% block sidebar %}
    {{ block.super }}
    <div class="custom-sidebar">
        <h2>Extra Links</h2>
        <ul>
            <li><a href="/admin/extra/">An extra link</a></li>
            <li><a href="/admin/help/">Help Center</a></li>
            <li><a href="/admin/settings/">Settings</a></li>
        </ul>
    </div>
{% endblock %}

{% block extrahead %}
    <style>
        .custom-sidebar {
            margin-top: 20px;
            padding: 10px;
            background-color: #f0f0f0;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .custom-sidebar h2 {
            font-size: 16px;
            margin-bottom: 10px;
        }
        .custom-sidebar ul {
            list-style-type: none;
            padding: 0;
        }
        .custom-sidebar ul li {
            margin-bottom: 8px;
        }
        .custom-sidebar ul li a {
            color: #007bff;
            text-decoration: none;
        }
        .custom-sidebar ul li a:hover {
            text-decoration: underline;
        }
    </style>
{% endblock %}

Extends index.html template from the admin interface then {% block sidebar %} this will help to add and modify the content to the sidebar of the admin index page and add our custom content in it. {{ block.super }} this will preserved any existing content in the sidebar, then add our custom sidebar content inside div tag that is a heading and a link.

Conclusion

Customizing the Django admin interface helps tailor it to better suit our needs, it offers user-friendly and efficient design with robust and intuitive way to manage our application's data. These customization not only enhance the interface but also ensure that it fits seamlessly into our project's design and workflow. Whether adjusting the sidebar, modifying the login page, or adding new buttons, or customizing Django admin templates provides the flexibility to make the admin interface like as we designed it. By Overriding the templates, we are transforming the standard admin interface into a tailored solution that fulfills our requirements and provide better efficiency to our application management.