# Inline List Color by condition

**URL:** <https://community.glideapps.com/t/inline-list-color-by-condition/29870>\
**Category:** Ask for Help\
**Created:** [August 2, 2021, 3:30am UTC](https://community.glideapps.com/t/inline-list-color-by-condition/29870 "2021-08-02T03:30:27Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![biha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/biha/32/84110_2.png) [@biha](https://community.glideapps.com/u/biha)\
**Post date:** [August 2, 2021, 3:30am UTC](https://community.glideapps.com/t/inline-list-color-by-condition/29870/1 "2021-08-02T03:30:27Z")

</div>

Hi,  
It is possible the color of Title in Inline list turn red when the Title was “Click Here to Add”

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/a/ca2903ed1700a71a414f90ed4ee7f2f67f40e0d4.png)

---

<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:** [August 2, 2021, 3:33am UTC](https://community.glideapps.com/t/inline-list-color-by-condition/29870/2 "2021-08-02T03:33:45Z")

</div>

yes is possible:

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

put that CSS in a template and add IF ELSE column to control color

---

<div class="post-metadata">

**Author:** ![biha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/biha/32/84110_2.png) [@biha](https://community.glideapps.com/u/biha)\
**Post date:** [August 2, 2021, 3:39am UTC](https://community.glideapps.com/t/inline-list-color-by-condition/29870/3 "2021-08-02T03:39:58Z")

</div>

hmm but what the format for if else ?

---

<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:** [August 2, 2021, 3:42am UTC](https://community.glideapps.com/t/inline-list-color-by-condition/29870/4 "2021-08-02T03:42:20Z")

</div>

IF “click here to add” RED… Else… BLACK

---

<div class="post-metadata">

**Author:** ![biha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/biha/32/84110_2.png) [@biha](https://community.glideapps.com/u/biha)\
**Post date:** [August 2, 2021, 3:43am UTC](https://community.glideapps.com/t/inline-list-color-by-condition/29870/5 "2021-08-02T03:43:34Z")

</div>

I need it when it show “\>Click Here to Add Item Details” it turns Red.  
When it show the “Type” is show grey.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/e/9e4d447c2aa890ac0c2a9c87616506064aa027f7.png)

---

<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:** [August 2, 2021, 3:44am UTC](https://community.glideapps.com/t/inline-list-color-by-condition/29870/6 "2021-08-02T03:44:29Z")

</div>

that’s exactly what I wrote  
if click here is “\>Click here to Add item” then red… ELSE. grey

---

<div class="post-metadata">

**Author:** ![biha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/biha/32/84110_2.png) [@biha](https://community.glideapps.com/u/biha)\
**Post date:** [August 2, 2021, 3:45am UTC](https://community.glideapps.com/t/inline-list-color-by-condition/29870/7 "2021-08-02T03:45:41Z")

</div>

I mean how to apply in this code

```
[data-test="list-item"] .textStyle{ color: red; } [data-test="list-item"] .textDetailStyle{ color: blue; } [data-test="app-vertical-list"] \>div \>div { color: purple; } [class="navigationIcon"] \>\*{ color: green; } [data-test="list-item"].separator::after { background-color: yellow; height: 2px; }
```

---

<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:** [August 2, 2021, 3:49am UTC](https://community.glideapps.com/t/inline-list-color-by-condition/29870/8 "2021-08-02T03:49:15Z")

</div>

delete codes for other components… leave only the first one…  
in a template replace word **red** with **COLOR** and below under REPLACEMENTS type **COLOR** and on the right choose that IF ELSE column where you have colors

---

<div class="post-metadata">

**Author:** ![biha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/biha/32/84110_2.png) [@biha](https://community.glideapps.com/u/biha)\
**Post date:** [August 2, 2021, 3:55am UTC](https://community.glideapps.com/t/inline-list-color-by-condition/29870/9 "2021-08-02T03:55:12Z")

</div>

> [@Uzo](#):
>
> substitute it from that IF ELSE column

How to substitute ?

---

<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:** [August 2, 2021, 3:56am UTC](https://community.glideapps.com/t/inline-list-color-by-condition/29870/10 "2021-08-02T03:56:41Z")

</div>

in the template under replacements type COLOR and choose if else column

---

<div class="post-metadata">

**Author:** ![biha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/biha/32/84110_2.png) [@biha](https://community.glideapps.com/u/biha)\
**Post date:** [August 2, 2021, 4:35am UTC](https://community.glideapps.com/t/inline-list-color-by-condition/29870/11 "2021-08-02T04:35:50Z")

</div>

Now i understand why i cant find replacement.  
Because i’m adding code with adding rich text component.  
It is possible to do this way ?

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/1/21eb1cfe8bf45f096efb7d8d2d520156b24e95e6.png)

---

<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:** [August 2, 2021, 4:37am UTC](https://community.glideapps.com/t/inline-list-color-by-condition/29870/12 "2021-08-02T04:37:52Z")

</div>

code you need to put in to a template column… then use that template in rich text component

---

<div class="post-metadata">

**Author:** ![biha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/biha/32/84110_2.png) [@biha](https://community.glideapps.com/u/biha)\
**Post date:** [August 2, 2021, 7:18am UTC](https://community.glideapps.com/t/inline-list-color-by-condition/29870/13 "2021-08-02T07:18:58Z")

</div>

But my value was relation (multiple).  
I cannot when come to add component in rich text

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/0/f04db2df80b37b0fab87457ad140d53b9605cf93.png)

---

<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:** [August 2, 2021, 12:29pm UTC](https://community.glideapps.com/t/inline-list-color-by-condition/29870/14 "2021-08-02T12:29:35Z")

</div>

In rich text use the template column that you have css code