Styling background-color Column Cells based on element selection

[viawebcenter]

Element Type: Database Join

I am working in components/com_fabrik/views/list/tmpl/default/custom_css.php

I need that the background color change when select any element database join options:

Iniciado change a red color
En Ejecución change to yellow color
Culminado change to green color

I tried two methods :

#listform_8_com_fabrik_8 tr.miestado td{
background-color: green;

Where miestado is element Class

And:

td.fabrik_element.fabrik_list_8_group_1{background-color:rgba(255, 0, 0, 0)!important;}
tr[id^="list_8_com_fabrik_8_row_"].fabrik_row.estado.Culminado{
background-color: "green";

But 2 methods are not working

Thanks for your help

 

[startpoint]

In your databasejoin element open List view settings->List settings and set an option "Use as row class" to "Yes".
Read help in tooltip.

 

[viatechcenter]

I set it in List View.

Could You please help me with one code example in order set different color in cells by different option?

Thanks

 

[startpoint]

If you set to "yes" in every list row you have additional class based on your databasejoin value -> your_element_nameYOUR_ELEMENT_VALUE.
If you want to style background on some td from row:
elem_name = test;
elem_value = 3;
new tr class = test3;

.test3 .your_list_name___element_name_for_styling{
    background: red;
}

 

[viawebcenter]

Your code work partialy.

I wrote:

.estado3 .fab_proyecto___estado {
background-color: #F4FA58;
}

This code works but is not continue. For example, yellow color is rigth in one cell but in the next is in another color when both of them are the value 'En Ejecucion'

What is wrong?

Thanks

 

[lousyfool]

Add " !important" to prevent the striped table background overruling your code.

 

[troester]

For CSS styling use your browser console to examine which classes are added to elements and which are the actual settings (e.g. overriding your CSS classes because of more specific selectors).