• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

different colours in a list, depending on elements value

susannanam

Member
hi all,

i have a list with one element called se3xj_shifts___shift1a, it is a dropdown field with the values 1,2 or 3. this element is defined as "Use as row class". for the list, i have also created a separate template with a custom_css.php. in there is the following code (the row shall have a specific colour, depending on the value selected in the dropdown field):

tr.1 {
background-color: green;
}

but i must be missing something as the line does not turn green if the value of that field is 1. at the same time, i would also like to define the size of the various columns in that list and change the font size. any hint is much appreciated, thanks.
 
This selector is not very specific, it may be overridden by some other template rule.
Also I'm not sure if CSS classes starting with a number may create issues.
Do you have a link?
 
I went to look at our code to see if I could come up with a workaround, and it looks like we already did:

Code:
                        // $$$ rob 24/02/2011 can't have numeric class names so prefix with element name
                        if (is_numeric($c))
                        {
                            $c = $this->getElement()->name . $c;
                        }

... although that's not a complete fix, as it only fixes class names which are entirely numeric, rather than starting with a number. But that should fix your case. So instead of specifying tr.1, specify tr.shift1a1, i.e. the number prepended with the element name.

-- hugh
 
thanks Hugh for your answer. in the case i mentioned, you explained that it has to be tr. and the state of the element, there it was tr.active and tr.inactive. so i took the state of my element which is 1, 2 or 3 as it is an int-field. so i am now very confused. if i take tr.shift1a1, where do i define the state/content (=1) that it has to change its colour please? each state shall then have a different colour :)
susanne
 
"Use as row class" takes the VALUE of the element on each row and adds that value as a CSS class. So if the value on a row is "foo", then we'll add "foo" as a CSS class on the tr for that row.

The problem here is that your element values are numeric. And CSS doesn't allow class names which start with a number. So in those cases, if the value starts with a number, we prepend the element name to the value, so the class name is valid.

-- hugh
 
In other words, you don't have to change your numeric values for the element. You can leave those as 1, 2 and 3. You just have to define your CSS classes using the prefixed name.

-- hugh
 
thanks Hugh, i now understood ;)

i now changed it to

tr.shift1a1 {
background-color: green;
}

but it still does not work, what else am i missing here?
 
thanks Hugh! Hugh pointed me out, that i forgot to add the custom template in the menu of the list. now it is all working :)
 
Just to wrap this one up, turns out that now we're using the Bootstrap table-striped class to achieve striping, rather than our own oddRow0/1 classes, and as BS applies the bg coloring to the td's instead of the tr's, we have to apply the styling to the TD ...

Code:
tr.shift1a1 td { ... }

-- hugh
 
Have you checked to see if the value is still being applied as a class to the td's

Sent from my HTC One using Tapatalk
 
Have you checked to see if the value is still being applied as a class to the td's

Sent from my HTC One using Tapatalk
it is a weird thing Hugh, if i call the list, it is all fine... only if i change page, it all turns yellow and does not turn back to its original colours. if i call the list again, all fine... until i change page...
 
...if i once changed page (next or prev), i can then reload the page but it remains all yellow... only if i click on the menue again to initially load the list, then it is all fine again with the correct classes. somehow, the changing page all of a sudden changes the class, all into the same one :(
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top