[Django]-How to override css in Django Admin?

It depends a lot of what you want to do. Though first of all: do not overwrite it in the Django admin directly. You got two options I think are reasonable:

1. If you want to change the appearance of the admin in general you should override admin templates. This is covered in details here: Overriding admin templates. Sometimes you can just extend the original admin file and then overwrite a block like {% block extrastyle %}{% endblock %} in django/contrib/admin/templates/admin/base.html as an example.
2. If your style is model specific you can add additional styles via the Media meta class in your admin.py. See an example here:

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

• In settings.py, make sure your app is listed before admin in the INSTALLED_APPS.
• Create (your-app)/templates/admin/base_site.html and put the <style> block into the {% block extrahead %}

---

Example:

{% extends "admin/base_site.html" %}
{% block extrahead %}
    <style>
        .field-__str__ {
            font-family: Consolas, monospace;
        }
    </style>
{% endblock %}

This solution will work for the admin site, I think it’s the cleanest way because it overrides base_site.html which doesn’t change when upgrading django.

Create in your templates directory a folder called admin in it create a file named base_site.html.

Create in your static directory under css a file called admin-extra.css .

Write in it all the custom css you want for your forms like: body{background: #000;}.

Paste this in the base_site.html:

{% extends "admin/base.html" %}
{% load static from staticfiles %} # This might be just {% load static %} in your ENV

{% block title %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}

{% block extrastyle %}{{ block.super }}<link rel="stylesheet" type="text/css" href="{% static "css/admin-extra.css" %}" />{% endblock %}

{% block branding %}
<h1 id="site-name"><a href="{% url 'admin:index' %}">{{ site_header|default:_('Django administration') }}</a></h1>
{% endblock %}

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

As mentioned in the comments:
make sure your app is before the admin app in INSTALLED_APPS, otherwise your template doesn’t override django’s

That’s It! you’re done

I just extended admin/base.html to include a reference to my own css file – at the end. The beauty of css is that you don’t have to touch existing definitions, just re-define.

In your static directory, create a static/admin/css/base.css file.

Paste in Django’s default Admin CSS first, then add your customizations at the bottom.

If you want a global scope and you don’t want to think about overriding templates a mixin works really well for this. Put this code wherever you want:

class CSSAdminMixin(object):
    class Media:
        css = {
            'all': ('css/admin.css',),
        }

Then, make a CSS file called admin.css with your overrides, for example:

select[multiple] {
    resize: vertical;
}

Then, in whatever models you want, do:

class MyModelAdmin(admin.ModelAdmin, CSSAdminMixin):

And you’ll be all set.

Have admin/css/changelists.css inside a folder in STATICFILES_DIRS, and it will user that changelists.css instead of the default admin one.

You can override base.css in Django Admin.

For example, there is Person model as shown below:

# "app1/models.py"

from django.db import models

class Person(models.Model):
    name = models.CharField(max_length=20)

    def __str__(self):
        return self.name

Then, there is Person admin as shown below:

# "app1/admin.py"

from django.contrib import admin
from .models import Person

@admin.register(Person)
class PersonAdmin(admin.ModelAdmin):
    pass

Then, there is Person admin as shown below:

Then, copy base.css from django/contrib/admin/static/admin/css/base.css in your virtual environment to static/admin/app1/css/ as shown below:

django-project
 |-core
 |  └-settings.py
 |-app1
 |  |-models.py
 |  └-admin.py
 |-app2
 └-static
    └-admin
       └-app1
          └-css
             └-base.css # Here

Then in base.css, replace background: var(--header-bg); with background: black; as shown below to change the header color to black in Person admin page:

/* "static/admin/app1/css/base.css" */

#header {
    width: auto;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px;
    /* background: var(--header-bg); */
    background: black;
    color: var(--header-color);
    overflow: hidden;
}

First, I explain how to change the header color to black in Person admin page.

So, set "admin/app1/css/base.css" to css in Media class as shown below:

# "app1/admin.py"

from django.contrib import admin
from .models import Person

@admin.register(Person)
class PersonAdmin(admin.ModelAdmin):
    class Media:
        css = {    # ↓ ↓ ↓ ↓ ↓ ↓ Here ↓ ↓ ↓ ↓ ↓ ↓
            "all": ("admin/app1/css/base.css",)
        }      

Then, the header color is changed to black in Person admin page as shown below:

And, the header color is not changed to black in Animal admin as shown below:

Next, I explain how to change the header color to black in all admin pages.

So, copy base.html from /django/contrib/admin/templates/admin/base.html in your virtual environment to /templates/admin/base.html as shown below:

django-project
 |-core
 |  └-settings.py
 |-app1
 |  |-models.py
 |  └-admin.py
 |-app2
 |-static
 |  └-admin
 |     └-app1
 |        └-css
 |           └-base.css # Here
 └-templates
    └-admin
       └-base.html # Here

Then in base.html, replace admin/css/base.css with admin/app1/css/base.css in {% static %}:

# "templates/admin/base.html"

# ...
<title>{% block title %}{% endblock %}</title>
{# <link rel="stylesheet" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}"> #}
{# ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ Here ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ #}
<link rel="stylesheet" href="{% static "admin/app1/css/base.css" %}"> {# ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ Here ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ #}
{% block dark-mode-vars %}
#...

Then, the header color is changed to black in Person and Animal admins as shown below:

It just so happens that using <style> tag inside {% block extrastyle %}{% endblock %} did not work for me when I wanted to override css. Theming support provides the correct way. All I was missing is {{ block.super }} :-

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

{% block extrastyle %}{{ block.super }}
<style>
--- your style ---
--- properties here ---
</style>
{% endblock %}