Special layout for a list-row

[kissinger]

Hallo friends,

I have a list with multiple columns. Now I want to make the background color of each row in dependence of the value of a column.

I found this setting of an element -> listview settings -> Use as row class = YES.

Actually now receives each additional line CSS code:

<td class="fabrik_row oddRow0 status2">
<td class="fabrik_row oddRow1 status4">

Where I have to define the layout for status2/status4?

I have tried it in the file media/com_fabrik/css/fabrik.css what had brought nothing.

Where I have to define the layout for the class status2/status4?

 

[Sophist]

It probably needs to be in the custom_css.php file in the List template you are using.

There is an example file provided - so copy that to custom_css.php and go from there.

(You shouldn't use media/com_fabrik/css/fabrik.css as this will be overwritten on an upgrage / update.)

S

 

[Sophist]

P.S. I guess you have defined a specific element to hold the classes. I haven't tried it, but I would suggest that it might help to use (in your example above) integer values of 2, 4 etc. and then use the format field to add a class prefix (i.e. format field should be something like "status%s" in the above example.

This makes it easy to change the classes if e.g. you start to get a clash with any other joomla extensions which happen to use the same classes.

S

 

[kissinger]

Hallo sophist,

It probably needs to be in the custom_css.php file in the List template you are using.
There is an example file provided - so copy that to custom_css.php and go from there.

Where I can found this files?

 

[Sophist]

In components/com_fabrik/views/list/tmpl in the subdirectory for your list template.

 

[kissinger]

Hallo Sophist,

I create a file custom_css.php and define here the CSS for the differensd row-backgrounds:

.status1 {
    background-color: #F5F5F5;   
}
 
.status2 {
    background-color: #9ACD32;   
}

And it works fine. You write I can it make better wirh status%s.

I don't understand how?

 

[Sophist]

What I was thinking was...

Rather than store "status1" or "status2" in a text field, I would store 1 or 2 in an integer field. Then I would use the format setting (which does an sprintf) with "status%d" in it to turn this into a "status1" or "status2" value to use in the row. However I have checked the code to ensure that it does the sprintf, and I think this code is missing, but if you find that the sprintf is not applied, the code should be easy enough to add.

What I did find when looking at the code is that, if the value is numeric then the element name is used as a prefix automatically. So if the field is named "status" then a value of 1 would automatically give you a class of status1. So, if you wanted e.g. to use a YesNo field as the UI for which row colour to use, yesno does not have a format setting, however if the yesno field was named "status" then you would automatically get a class of "status0" for No and "status1" for Yes.

Hope this helps.

S

 

[kissinger]

Thank you sophist!

 

[cyberholic]

Please do not misunderstand me, but would the NTH CHILD syntax for css be your best solution?
Maybe i have missunderstood your question, but it looked to me like you want to have an odd/even class layout.

 

[Sophist]

cyberholic - I am not sure that is the case - whilst he is showing oddRow0 and oddRow1 classes, that is probably because he has selected that option in his List settings. But he wants to add further highlighting based on the content of a field. Which could be at line 1 or line 20 so n'th child (whilst a great idea for other circumstances) does not seem to be the answer to this one.

S