Change Text Color

Ask for Help
1

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.

thanks

2

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.

5 Likes
3

Or you could use a Hint component?

2 Likes
4

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:

4 Likes
5

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.

4 Likes
6

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?

thanks

7

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

So using my example, it might look like:

Screen Shot 2021-10-19 at 7.00.17 PM
Screen Shot 2021-10-19 at 7.00.17 PM538×518 24 KB

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.

5 Likes
8

Thanks, it works!!!

1 Like
9

It works too.

Thanks

1 Like
10

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.
4 Likes
11

Hi,

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

12

you can find it there

13

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

14

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

15

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)

2021-12-01_080920
2021-12-01_0809201920×1080 207 KB

16

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

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

<pre><span><style>
.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
17

From phone. Let me try desktop.

18

Working from desktop. Let me check again.

1 Like
19

Working again from Android.

1 Like
20

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.

2 Likes