I have a requirement to have the row's color change based on a "status" of that row.
Here is a solution that I have found for Drupal...
https://drupal.stackexchange.com/questions/281318/conditional-change-row...
And here is my take on it.
My requirements are for a Views "page" display, with a "table" format, where the text color changes depending on the text of the row as shown in the image below.
Prerequisite: You must be familiar with creating Views. If not do a search or ask in the forums or on Zulip.
We can use the "replacement pattern" to inject a value into the CSS row class, this will use the actual row value as the class. This is an excellent way for a small list of Statuses or ones that won't change to be used to change the color.
My field list looks like this...
It's easy to get the name of the "replacement pattern" name by clicking on the field, in my case this is the "status" field.
When the form appears, scroll down to "Rewrite results", it should like the image below.
Click on the heading to expand the options, it should look like the following.
Click the checkbox for "Rewrite the output of this field" and it should show more options as below...
Click on "Replacement patterns" and locate the field you want to use... in my case it's the [field_status]
Highlight the text and copy it.
Click "cancel" to close the form; we don't need to save the changes, we just needed the pattern name.
Click on "settings" for the Format section...
Scroll down to "Row class" and paste the copied pattern text into the field.
Click apply and save the View.
Now we need to setup the CSS. You can either modify your themes CSS or use the CSS Injector module to add the CSS to your site.
When "Inspecting" the HTML in the browser we can see that a CSS class has been added to the <tr>
and here's the actual display the above is related to...
If we add a the following CSS...
We get the results we're looking for...
Of course, you can add more...
If you have any tips or "how too's" please think about adding them to the forum.
Comments
Thanks for sharing! That's a great tip and very easy to implement.
I have done something like this before by implementing template_preprocess_views_view_unformatted() (or another hook depending on the display format), created a new variable available to the template, and then overrode the views template to use that variable, for example, to do an inline css of properties like background-color for the row. Your approach is much simpler.
I was pleasantly surprised how easy it was to do... and with CSS Injector module it's a breeze to customise the display...
tr.Do-not-renew { color: red; } tr.Cancelled { color: red; } tr.Active { color: green; } tr.Do-not-renew > td.views-field-field-status { background-color: rgba(250,0,0,0.10); }