Multi tool use

Overriding admin css in django

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?

8 Answers
8

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:

{% block extrastyle %}{% endblock %}

django/contrib/admin/templates/admin/base.html

Media

admin.py

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


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.

static/admin/css/base.css

Paste in Django's default Admin CSS first, and adjust as you see fit.

django.contrib.admin

INSTALLED_APPS

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.

base_site.html

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

admin

base_site.html

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

css

admin-extra.css

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

body{background: #000;}

Paste this in the base_site.html:

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 %}


That's It! you're done

INSTALLED_APPS

settings.py

INSTALLED_APPS

(your-app)/templates/admin/base_site.html

<style>

{% block extrahead %}

Example:

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


Perhaps grappelli will save you the bother...
http://grappelliproject.com/

Old and out of date...
https://lincolnloop.com/blog/customizing-django-admin-eurodjangocon-2009/

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

admin/css/changelists.css

STATICFILES_DIRS

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:

admin.css

select[multiple] {
resize: vertical;
}


Then, in whatever models you want, do:

class MyModelAdmin(admin.ModelAdmin, CSSAdminMixin):


And you'll be all set.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.