In a number column, from a collection table that is showing %, I want to have the numbers >0 in ‘green’ and <0 in ‘red’, else ‘black’. Is there a way of doing it? Thank you.
Same question for a ‘Big Numbers’ component. I would like to have the color of the number in the Value item in different colors (red, green) if > or < than 0.
As noted in a direct message earlier, I don’t think this dynamic stuff is possible with CSS in Pages.
You might get away with using a custom collection and use HTML + inline styling, but if you can show a visual presentation of how you want it to be, we might be able to give better recommendations.
- Big Numbers component: I would like the number in the value field to be red when negative, green when positive (else black).
- I would like the META value in a collection (card style) to be red when negative, green when positive (else black).
No solution? 
I’m not sure because I don’t have experience changing the color of text which is not a native feature, but I think you could do it with CSS which is available in the Business and Enterprise plans.
Even then, according to Thinh “I don’t think this dynamic stuff is possible with CSS in Pages.” (see above).
You could get on the 14-day free business trial and test with CSS to see if it works?
We are already on the Business plan. The issue is that we need to apply the color based on specific criteria (>0 or <0). The CSS feature in the Business plan only allows to change the color ‘statically’ for the whole element . That is not what we are trying to achieve here as explained before.
Yeah, that was what I meant.
That’s a pity such a simple feature is not available on Glide. I mean don’t get me wrong, it is an excellent product, no question about it. You just want to do more and get frustrated when you can’t…
I agree with you, basic conditional formatting in specific cases would be nice.
Idea 1
Is the order of the elements in the collection important?If grouping the greens and grouping the reds would be an option, how about the following idea:
- You have a number column we’ll call NumCol
- Create two if-then-else columns NumColPos and NumColNeg that will house the positive and negative values of NumCol respectively.
- Create two collections with filters (NumColPos not empty, NumColNeg not empty)
- Set the static CSS.
I don’t know how the CSS would be set up and this idea probably won’t solve your problem, but I thought I’d point it out just in case.
Idea 2
How about using a template column and colored emojis next to a number when displaying that number.
For example:
45
25
The emoji could be placed before or after the text, and you could use other emojis, such a triangles or arrows.
Again, probably not what you’re looking for, but maybe the ideas will help.
1 Like
If it were me, I would use a custom collection with some rich text and HTML to get custom text colors, but it won’t be exactly the same as the card style collection.
As for the Big Number components, that would be pretty easy to rebuild with some HTML and rich text, then you could work your coloring into the HTML.
2 Likes