Overriding admin css in django

Question

I want to change some css in admin django as base.css. Is it better to change directly in the django library? How can I cancel it in the best way?

Answer 1

It depends on what you want to do. Although first of all: do not rewrite it in the Django admin directly. You have two options that I think are reasonable:

• If you want to change the overall look of the administrator, you must override the administrator templates. This is described in detail here: Overriding admin templates . Sometimes you can just expand the original admin file and then overwrite the block, for example {% block extrastyle %}{% endblock %} in django/contrib/admin/templates/admin/base.html .
• If your style is model specific, you can add additional styles using the Media meta tag in 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',) } 

Answer 2

I just extended admin / base.html to include a link to my own css file - at the end. The beauty of css is that you don't need to touch on existing definitions, just override.

Answer 3

This solution will work for the admin site, I think this is the cleanest way, because it overrides base_site.html which does not change when django is updated.

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

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

Write in it all the custom CSS that you want for your forms, for example: body{background: #000;} .

Paste this into 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 %} 

It! you did

Answer 4

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

---

Example:

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

Answer 5

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

Paste Django's default Admin CSS first , then add your settings below.

Answer 6

If you need a global scope and you don't want to think about redefining templates, mixin works great for this. Put this code wherever you want:

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

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

 select[multiple] { resize: vertical; } 

Then, on any models you want, do:

 class MyModelAdmin(admin.ModelAdmin, CSSAdminMixin): 

And everything will be ready.

Answer 7

Perhaps grappelli will save you from anxiety ...

https://github.com/sehmaschine/django-grappelli

http://lincolnloop.com/static/slides/2010-djangocon/customizing-the-admin.html#slide37

Answer 8

You have admin/css/changelists.css inside the folder in STATICFILES_DIRS , and he will use this changelists.css instead of the standard admin.