Django Additional CSS styles and JS scripts for admin page


Example

Suppose you have a simple Customer model:

class Customer(models.Model):
    first_name = models.CharField(max_length=255)
    last_name = models.CharField(max_length=255)
    is_premium = models.BooleanField(default=False)

You register it in the Django admin and add search field by first_name and last_name:

@admin.register(Customer)
class CustomerAdmin(admin.ModelAdmin):
    list_display = ['first_name', 'last_name', 'is_premium']
    search_fields = ['first_name', 'last_name']

After you do this, the search fields appear in the admin list page with the default placeholder: "keyword". But what if you want to change that placeholder to "Search by name"?

You can do this by passing custom Javascript file into admin Media:

@admin.register(Customer)
class CustomerAdmin(admin.ModelAdmin):
    list_display = ['first_name', 'last_name', 'is_premium']
    search_fields = ['first_name', 'last_name']
    
    class Media:
        #this path may be any you want, 
        #just put it in your static folder
        js = ('js/admin/placeholder.js', )

You can use browser debug toolbar to find what id or class Django set to this searchbar and then write your js code:

$(function () {
   $('#searchbar').attr('placeholder', 'Search by name')
})

Also Media class allows you to add css files with dictionary object:

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

For example we need to display each element of first_name column in specific color.
By default Django create table column for every item in list_display, all <td> tags will have css class like field-'list_display_name', in our case it will field_first_name

.field_first_name {
     background-color: #e6f2ff;
 }

If you want to customize other behavior by adding JS or some css styles, you can always check id`s and classes of elements in the browser debug tool.