Django (grappelli): how add my own css to all the pages or how to extend admin's base.html?

Question

In Django grappelli, how can I add my own css files to all the admin pages? Or is there a way to extend admin's base.html template?

Answer 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.
• 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',) }

Answer 2

I've stumbled upon the same problem a while ago, but I can't remember where I have found this solution.

If you don't want to include additional dependencies in your project, you can use a little hack: Obviously, you can't just override the admin/base.html template and tell it to extend admin/base.html, because that would reference to itself.

You can, however, add another template directory that would point to grappelli module location (instead of the templates location). The settings would look something like this:

import os

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'APP_DIRS': True,
        'DIRS': [
            'your/normal/templates/path',
            os.path.dirname(grappelli.__file__)
        ]
    },
]

This way you can create a admin/base.html template, which will extend templates/admin/base.html - the latter being the grappelli base template for the admin interface.

Answer 3

I found the complex solution. First of all, I found a python package which can help you to tell the Django Template Loader that your template has a highest priority in comparison with others.

1. pip install django-templateloaderwithpriorities

2. In your django settings file put next code:

   TEMPLATE_LOADERS = ('templateloaderwithpriorities.Loader', ) + TEMPLATE_LOADERS TEMPLATE_LOADER_PRIORITIES = ['project/admin/templates']

3. In project/static/css/admin/extra_admin.css put your css.

4. In project/admin/templates/admin/base_site.html (not in base.html!) put the next code:

   {% extends 'admin/base.html' %} {% load staticfiles %} {% block javascripts %} {{ block.super }} <script>alert('OK')</script> {% endblock %} {% block stylesheets %} <link rel="stylesheet" href="{% static 'css/admin/extra_admin.css' %}"> {{ block.super }} {% endblock %}

5. That's all! When you go to your site admin page, you see the javascript alert "OK", so in my example I've also included a custom js.

Everything also works fine with Django Grappelli.

Answer 4

The admin 'base.html' template can be extended by making an admin directory inside the main app folder. Inside the admin directory create a new file named base.html. Copy these lines in new files.

{% extends 'admin/base.html' %}
{% load staticfiles %}
{% block javascripts %}
    {{ block.super }}
<script type="text/javascript" src="{% static 'app/js/action.js' %}"></script>

{% endblock %}
{% block stylesheets %}

    {{ block.super }}
{% endblock %}

Here, I have overridden my javascript using an new script.