Say I have a content type "task" with one field "status", which is output by views. Now I want when the status is "finished", the color of that row will be red, when the status is "failed", the color of that row will be yellow, when the status is "ongoing", the color of that row will be green. Is there any way to realize this? BTW, I know very little about code.

Picture as below


1 Answer 1


There are 2 ways to do this, but you should do this the Drupal way.

  1. You can use JavaScript to iterate through each <tr> adding a class to the <tr> if it finds finished in the last column.

  2. You can do it the Drupal way in views. I assume you are using the table view to output your data since that's what you are showing us.

Under your edit view mode, you'll see "Format" and then "Format:Table | Settings".

Click on Settings. Under settings you should see an option that says "Row Class".

You want to set your row class equal to the value of the status field. To do this. Look under Fields to find the field that is displaying your status column and click to edit it. Once there, select "Rewrite results" and then click the "Override the output of this field with custom text" checkbox.

This will open a textbox with an option below it stating "Replacement Patterns." when you click this, you should see some options inside of {{ }}. There will likely be one that looks something like {{ status }} == Status.

The {{ status }} part is your replacement pattern. Copy it and paste it into the row class field under table settings.

What this will do is add a class to your <tr> in your view.

Example of what the view output will then look like:

<tr class="finished">
  <td>write article</td>

After completing this step, you need to add a bit of CSS to your stylesheet in your theme.

Something like:

tr.finished td { color: red; }
tr.ongoing td { color: green; }
tr.failed td { color: yellow; }

So you end up changing the row class to be the replacement pattern of your status field and adding 3 lines of CSS code to your theme's style sheet.

  • 1
    The CSS Editor module drupal.org/project/css_editor allows you to enter CSS through the interface, without modifying your theme. It's useful when you only need to make small style adjustments or don't know how to create subthemes.
    – prkos
    Commented May 19, 2019 at 21:54

Not the answer you're looking for? Browse other questions tagged or ask your own question.