Django 1.10: extend/override admin css

Question

I want to override the css definition of a select-multiple widget by decreasing the min-height attribute from contrib/admin/static/admin/css/base.css. However, my css is not loaded I think. I use a custom admin form and have defined the Media subclass within this form as well as within the corresponding ModelAdmin:

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

The file itself is located in myapp/static/css/admin widgets.css and contains:

    select[multiple] {
        min-height: 65px;
    }

In settings.py, I have defined

    BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
    STATICFILES_DIRS = [os.path.join(BASE_DIR, "myapp", "static")]
    STATIC_ROOT = os.path.join(BASE_DIR, 'static')
    STATIC_URL = '/static'

I've ran manage.py collectstatic which collected all the admin files and my own css file in the project's static-subdir. I've also extended urls.py as described here, but the widget is still rendered with 150px min-height which is defined in base.css. Any help is appreciated.

EDIT: I actually use the form within a django.contrib.admin.TabularInline. I just also tried to add the Media-subclass to this inline - to no avail.

This is a long shot, sorry, but I'm not sure you can have spaces in the filename. At least it's something I have never done or seen. — Jonas Grumann, Sep 06 '16 at 15:36

ascripter · Accepted Answer · 2018-02-27T23:19:52.517

I've found the solution myself. It is indeed only one character, but not the whitespace in the filename that Jonas pointed me to (I'm on a Windows filesystem, maybe that's different on linux). Instead, it's the leading slash of the URL in the Media class. Instead of:

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

it has to be

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

or otherwise Django looks directly in the project's root directory for css/admin widgets.css instead of the static subdirectory static/css/admin.widgets.css.

Furthermore, it seems irrelevant if the Media subclass resides in the Admin, the Inline or the Form directly. It works in any case.

And one more hint: Always clear the browser cache before testing when working with css or js. How many times have I already fallen into the same pit? -.-

EDIT: There is already an answer that describes how to override the admin. Old but still correct as of Django 2.0

Django 1.10: extend/override admin css

1 Answers1