ascripter ascripter - 4 months ago 29
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

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

, 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 collectstatic
which collected all the admin files and my own css file in the project's static-subdir. I've also extended
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
. I just also tried to add the Media-subclass to this inline - to no avail.


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