# Change Text Color

**URL:** <https://community.glideapps.com/t/change-text-color/33278>\
**Category:** Ask for Help\
**Created:** [October 19, 2021, 9:35am UTC](https://community.glideapps.com/t/change-text-color/33278 "2021-10-19T09:35:32Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Juanma\_Lobato](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/juanma_lobato/32/20374_2.png) [@Juanma\_Lobato](https://community.glideapps.com/u/Juanma_Lobato)\
**Post date:** [October 19, 2021, 9:35am UTC](https://community.glideapps.com/t/change-text-color/33278/1 "2021-10-19T09:35:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [October 19, 2021, 9:44am UTC](https://community.glideapps.com/t/change-text-color/33278/2 "2021-10-19T09:44:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![garrison](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/garrison/32/22059_2.png) [@garrison](https://community.glideapps.com/u/garrison)\
**Post date:** [October 19, 2021, 9:57am UTC](https://community.glideapps.com/t/change-text-color/33278/3 "2021-10-19T09:57:15Z")

</div>

Or you could use a Hint component?

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [October 19, 2021, 10:14am UTC](https://community.glideapps.com/t/change-text-color/33278/4 "2021-10-19T10:14:58Z")

</div>

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 😉

---

<div class="post-metadata">

**Author:** ![garrison](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/garrison/32/22059_2.png) [@garrison](https://community.glideapps.com/u/garrison)\
**Post date:** [October 19, 2021, 10:22am UTC](https://community.glideapps.com/t/change-text-color/33278/5 "2021-10-19T10:22:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Juanma\_Lobato](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/juanma_lobato/32/20374_2.png) [@Juanma\_Lobato](https://community.glideapps.com/u/Juanma_Lobato)\
**Post date:** [October 19, 2021, 10:57am UTC](https://community.glideapps.com/t/change-text-color/33278/6 "2021-10-19T10:57:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [October 19, 2021, 11:01am UTC](https://community.glideapps.com/t/change-text-color/33278/7 "2021-10-19T11:01:52Z")

</div>

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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/1/116c1fa8316364c7a675ccb42a0315a62a34eade.png)

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.

---

<div class="post-metadata">

**Author:** ![Juanma\_Lobato](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/juanma_lobato/32/20374_2.png) [@Juanma\_Lobato](https://community.glideapps.com/u/Juanma_Lobato)\
**Post date:** [October 19, 2021, 11:18am UTC](https://community.glideapps.com/t/change-text-color/33278/8 "2021-10-19T11:18:34Z")

</div>

> [@Darren\_Murphy](#):
>

Thanks, it works!!!

---

<div class="post-metadata">

**Author:** ![Juanma\_Lobato](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/juanma_lobato/32/20374_2.png) [@Juanma\_Lobato](https://community.glideapps.com/u/Juanma_Lobato)\
**Post date:** [October 19, 2021, 11:19am UTC](https://community.glideapps.com/t/change-text-color/33278/9 "2021-10-19T11:19:05Z")

</div>

It works too.

Thanks

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [October 19, 2021, 2:03pm UTC](https://community.glideapps.com/t/change-text-color/33278/10 "2021-10-19T14:03:44Z")

</div>

Hi @Juanma_Lobato 👋🏻

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.

---

<div class="post-metadata">

**Author:** ![Wim\_De\_Coninck](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wim_de_coninck/32/28179_2.png) [@Wim\_De\_Coninck](https://community.glideapps.com/u/Wim_De_Coninck)\
**Post date:** [December 1, 2021, 6:45am UTC](https://community.glideapps.com/t/change-text-color/33278/11 "2021-12-01T06:45:48Z")

</div>

Hi,

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

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 1, 2021, 6:49am UTC](https://community.glideapps.com/t/change-text-color/33278/12 "2021-12-01T06:49:08Z")

</div>

> **[Code BOOK](https://code-book.glideapp.io/)**
>
> share cool codes, scripts and links

you can find it there

---

<div class="post-metadata">

**Author:** ![jabid](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jabid/32/33391_2.png) [@jabid](https://community.glideapps.com/u/jabid)\
**Post date:** [December 1, 2021, 7:04am UTC](https://community.glideapps.com/t/change-text-color/33278/13 "2021-12-01T07:04:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 1, 2021, 7:05am UTC](https://community.glideapps.com/t/change-text-color/33278/14 "2021-12-01T07:05:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Wim\_De\_Coninck](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wim_de_coninck/32/28179_2.png) [@Wim\_De\_Coninck](https://community.glideapps.com/u/Wim_De_Coninck)\
**Post date:** [December 1, 2021, 7:12am UTC](https://community.glideapps.com/t/change-text-color/33278/15 "2021-12-01T07:12:29Z")

</div>

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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/7/87750ad345569cba6ff6dd135241f083160d8c2b.jpeg)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 1, 2021, 7:14am UTC](https://community.glideapps.com/t/change-text-color/33278/16 "2021-12-01T07:14:19Z")

</div>

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

```auto
<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

---

<div class="post-metadata">

**Author:** ![jabid](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jabid/32/33391_2.png) [@jabid](https://community.glideapps.com/u/jabid)\
**Post date:** [December 1, 2021, 8:31am UTC](https://community.glideapps.com/t/change-text-color/33278/17 "2021-12-01T08:31:36Z")

</div>

From phone. Let me try desktop.

---

<div class="post-metadata">

**Author:** ![jabid](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jabid/32/33391_2.png) [@jabid](https://community.glideapps.com/u/jabid)\
**Post date:** [December 1, 2021, 8:34am UTC](https://community.glideapps.com/t/change-text-color/33278/18 "2021-12-01T08:34:10Z")

</div>

Working from desktop. Let me check again.

---

<div class="post-metadata">

**Author:** ![jabid](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jabid/32/33391_2.png) [@jabid](https://community.glideapps.com/u/jabid)\
**Post date:** [December 1, 2021, 8:38am UTC](https://community.glideapps.com/t/change-text-color/33278/19 "2021-12-01T08:38:31Z")

</div>

Working again from Android.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [December 1, 2021, 8:54am UTC](https://community.glideapps.com/t/change-text-color/33278/20 "2021-12-01T08:54:29Z")

</div>

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.

[Next page](https://community.glideapps.com/t/change-text-color/33278.md?page=2)