Django Administration 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.
