How to Override CSS in Django Admin?

Django's admin interface is a powerful tool for managing application data. It comes with a default styling that may not always fit the visual identity of your project. Customizing the admin interface can help create a more cohesive user experience. In this article, we'll walk you through the process of overriding the CSS in Django's admin panel by creating a small Django project.

How to Override CSS in Django Admin?

Below are the guide of How to Override CSS in Django Admin.

1. Setting Up the Django Project

First, let's create a new Django project and application. Open your terminal and run the following commands:

django-admin startproject myproject
cd myproject
python manage.py startapp myapp

2. Configuring the Project

Update settings.py in the myproject directory to include the new app and configure static files:

# myproject/settings.py

INSTALLED_APPS = [
    ...
    'myapp',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / "static"]

File Structure

3. Creating a Custom CSS File for Overriding in Django Admin

Create a directory for static files in your app:

mkdir -p myapp/static/myapp/css

Create a custom CSS file myapp/static/myapp/css/custom_admin.css:

/* myapp/static/myapp/css/custom_admin.css */

body {
    background-color: rgb(71, 6, 248);
}

#header {
    background-color: #4CAF50;
    color: gray; 
}

5. Overriding the Admin Template

To apply your custom CSS, you need to extend the admin base template. Create a new directory for templates:

mkdir -p myapp/templates/admin

Create a new template myapp/templates/admin/base_site.html:

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

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

6. Applying the Changes urls.py and admin.py

Ensure your project is set up to serve static files during development by adding the following to urls.py:

# myproject/urls.py

from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

In myapp/admin.py, the MyModelAdmin class extends admin.ModelAdmin and uses the Media inner class to include custom CSS. The css attribute specifies that custom_admin.css from myapp/css should be applied to all admin pages for this model. This allows for the customization of the admin interface's appearance

admin.py

# myapp/admin.py

from django.contrib import admin

class MyModelAdmin(admin.ModelAdmin):
    class Media:  
        css = {
             'all': ('myapp/css/custom_admin.css',)
        }

7. Running the Project

Run the development server to see the changes:

python manage.py makemigrations
python manage.py migrate
python manage.py createsuperuser
python manage.py runserver

Log in to the admin panel at http://127.0.0.1:8000/admin/ using the superuser credentials you created. You should see the customized admin interface with your custom CSS applied.

Conclusion

Overriding CSS in Django's admin interface allows you to tailor the look and feel to better match your project's design requirements. By following the steps outlined above, you can create a more cohesive and visually appealing admin panel. This customization not only improves aesthetics but can also enhance user experience and productivity.