Change list row color based on element value

[gnavarro]

Hi,

Is it possible to choose one or more elements to update the list row color based on their introduced/changed values?

Thanks in advance.

 

[troester]

In element settings (List view) you can set "use as row class" (which will add the element's value to the tr tag).
Then you can add custom CSS to display what you need.

 

[gnavarro]

Troster,

Thanks for the quick reply.

I'm not really advanced concerning coding.

Can you please give me a CSS code example and tell me in what file to introduce it? or give me a link with all the explanations? Thanks

 

[cheesegrits]

http://fabrikar.com/forums/index.php?wiki/custom-styling-a-list/

For the CSS class, just specify the value of your element as the class name. So if the value which turns the row red is 'red' ...

.red {
bg-color: red;
}

If the value is numeric, you'll need to preface the class name with the (short, so no tablename___ prefix) element name (because you can't have CSS classes which start with a number). So if the value that turns the row red is 7 ...

.yourelement_7 {
bg-color: red;
}

Also note that we will convert any non alpha-numeric characters in the value into an underscore when creating the class name to look for, so 'some%value' would become 'some_value'.

-- hugh

 

[gnavarro]

Thanks Hugh,

I Will try to follow your instructions.

 

[gnavarro]

Hugh,

Concerning the link http://fabrikar.com/forums/index.php?wiki/custom-styling-a-list/ and doing simple CSS tweaks or additions to a given template, there is no folder 'default' in 'components/com_fabrik/views/list/tmpl/ 'only in 'components/com_fabrik/views/list/tmpl25/'!

Should I create the 'default' folder and copy the file 'custom_css_example.php' from '...tmpl25/default' to the created folder '...tmpl/default'? Is this file compatible with fabrik last version?

 

[cheesegrits]

As it says on that page ...

Replace 'default' with whatever template you are using

-- hugh

 

[gnavarro]

Hugh, I'm using Protostar so I should create the folder: 'components/com_fabrik/views/list/tmpl/ protostar'
Correct? Sorry for this question but I dont know if is the joomla template or the fabrik list frontend template... in this case should be bootstrap and this folder obviously already exist and I probably only have to edit the custom_css.php.

Please advise. Many thanks!

 

[troester]

No, it's about the Fabrik template (layout)
If you are using the bootstrap list template go to components/com_fabrik/views/list/tmpl/bootstrap
copy custom_css_example.php to custom_css.php
add your css

 

[gnavarro]

Ok... thanks.

 

[gnavarro]

Hugh,

I'me made it to work with the following css example:

#listform_3_com_fabrik_3 th {
background: green;
opacity:0.3;
}

But I'm not having success with the following one:

#listform_3_com_fabrik_3.a_colaborar_0 {
bg-color: red;
}

I've already change the element to use as row class. The element is an yes/no type so if I understood correctly I must use '#listform_3_com_fabrik_3.a_colaborar_0'
instead '#listform_3_com_fabrik_3.fb_candidaturas___a_colaborar_0', because value is a number and not text.

What am I missing!?

 

[troester]

Do you have a link to your list?

 

[gnavarro]

Yes:
http://www.fisiolar.pt/index.php/pt/profissionais-saude/candidaturas?clearfilters=1

 

[troester]

Seems the access infos in my-sites are not longer valid, I can't log in.

 

[gnavarro]

Troester,

Please try again... It was disabled... sorry and thanks for your help!

 

[troester]

The CSS class is
a_colaborar1 (if it's yes) and it should be a_colaborar0 (if it's no), but it is looking as if this element is not set in most of your records, did you add it to a list/table with existing data?. You should set it manually with e.g. phpMyAdmin to 0 (if 0 is your default).

For checking of CSS classes etc use a browser dev tool (right-click on your element and "examine element").

If a row with colaborar=1 should be green add
#listform_3_com_fabrik_3 tr.a_colaborar1 td{
background-color: green;
}
(the background must be applied to td (the table cell), otherwise it will be overridden by the "table-striped" CSS)

I can't see a class a_colaborar0 at the moment (a strange class "i-data-isicon--true--class--icon-remove------i" is created), you have to set your elements.

 

[gnavarro]

Troester,

It's working ok with

#listform_3_com_fabrik_3 tr.a_colaborar1 td{
background-color: green;

Thanks...

...But now I need to know how to build the class wen the element value is text insted integer like for example 'my value', I'm doing like:

#listform_3_com_fabrik_3 tr.elementname_my_value td{
background-color: green;

...But without results!

Could you please advise? Many thanks.

 

[troester]

As I've said: use a browser dev tool to check which exact classname is generated.
Just rightclick on your row, search for the tr tag, see what is in the class, e.g. class="fabrik_row oddRow1 my_value"
Fabrik has to adapt the element values because of CSS restrictions (element name is added if it's starting with a number, spaces are replaced - I think).

 

[gnavarro]

Made it Thanks.

Is it possible to use variables in the class... For example:

'fabrik_row.oddRow0.Ausente-at---09-02-2016' the '09-02-2016' is a variable date can we do something like 'fabrik_row.oddRow0.Ausente-at---**-**-****' or say that contains 'Ausente'?

 

[troester]

http://stackoverflow.com/questions/5110249/wildcard-in-css-for-classes

Better don't include .oddRow0 (the next record has .oddRow1).