Changing row CSS base on element

[confis]

Hey,
I need your advice on CSS
I have this page
http://mi-casa.online/payment-tracking/index.php/payment-tracking
and I would like the user will see diffrent row color based on the status (radiobutton - Value 0,1,2)

for example pending will be red and paid will be green ,etc

I read the Wiki http://fabrikar.com/forums/index.php?wiki/custom-styling-a-list/
and trid to use on components/com_fabrik/views/list/tmpl/default/custom_css.php

td.fabrik_element.fabrik_list_1_group_1{background-color:rgba(255, 0, 0, 0)!important;}
tr[id^="list_1_com_fabrik_1_row_"].fabrik_row.pending.statuspending{
background-color: #f2d3d5;
}
tr[id^="list_1_com_fabrik_1_row_"].fabrik_row.sent.statussent{
background-color: #FFCC66;
}
tr[id^="list_1_com_fabrik_1_row_"].fabrik_row.complete.statuscomplete{
background-color: #CCFFCC;
}

but without success
please advise what I was made wrong

 

[troester]

#listform_$c tr.statussent td {background:#FFCC66}
should do (in custom_css.php)

Or if you want to restrict it to your list id 1
#listform_1_com_fabrik_1 tr.statussent td {....}

 

[allanb]

Hi Troester
I need to to do the exact same thing as described above. I have a radio button element in a list called "flag". The user will be able to "flag" a record as needed. I then need to display all the "flagged" records as red in the list.
I read the Wiki http://fabrikar.com/forums/index.php?wiki/custom-styling-a-list/ but am at a lost as to what must be changed to reflect my list and elements.

My element is called flag with id 1792
My list is called Score Card - Office Overview with id 85
My group is called Office Overview with id132

I would greatly appreciate your assistance.

 

[troester]

Best help for doing CSS is your browser dev console: right-click on your element and do "inspect element" (or so, depending on browser and your language). This will show you the HTML tags and CSS classes.

The added row class depends on the values of your radio element. If it's an integer it's prepended with the element name.

So as I said
#listform_$c tr.your-radio-value-class td {background:red}
should do (in custom_css.php)

Or if you want to restrict it to your list id 85
#listform_85_com_fabrik_85 tr.your-radio-value-class td {....}

So if your flag element has values yes, no and the rows with value=yes should be red
#listform_$c tr.yes td {background:red}

 

[allanb]

Thanks for your help.
SO when I right click on the element in the front end from the displayed list I see the class as


I the lace these two lines in a the custom_css.php file located in /components/com_fabrik/views/list/tmpl/bootstrap

#listform_$c tr.inet_fabrik_office___flag fabrik_element fabrik_list_85_group_133 td {background:red}
#listform_$c tr.yes td {background:red}

I have also tried these two lines

#listform_85_com_fabrik_85 tr.inet_fabrik_office___flag fabrik_element fabrik_list_85_group_133 td {background:red}
#listform_$c tr.yes td {background:red}

But neither seem to work? (Please excuse my ignorance, I am trying to learn )
And thank you for Fabrik, it is FANTASTIC, so, so helpful, I would be lost without it.

 

[troester]

No.
tr.YYYY with YYYY is your value of your flag element (not the element name).

Your flag element must have set "Use as row class"=yes. The class is then added to the HTML row = tr tag
and Sub options like ("yes" can be anything)


Then you'll get something like
<tr id="list_85_com_fabrik_85_row_241" class="fabrik_row oddRow0 yes flagyes">
....<td ....

and
#listform_$c tr.yes td {background:red}
resp.
#listform_$c tr.flagyes td {background:red}
should do.

(If you want to do CSS you need to know a bit about it).

 

[allanb]

Thank you. I set "Use as row class"=yes and add "flag" to the cell class under List view settings - css and it is now working perfectly.
Thanks for your help.