# Hint Component - color - css

**URL:** <https://community.glideapps.com/t/hint-component-color-css/71222>\
**Category:** Ask for Help\
**Created:** [February 27, 2024, 8:02pm UTC](https://community.glideapps.com/t/hint-component-color-css/71222 "2024-02-27T20:02:57Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![abdo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abdo/32/36540_2.png) [@abdo](https://community.glideapps.com/u/abdo)\
**Post date:** [February 27, 2024, 8:02pm UTC](https://community.glideapps.com/t/hint-component-color-css/71222/1 "2024-02-27T20:02:58Z")

</div>

Any idea if we can change the background color of a hint component depending on the text in its description?

something along the line of this

.colored-hint:has(\> p:contains(“Disposed”)) div[class\*=“default”] {  
background-color: red;  
}

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [February 27, 2024, 8:20pm UTC](https://community.glideapps.com/t/hint-component-color-css/71222/2 "2024-02-27T20:20:13Z")

</div>

Good idea, but `contains` is not a standard CSS pseudo-class so I don’t think it will work in Glide.

---

<div class="post-metadata">

**Author:** ![abdo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abdo/32/36540_2.png) [@abdo](https://community.glideapps.com/u/abdo)\
**Post date:** [February 27, 2024, 8:45pm UTC](https://community.glideapps.com/t/hint-component-color-css/71222/3 "2024-02-27T20:45:03Z")

</div>

Yes it doesn’t work … but along this line maybe there is a way to do it.

I use hint components to represent status inside custom collections. Would be nice if I could color them instead of putting 3 and using visiblity conditions.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [February 27, 2024, 8:57pm UTC](https://community.glideapps.com/t/hint-component-color-css/71222/4 "2024-02-27T20:57:40Z")

</div>

I build my own. This can be done with a template column and a rich text component and the color can be modified with an IF column.

For example:  
 ![Screenshot_20240227-145549](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/e/aea8eaf50ecb368120b201974f54f27b085534ce.png)

```auto
<div style="background-color:rgba(41, 87, 122, 0.2);padding:10px;border-radius: 10px;padding-top:10px;font-weight: bold;text-align: center;text-decoration: underline;">
Notes
</div>

```

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [February 27, 2024, 10:05pm UTC](https://community.glideapps.com/t/hint-component-color-css/71222/5 "2024-02-27T22:05:46Z")

</div>

> [@abdo](#):
>
> Would be nice if I could color them instead of putting 3 and using visiblity conditions.

Agreed. If you’re going to use CSS anyway, then yes, maybe HTML in a rich text is better option as @Jeff_Hager mentions above.

---

<div class="post-metadata">

**Author:** ![abdo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abdo/32/36540_2.png) [@abdo](https://community.glideapps.com/u/abdo)\
**Post date:** [February 28, 2024, 3:27am UTC](https://community.glideapps.com/t/hint-component-color-css/71222/6 "2024-02-28T03:27:58Z")

</div>

Very nice idea !

but i cannot use it.  
I use the minimum CSS possible in client apps.  
I also have a very strict performance policy not to add new unnecessary computed columns that i can avoid.