# CSS to change TAG color

**URL:** <https://community.glideapps.com/t/css-to-change-tag-color/31590>\
**Category:** Ask for Help\
**Created:** [September 10, 2021, 3:00am UTC](https://community.glideapps.com/t/css-to-change-tag-color/31590 "2021-09-10T03:00:17Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mns\_Glide](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mns_glide/32/2514_2.png) [@Mns\_Glide](https://community.glideapps.com/u/Mns_Glide)\
**Post date:** [September 10, 2021, 3:00am UTC](https://community.glideapps.com/t/css-to-change-tag-color/31590/1 "2021-09-10T03:00:17Z")

</div>

Hi,  
I am looking for CSS to change TAG color for images. Different images on the same screen I would like the ability to change TAG color.  
Much appreciated.  
Thank you.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 10, 2021, 3:06am UTC](https://community.glideapps.com/t/css-to-change-tag-color/31590/2 "2021-09-10T03:06:33Z")

</div>

Do you have multiple image components on the same screen? Do you have a rule on how they would be colored?

---

<div class="post-metadata">

**Author:** ![Mns\_Glide](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mns_glide/32/2514_2.png) [@Mns\_Glide](https://community.glideapps.com/u/Mns_Glide)\
**Post date:** [September 10, 2021, 3:09am UTC](https://community.glideapps.com/t/css-to-change-tag-color/31590/3 "2021-09-10T03:09:55Z")

</div>

Yes @ThinhDinh . Multiple images and ability to control individual colors on those TAGs

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 10, 2021, 3:52am UTC](https://community.glideapps.com/t/css-to-change-tag-color/31590/4 "2021-09-10T03:52:55Z")

</div>

Do your screen contain visibility conditions for images? It would be very hard in that case since we have to target specific components and have to know their position.

---

<div class="post-metadata">

**Author:** ![Mns\_Glide](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mns_glide/32/2514_2.png) [@Mns\_Glide](https://community.glideapps.com/u/Mns_Glide)\
**Post date:** [September 10, 2021, 7:15am UTC](https://community.glideapps.com/t/css-to-change-tag-color/31590/5 "2021-09-10T07:15:53Z")

</div>

No screen visibility conditions for this page. I understand what you mean 🤣

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [September 10, 2021, 3:34pm UTC](https://community.glideapps.com/t/css-to-change-tag-color/31590/6 "2021-09-10T15:34:39Z")

</div>

Have you tried using this?

```auto
[data-test="app-tag-overlay"] {
    background-color: #COLOR;
    color: #COLOR;
}

```

This would change all the tags on the screen. But if you want a different color for different things… then this wouldnt work.

---

<div class="post-metadata">

**Author:** ![Mns\_Glide](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mns_glide/32/2514_2.png) [@Mns\_Glide](https://community.glideapps.com/u/Mns_Glide)\
**Post date:** [September 10, 2021, 11:53pm UTC](https://community.glideapps.com/t/css-to-change-tag-color/31590/7 "2021-09-10T23:53:33Z")

</div>

thanks @Joe_Gabriele . Would like to change for different pictures.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 11, 2021, 12:35am UTC](https://community.glideapps.com/t/css-to-change-tag-color/31590/8 "2021-09-11T00:35:51Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/d/9d8f7bb2b5e3b73ac9dc647d195f3efb6e1e7f31.jpeg)

Something like this.

```auto
<pre><span><style>

div[id*='screenScrollView'] > div > :nth-of-type(1) [data-test="app-tag-overlay"] {
    background-color: black;
    color: white;
}

div[id*='screenScrollView'] > div > :nth-of-type(2) [data-test="app-tag-overlay"] {
    background-color: #FFD700;
    color: black;
}

div[id*='screenScrollView'] > div > :nth-of-type(3) [data-test="app-tag-overlay"] {
    background-color: green;
    color: white;
}

```

Please change the number in the nth-of-type part accordingly.

---

<div class="post-metadata">

**Author:** ![Mns\_Glide](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mns_glide/32/2514_2.png) [@Mns\_Glide](https://community.glideapps.com/u/Mns_Glide)\
**Post date:** [September 11, 2021, 1:35am UTC](https://community.glideapps.com/t/css-to-change-tag-color/31590/9 "2021-09-11T01:35:46Z")

</div>

Thanks @ThinhDinh . This is the one.

---

<div class="post-metadata">

**Author:** ![Purvang\_Joshi](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/purvang_joshi/32/12645_2.png) [@Purvang\_Joshi](https://community.glideapps.com/u/Purvang_Joshi)\
**Post date:** [September 11, 2021, 10:45am UTC](https://community.glideapps.com/t/css-to-change-tag-color/31590/10 "2021-09-11T10:45:32Z")

</div>

Is there any way to change colors conditionally?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 11, 2021, 10:49am UTC](https://community.glideapps.com/t/css-to-change-tag-color/31590/11 "2021-09-11T10:49:08Z")

</div>

I would define the conditions in if then else columns then point the rich text to the ITE columns.

Something like this:

> [@Beautiful Design App](https://community.glideapps.com/t/beautiful-design-app/16191/796):
>
> Then you can have an If Then Else column on that screen and change the color accordingly. Let’s say: If status is waiting then \<pre\>\<span\>\<style\> [data-test="list-item"] \>div \>div \>svg { fill: yellow; } Do the same for the other two. Then point the rich text component to that column.

---

<div class="post-metadata">

**Author:** ![Jesus\_Valenzuela\_Dia](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jesus_valenzuela_dia/32/22582_2.png) [@Jesus\_Valenzuela\_Dia](https://community.glideapps.com/u/Jesus_Valenzuela_Dia)\
**Post date:** [December 6, 2021, 5:46pm UTC](https://community.glideapps.com/t/css-to-change-tag-color/31590/12 "2021-12-06T17:46:11Z")

</div>

How can this set up when having more tan one in line list? is it possible to apply that config to all of them?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/f/2f28cfc8989b707eab6640e77d25703e1457b592.jpeg)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [December 7, 2021, 12:07am UTC](https://community.glideapps.com/t/css-to-change-tag-color/31590/13 "2021-12-07T00:07:53Z")

</div>

You just duplicate that "div[id\*]…] part and change the nth-of-type number accordingly (based on the order of the components on the screen). That’s assuming you want different configurations for each inline list.

---

<div class="post-metadata">

**Author:** ![NoCodeAndy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nocodeandy/32/62530_2.png) [@NoCodeAndy](https://community.glideapps.com/u/NoCodeAndy)\
**Post date:** [January 17, 2024, 4:49pm UTC](https://community.glideapps.com/t/css-to-change-tag-color/31590/14 "2024-01-17T16:49:40Z")

</div>