[ACCEPTED]-Change row colour in Django Admin List-django-templates

Accepted answer
Score: 26

I was wrong, there's another alternative 17 using just the Django admin app.

In the admin.py 16 for your app, you can define a renderer 15 for the contents of a table cell. Here's 14 the variant for my film library:

class FilmAdmin(admin.ModelAdmin):

   def film_status(self, obj):
        if obj.status() != 'active':
            return '<div style="width:100%%; height:100%%; background-color:orange;">%s</div>' % obj.status()
        return obj.status()
    film_status.allow_tags = True

    list_display = ('id', 'title', 'film_status')

admin.site.register(Film, FilmAdmin)

Here, I've 13 created a field name, film_status, that does not exist 12 in the Film model, and defined it as a method 11 of FilmAdmin. It gets passed the item for every 10 row. I've had to tell the renderer to allow_tags, which 9 tells the admin app not to "safe" the HTML 8 content.

This won't fill the whole cell, though, as 7 the cell itself has some padding. Only 6 the part of the cell your app is allowed 5 to fill (as defined by the admin's stylesheet) will 4 be filled. But it's good enough for my 3 purposes.

There you go. Two completely different, but 2 useful, techniques for decorating the content 1 of a cell in a Django admin list.

Score: 10

As it turns out, customizing the change_list_results.html 16 and the associated generator is quite a 15 bear. I'd like to propose a completely 14 different solution: Override change_list.html 13 for your application, and use Javascript 12 to do the effect you want.

I had exactly 11 the same problem you have. For a film library, I 10 needed to know if the filmmaker's registration 9 was "active" or something else. Here's 8 the entirety of my override:

{% extends "admin/change_list.html" %}

{% block extrahead %}
{{ block.super }}
<script type="text/javascript">
(function($) {
    $(document).ready(function() {
        $('#result_list tr td:nth-child(7)').each(function() {
            if ($(this).text() != 'active') {
                $(this).css('background-color', 'orange');
{% endblock %}

This file is 7 ${TEMPLATE_DIR}/admin/films/film/change_list.html. Django's result list is id'd result_list, all I 6 do here is decorate column 7 with a different 5 background style if the contents of the 4 column are not to my liking.

The admin provides 3 jQuery already, so no additional changes 2 to your application or admin are necessary 1 to make this work.

Score: 10

Check out django-liststyle, exactly what you're after.


Score: 2
class FilmAdmin(admin.ModelAdmin):
 def get_film_status(self, obj):
        if obj.status() != 'active':
            return mark_safe("<span class='row_gray'>%s</span>" % obj.status())

 class Media:
        js = ("js/my_admin.js", )

and in my_admin.js :

window.onload = function() {
    var x=document.getElementsByClassName("row_gray");
    var i;
    for (i = 0; i < x.length; i++) {
        var ligne=x[i].parentNode;
        while (ligne.tagName !== "TR") {ligne=ligne.parentNode;}
        ligne.style.backgroundColor = "lightgray";


More Related questions