How to add css class to Django admin form

Question

I was wondering if it's possible to add a css class to the Django admin form?

For example:

@admin.register(SomeFunction)
class SomeFunctionAdmin(SortableAdmin):
    fieldsets = (
        (None, {
            'fields': ('item1', 'item2', 'item3'),
        }),
    )

    def get_form(self, request, obj=None, **kwargs):
        form = super(SomeFunctionAdmin, self).get_form(request, obj, **kwargs)
        return form

    class Media:
        js = (
            'custom.js',
        )

Now I want to add a css class to SomeFunctionAdmin, let's say I want to add .custom-form-admin class. And in my custom.js file I have some functions which search for this custom css class.

How do I add the custom css class programatically to SomeFunctionAdmin?

I imagne the code would look something like this:

@admin.register(SomeFunction)
class SomeFunctionAdmin(SortableAdmin):
    fieldsets = (
        (None, {
            'fields': ('item1', 'item2', 'item3'),
        }),
    )

    def get_form(self, request, obj=None, **kwargs):
        form = super(SomeFunctionAdmin, self).get_form(request, obj, **kwargs)
        form.set_css += 'custom-form-admin'
        return form

    class Media:
        js = (
            'custom.js',
        )

Ivan · Accepted Answer · 2017-10-05 10:59:33Z

1

You can override render_change_form() and modify the content:

from django.http import HttpResponse


@admin.register(SomeFunction)
class SomeFunctionAdmin(SortableAdmin):
    fieldsets = (
        (None, {
            'fields': ('item1', 'item2', 'item3'),
        }),
    )

    def render_change_form(self, *args, **kwargs):
        content = super(SomeFunctionAdmin, self).render_change_form(*args, **kwargs).render().content
        return HttpResponse(content.replace('<form', '<form class="custom-form-admin"'))

    class Media:
        js = (
            'custom.js',
        )

answered Oct 5, 2017 at 10:59

Ivan

2,6751 gold badge14 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Igoranze Over a year ago

Thanks for your answer. I keep getting this error Exception Value: super(type, obj): obj must be an instance or subtype of type

Igoranze Over a year ago

Fixed the above, now it seems like I need to return the following: Exception Value: expected bytes, bytearray or buffer compatible object on the return HttpResponse(content.replace('<form', '<form class="custom-form-admin"'))

Ivan Over a year ago

return HttpResponse(content.replace(b'<form', b'<form class="custom-form-admin"')) if you are using Python 3

Igoranze Over a year ago

Thank you. Although I am not so fond of replacing the form, it works. I hoped there would be some method to add custom css class.

Collectives™ on Stack Overflow

How to add css class to Django admin form

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related