Customize the color of the row based on the value of the element

[nerio]

I need to customize the color of the row based on the value of the element. I entered Use as a row class
to the "assumed" element (yes / no element) of the "pay" list that uses the "animators" table. How can I do in custom_css.php to assign, for example, the color green to the line that contains "assumed" = yes (1)? Will you help me?

 

[juuser]

You are on the right track. Inspect the element row in browser console to find out the class name that is being applied. Usually when you have yes/no element, it will be something like your_element0 and your_element1.

Then in custom.css you can have something like:

.your_element0 {
color:red;
}

.your_element1 {
color:green;
}

 

[lousyfool]

Then in custom.css you can have something like:

It's a tiny bit more complicated, though. Because, as implied in "row class", it is the row = the <tr> which gets the class. But since the cell colours are typically set for the <td>, the code should look like

// for all elements in the row
.your_element0 > td {color:red;}
.your_element1 > td {color:green;}

// or, alternatively, for only the yes/no element
.your_element0 > td.tablename___your_element {color:red;}
.your_element1 > td.tablename___your_element {color:green;}

And in some cases, it also needs the infamous "!important".

 

[juuser]

Seems to be working perfectly fine just styling the tr element alone in different environments and browsers. Although might be possible that there would be issues with some very old browsers (like IE8) even so I doubt it would. So lousyfool's addition might be more "foolproof".

 

[nerio]

I have used both solutions and it works perfectly.
Thank you.

.my_element0 {
colorimGray;
}
.my_element1 {
color:Navy;
}
// for all elements in the row
.my_element0 > td {backgroundeachPuff;}
.my_element1 > td {backgroundaleGreen;}

 

[nerio]

With color it works well. With background applies to alternating lines. A solution?

 

[lousyfool]

With background applies to alternating lines.

Not exactly sure what you mean. Worth a try:

And in some cases, it also needs the infamous "!important".

More could only be said when looking at the page and the CSS in the browser inspector.

 

[nerio]

I attach screenshot

 

[nerio]

Sorry. Here's the attachment.

 

[troester]

Set your list to "Striped"=no (in Layout tab)
(or set
.table-striped tbody > tr:nth-child(odd).my_element0 > td {background....}

 

[nerio]

Perfect. Thank you. Resolved (Striped=no).

 

[nerio]

The same solution, however, should be applied to an element of a list that uses a table which is a repeating group of another module. Let me explain:
I have an "animatori" list with "animatori" table
I have a "strutture" list with "strutture" table
I therefore have a module "strutture" with repeated group "team" with table "strutture_56_repeat" where there are the elements "strutture_56_repeat___animatore_team" (union with "animatori") and "strutture_56_repeat___assunzione" (YES / NO).
I create the "stipendi" list with the same table "strutture_56_repeat".
At this point I would like to assign a different background based on the value of “.assunzione0” or “.assunzione1” to be displayed in the "stipendi" list but it doesn't work.
My goal is to highlight those who have been hired not based on the animators registry (there may be different periods for the same person) but based on the assigned service line ("strutture_56_repeat___animatore_team").
Sorry for the translation.

 

[nerio]

Carryover custom_css.php:
// for all elements in the row
.assunzione0> td {background: Red;}
.assunzione1> td {background: Yellow;}