Conditional formatting for text stack

1

Hi,

I wonder whether there’s a feature or stack allowing conditional formatting of content.

Example:

I have a text stack containing juste one single number. In case the number has a negative value, the text color should be red, else black.

So far, I wasn’t successful in my research.

Thanks for any hint,

Juergen

2

@willwood Maybe the Builder stack might be a solution, true?

3

Did you post this question on another RW forum, sounds familiar.

Conditional display suggests that the single line is coming from a user input, not a static text stack.

Do you have a url?

4

No, I didn’t :-)
Actually, the input comes from tag put into a text stack.
I guess one could do that with JavaScript but I’m so familiar with it

5

So where do the tags get inserted from, a blog?

6

No, from a GoogleSheet cell in this case, but it could also come from CMS input

7

For this specific purpose I could use GSheet from Weavium; there is an option for conditional formatting. However, the layouts are somewhat odd and not fully responsive so far I saw

8

How are you getting the values into your site from Google sheet at the moment?

9

via LiveData from 1LD

10

Could you use an IF formula in your spreadsheet and add some inline CSS styling if the condition is met?

i.e. if you value is in cell C4, put this in C5 and display that on your site
IF(C4<0,CONCAT("<span style="color:#D00000">"&C4&"</span>),C4)

Would thoroughly check that code because it’s early in the morning ;) but hopefully you get the idea.

11

Thanks, but this won’t work as the styling has to be done in RW… LiveData e.g. doesn’t take any styling from the google sheet; I tried that already ;-(

I don’t know any other stack taking formatting from a GoogleSheet though

12

I decided to stick to Weavium’s Gsheet stack for the time being. It allows conditional formatting and has a lot of other features, though responsiveness is a bit bumpy

13

Actually inline html styling does work with live data, I just tried it on the live data page.

It has both a colour and a size change. Have a look at 1LD’s page, my edit is the one that says LotGen.

14

Hi Paul

Thanks a lot for your time and help… it works now!

Though I have to add extra columns for the condition, it certainly will help to formatting smaller tables

Best, Juergen

1 Like
15

If the values are not going to change dynamically after load then it is as simple as giving a text stack the custom class of cond (or whatever you like) and using the following JS

let items= document.querySelectorAll('.cond');
items.forEach(item => {
	if (parseFloat(item.innerHTML) < 0){
    	item.style.color = "red"
    }
});

If they may change then you would just need to add an event monitor to refresh this logic when they change.

If the values are in tables then you may want to change the selector to target table items.

3 Likes
16

Thanks @tav Andrew for your help, much appreciated. Your JS works perfectly well In combination with @willwood Will’s Builder stack