Overriding admin css in django
DjangoDjango AdminDjango Problem Overview
I want to change certain css in admin django like base.css. Is it better to change directly in the django library? How can I override it in the best way?
Django Solutions
Solution 1 - Django
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:
- 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 %}
indjango/contrib/admin/templates/admin/base.html
as an example. - If your style is model specific you can add additional styles via the
Media
meta class in youradmin.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',)
> }
Solution 2 - Django
- In
settings.py
, make sure your app is listed before admin in theINSTALLED_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 %}
Solution 3 - Django
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
Solution 4 - Django
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.
Solution 5 - Django
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.
Solution 6 - Django
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.
Solution 7 - Django
Have admin/css/changelists.css
inside a folder in STATICFILES_DIRS
, and it will user that changelists.css instead of the default admin one.
Solution 8 - Django
The better option is to override HTML
inside your templates create a folder admin and there your can create base.html
{% extends 'admin/base.html' %}
{% block extrahead %}{{ block.super }}
<style>
:root {
--primary: #9774d5;
--secondary: #785cab;
--link-fg: #7c449b;
--link-selected-fg: #8f5bb2;
}
</style>
{% endblock %}
Solution 9 - Django
If the string given is a method of the model, ModelAdmin or a callable, Django will HTML-escape the output by default. To escape user input and allow your own unescaped tags, use format_html().
Here’s a full example model:
from django.contrib import admin
from django.db import models
from django.utils.html import format_html
class Person(models.Model):
first_name = models.CharField(max_length=50)
last_name = models.CharField(max_length=50)
color_code = models.CharField(max_length=6)
@admin.display
def colored_name(self):
return format_html(
'<span style="color: #{};">{} {}</span>',
self.color_code,
self.first_name,
self.last_name,
)
class PersonAdmin(admin.ModelAdmin):
list_display = ('first_name', 'last_name', 'colored_name')