Educational

Branding and Styling the Django Admin Interface

—

by

Saim Khalid
in

Introduction

Django’s admin interface is one of the most impressive out-of-the-box features of the framework. With minimal configuration, you get a fully functional, secure, and responsive backend management dashboard. It enables administrators to create, update, and manage data without building a custom dashboard from scratch.

However, while Django’s admin is powerful, it looks fairly generic by default. The default blue-and-white theme works well for development, but it might not reflect your company’s branding or design standards when deploying a professional product.

If you are building an internal tool, client-facing application, or business dashboard, you will likely want to customize Django’s admin interface to align with your organization’s branding — including colors, logos, titles, and even layout.

In this post, we’ll cover everything you need to know about customizing, branding, and styling the Django admin interface. You’ll learn how to:

  • Change site headers and titles
  • Modify templates and HTML blocks
  • Override styles with CSS
  • Add a logo or color scheme
  • Use third-party themes like Grappelli, Django Suit, or Jet Admin

By the end, your Django admin panel will not only be functional but also visually aligned with your brand identity.

Why Customize the Django Admin?

There are several reasons you might want to style or brand your Django admin dashboard:

  1. Professional Appearance:
    When your admin interface is used by clients, managers, or team members, a polished look makes a strong impression.
  2. Brand Identity:
    Using your brand’s colors, fonts, and logos ensures consistency across your entire platform.
  3. Improved Usability:
    A well-styled admin can be easier to navigate, especially if you adjust colors, labels, and layouts to fit user preferences.
  4. Custom Workflows:
    With template overrides, you can modify the admin layout to include charts, reports, or quick actions that match your team’s workflow.
  5. Client-Facing Portals:
    Some projects use Django’s admin for client dashboards. In that case, customization becomes essential to make it feel like part of the product.

The Default Django Admin Interface

When you create a Django project and run:

python manage.py createsuperuser
python manage.py runserver

You can log in to the admin at:
http://127.0.0.1:8000/admin/

You’ll see the familiar Django admin dashboard — blue header, “Django administration” title, and your registered models listed below.

Although it’s perfectly functional, it doesn’t display your app’s name, branding, or style. That’s what we’ll change next.

Step 1: Basic Branding Customization in admin.py

Django allows you to customize the text and titles displayed on the admin interface directly from your admin.py file. These are the simplest and most common branding changes.

Open your admin.py file and add the following lines:

from django.contrib import admin

admin.site.site_header = "Book Management Dashboard"
admin.site.site_title = "Book Admin Portal"
admin.site.index_title = "Welcome to the Book Management Admin"

Explanation

  • site_header – Appears in the top-left corner of the admin dashboard (header area).
  • site_title – Appears in the browser tab or window title.
  • index_title – Appears on the main admin home page, just above the list of registered models.

Once you save and refresh your admin dashboard, you’ll immediately see these changes reflected.

This simple branding update already makes your admin panel feel more customized and professional.

Step 2: Overriding Default Admin Templates

While the text customization is useful, it’s still limited. If you want to modify the layout, colors, or add logos, you need to override Django’s built-in templates.

Django’s admin templates are located inside its package under
django/contrib/admin/templates/admin/.

You should never edit those files directly.
Instead, override them in your own project.

Create a Custom Templates Directory

Inside your project, create this folder structure:

project_root/
│
├── templates/
│   └── admin/
│       └── base_site.html

Then, make sure your settings include the templates directory:

TEMPLATES = [

{
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [BASE_DIR / 'templates'],
    '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',
        ],
    },
},
]

Step 3: Customizing base_site.html

Now that you have the templates/admin/ directory, create a file called base_site.html inside it.

Django automatically looks for base_site.html when rendering the admin interface, so your version will override the default one.

Here’s an example of a simple customization:

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

{% block title %}My Custom Admin{% endblock %}

{% block branding %}
<h1 style="color:#0066cc; font-size:24px;">My Bookstore Admin</h1>
{% endblock %}

{% block nav-global %}
<div style="margin-left: 20px; color: gray;">

Logged in as: {{ user.username }}
</div>
{% endblock %}

Explanation

  • We extend the default admin/base.html template.
  • The {% block title %} tag overrides the page’s <title>.
  • The {% block branding %} section allows you to replace the Django logo and text with your own brand name or logo.
  • The {% block nav-global %} adds a small message or toolbar above the menu — for example, showing the current logged-in user.

After saving the file, reload the admin page, and you’ll see your custom title and header applied.

Step 4: Adding a Logo

To include a logo in the admin header, place your logo image file (for example, logo.png) inside your static files directory:

static/
└── images/

└── logo.png

Then, modify your base_site.html like this:

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

{% block branding %}
<div style="display: flex; align-items: center;">

&lt;img src="{% static 'images/logo.png' %}" alt="Logo" height="50" style="margin-right:10px;"&gt;
&lt;h1 style="color:#0066cc;"&gt;Book Management Admin&lt;/h1&gt;
</div>
{% endblock %}

Now your logo will appear beside the admin title — giving it a professional branded look.

Step 5: Changing Colors with Custom CSS

To change colors, typography, or spacing, you can include your own CSS file.

Create a CSS File

In your static directory:

static/
└── css/

└── custom_admin.css

Add any custom styles:

/* Change the background color of the header */
#header {

background-color: #0066cc !important;
color: white;
}

/* Change font family */
body {

font-family: "Roboto", sans-serif;
}

/* Style the module headings */
.module h2 {

color: #0066cc;
}

/* Style table headers */
th {

background-color: #f5f5f5;
color: #333;
}

/* Custom button color */
input[type=submit], button {

background-color: #0066cc;
color: white;
border-radius: 5px;
}

Load Your CSS in base_site.html

Edit your base_site.html again and include this inside the <head> block:

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

{% block extrastyle %}
<link rel="stylesheet" type="text/css" href="{% static 'css/custom_admin.css' %}">
{% endblock %}

After refreshing the page, your Django admin will now have a new color palette and font style matching your brand.

Step 6: Customizing the Login Page

You can also customize the Django admin login page to include your branding.

Create a new file:

templates/admin/login.html

Then extend the base admin login page and customize it:

{% extends "admin/login.html" %}
{% load static %}

{% block content %}
<div style="text-align:center; margin-bottom:20px;">

&lt;img src="{% static 'images/logo.png' %}" height="80"&gt;
&lt;h2 style="color:#0066cc;"&gt;Welcome to Book Management Portal&lt;/h2&gt;
</div>
{{ block.super }}
{% endblock %}

This overrides the login page and adds your logo and custom greeting.

Step 7: Adding a Favicon and Title Customization

To make your admin feel like a real branded dashboard, you can add a favicon and custom page title.

Add your favicon image under:

static/images/favicon.ico

Then modify base_site.html:

{% block extrahead %}
<link rel="icon" type="image/x-icon" href="{% static 'images/favicon.ico' %}">
{% endblock %}

Now your browser tab will show your custom icon.

Step 8: Using a Custom Dashboard Template

If you want to go beyond headers and colors, you can create a custom dashboard layout by overriding the index.html template.

Create:

templates/admin/index.html

Example:

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

{% block content %}
<h1>Welcome to the Book Management Dashboard</h1>
<p style="font-size:16px;">Manage your books, authors, and categories efficiently using the tools below.</p>

<div style="margin-top:30px;">

&lt;h3&gt;Quick Links&lt;/h3&gt;
&lt;ul&gt;
    &lt;li&gt;&lt;a href="/admin/app_name/book/"&gt;Manage Books&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/admin/app_name/author/"&gt;Manage Authors&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</div>

{{ block.super }}
{% endblock %}

This approach allows you to place introductory text, quick links, or widgets at the top of your admin homepage.

Step 9: Extending the Admin with a Custom Theme

If you want a completely different look and feel, Django offers third-party packages that provide pre-built themes for the admin interface. Let’s explore the most popular ones.

Option 1: Django Grappelli

Django Grappelli is one of the most popular admin UI enhancements. It gives a clean, modern interface with improved usability and aesthetics.

Installation:

pip install django-grappelli

Then add it to your INSTALLED_APPS before django.contrib.admin:

INSTALLED_APPS = [

'grappelli',
'django.contrib.admin',
...
]

In your urls.py:

urlpatterns = [

path('grappelli/', include('grappelli.urls')),
path('admin/', admin.site.urls),
]

Run the server and refresh your admin page — you’ll see a redesigned layout with new menus, better typography, and an improved navigation sidebar.

Customization:
Grappelli supports additional configuration for header titles and custom CSS, allowing you to further align it with your brand colors.

Option 2: Django Suit

Django Suit offers a sleek, business-like admin interface. It emphasizes readability, responsive design, and ease of navigation.

Installation:

pip install django-suit

Then in settings.py:

INSTALLED_APPS = [

'suit',
'django.contrib.admin',
...
]

Django Suit allows you to define menu structures, icons, collapsible sections, and even tabbed forms.

Example configuration:

SUIT_CONFIG = {

'ADMIN_NAME': 'Book Management Portal',
'HEADER_DATE_FORMAT': 'l, j F Y',
'MENU': (
    'sites',
    {'app': 'yourapp', 'label': 'Library Management'},
)
}

Django Suit is often used for professional dashboards where branding and structure are a priority.

Option 3: Jet Admin

Jet Admin (community edition) or Jet Pro offers a modern admin interface with sidebar navigation, customizable themes, and a more app-like experience.

Installation:

pip install django-jet

Then in settings.py:

INSTALLED_APPS = [

'jet',
'django.contrib.admin',
...
]

Add this to urls.py:

urlpatterns = [

path('jet/', include('jet.urls', 'jet')),
path('admin/', admin.site.urls),
]

Jet includes:

  • A dark mode option
  • Configurable sidebar menus
  • Responsive layout
  • Multiple color themes

This makes it a great option for modern, mobile-friendly admin panels.

Step 10: Adding Custom CSS and JS Files per App

If your project includes multiple apps, you can apply app-specific styles to their admin sections by extending the admin templates for those apps.

Example in your app’s templates/admin/yourapp/book/change_form.html:

{% extends "admin/change_form.html" %}
{% load static %}

{% block extrastyle %}
<link rel="stylesheet" href="{% static 'css/book_admin.css' %}">
{% endblock %}

This ensures only the admin pages related to Book will have those styles applied.

Step 11: Overriding the Admin Base Template for Deep Customization

If you need even more control, you can override the base.html template itself.

templates/admin/base.html

This file controls the global layout, including navigation, breadcrumbs, and footer. By extending or replacing this template, you can:

  • Add a custom footer with copyright text
  • Add quick links to support or documentation
  • Inject JavaScript to track analytics

Example:

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

{% block footer %}
<div style="text-align:center; padding:10px; color:#999;">

© 2025 My Bookstore — Powered by Django
</div>
{% endblock %}

Step 12: Tips for Maintaining Custom Admin Styles

  1. Use Template Inheritance Wisely:
    Extend existing templates rather than rewriting them completely to maintain compatibility with future Django updates.
  2. Keep CSS Minimal:
    Only override what’s necessary to avoid conflicts with Django’s built-in classes.
  3. Test Responsiveness:
    Ensure your customizations look good on both desktop and mobile devices.
  4. Document Your Changes:
    Keep a record of overridden templates and styles for future developers.
  5. Check Compatibility:
    If using a theme like Grappelli or Suit, check compatibility with your Django version before upgrading.

Example: Complete Customization Summary

Here’s a complete minimal setup combining all the techniques:

admin.py

from django.contrib import admin

admin.site.site_header = "Book Management Dashboard"
admin.site.site_title = "Book Admin Portal"
admin.site.index_title = "Welcome to the Book Management Admin"

templates/admin/base_site.html

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

{% block branding %}
<div style="display:flex; align-items:center;">

&lt;img src="{% static 'images/logo.png' %}" height="50" style="margin-right:10px;"&gt;
&lt;h1 style="color:#0066cc;"&gt;Book Management Admin&lt;/h1&gt;
</div>
{% endblock %}

{% block extrastyle %}
<link rel="stylesheet" href="{% static 'css/custom_admin.css' %}">
{% endblock %}

static/css/custom_admin.css

#header {

background-color: #0066cc !important;
color: white;
}

body {

font-family: 'Poppins', sans-serif;
}

This simple configuration gives your admin a completely branded and professional look.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *