ascripter ascripter - 2 months ago 23
CSS Question

Django 1.10: extend/override admin css

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.

Answer

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? -.-

Comments