Change Text Color

Hi there,

anyone knows how to change the text color of a text component if a condition it’s true?
For example. I have a math field. I want to put the text color in green if it’s a greater than 0 value and red color if its less than 0.


If you use a Rich Text component, then it’s easy enough.

You could have something like: <span style="color: {color};">, and then use an if-then-else column to substitute the appropriate color code.


Or you could use a Hint component?


You could, but the hint component only gives you the 4 “mood” options - you can’t use rich text in a hint component. I guess you could use CSS in a rich text component to over ride the hint component styling, but that would be a very convoluted way of doing things if all you wanted was different color text :wink:


Yes, that’s true of course but Hints are visually more explicit of the ‘problem’, whereas colouring text isn’t always intuitive for the end user.


I tried this.
where color is a column of the table and Margen idle and didn’t works.
some blue text {Margen}
How can I reference a table field inside a html tag in a Rich Text component?


Create a template column, and use this column as the source for the Rich Text component.

So using my example, it might look like:

In your case, instead of hard coding a color code as a replacement, you’ll probably want to use an if-then-else column that outputs the appropriate color code.


Thanks, it works!!!

1 Like

It works too.


1 Like

Hi @Juanma_Lobato :wave:t2:

You could

  • use a hint text component as suggested by @garrison,
  • use another text component such as rich text and change font size and weight,
  • with a template column add an emoji or symbol before or after the text you wish to highlight.


how (CSS) can I change the font size and weight of a rich-text-component?

you can find it there

It does not open after clicking on the green arrow button.

from desktop or phone?
I just checked chrome, safari, and android… it all works

I took a look, but couldn’t find a solution in your CSS-examples.

I could change the color, but not the font-size (see image)

this is not from Code BOOK… here is the real sample:

<div class="text01">Welcome User</div>

.text01 {
font-family: 'Noto Serif JP', serif;
font-size: 1.3rem;
text-align: center;font-weight: bold;
line-height: normal;
color: red;
text-shadow: 1px 1px grey;
position: fixed;
top:max(0px, 5%); 
width: 95%}

take out the last 3 lines if you want to follow flow

1 Like

From phone. Let me try desktop.

Working from desktop. Let me check again.

1 Like

Working again from Android.

1 Like

I don’t understand, why we should use CSS addressed to the text components? Richtext itself is a (text) component that can be filled with text along with markdown, Html, or CSS.