# Tricks to change color for overdue items?

**URL:** <https://community.glideapps.com/t/tricks-to-change-color-for-overdue-items/16418>\
**Category:** Ask for Help\
**Created:** [September 27, 2020, 3:38pm UTC](https://community.glideapps.com/t/tricks-to-change-color-for-overdue-items/16418 "2020-09-27T15:38:30Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Deena](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/deena/32/9877_2.png) [@Deena](https://community.glideapps.com/u/Deena)\
**Post date:** [September 27, 2020, 3:38pm UTC](https://community.glideapps.com/t/tricks-to-change-color-for-overdue-items/16418/1 "2020-09-27T15:38:30Z")

</div>

I have a checklist of items with due dates, sorted in ascending order by date. Once the date passes, is there a trick to change the color to red (or other).

---

<div class="post-metadata">

**Author:** ![kyleheney](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kyleheney/32/41173_2.png) [@kyleheney](https://community.glideapps.com/u/kyleheney)\
**Post date:** [September 27, 2020, 3:52pm UTC](https://community.glideapps.com/t/tricks-to-change-color-for-overdue-items/16418/2 "2020-09-27T15:52:29Z")

</div>

Without some html it’s tough. I normally add an emoji (green checkmark or red X for some items I have). That or add an image to the if/then to use it in a list.

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [September 28, 2020, 6:09am UTC](https://community.glideapps.com/t/tricks-to-change-color-for-overdue-items/16418/3 "2020-09-28T06:09:49Z")

</div>

@Deena what exactly do you wanna change the color of?

---

<div class="post-metadata">

**Author:** ![Brad\_Legassick](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/brad_legassick/32/8289_2.png) [@Brad\_Legassick](https://community.glideapps.com/u/Brad_Legassick)\
**Post date:** [September 28, 2020, 7:00am UTC](https://community.glideapps.com/t/tricks-to-change-color-for-overdue-items/16418/4 "2020-09-28T07:00:32Z")

</div>

Hi @Deena I took @Manan_Mehta’s nocode course & one of the many tips was to use an If then Else column & markup to change the colour of the text depending on the condition. Our example was over spending a budget & if the total spend was 75% the text was a certain colour, under 75% it was another colour & over budget was red! All done with conditions & a statement like this  
font color=“green”\>\< h3 \>Expenses under control man!"  
Hope this helps.

 ![Screenshot 2020-09-28 at 17.03.13](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/b/b745133684851b453bb9d28dde2c40880dda5811.png)

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [September 28, 2020, 7:05am UTC](https://community.glideapps.com/t/tricks-to-change-color-for-overdue-items/16418/5 "2020-09-28T07:05:33Z")

</div>

Adding what @Brad_Legassick said  
You can set the list as inline or card style, where in image or avatar pic you can add an if then else column with links of green and red pics  
Becoming more visual

---

<div class="post-metadata">

**Author:** ![Deena](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/deena/32/9877_2.png) [@Deena](https://community.glideapps.com/u/Deena)\
**Post date:** [September 28, 2020, 12:25pm UTC](https://community.glideapps.com/t/tricks-to-change-color-for-overdue-items/16418/6 "2020-09-28T12:25:17Z")

</div>

Thanks @Brad_Legassick, @Manan_Mehta, @Lucas_Pires. I will try the IFT and play around with the layout as well per Lucas’ suggestion!

---

<div class="post-metadata">

**Author:** ![Manan\_Mehta](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manan_mehta/32/13957_2.png) [@Manan\_Mehta](https://community.glideapps.com/u/Manan_Mehta)\
**Post date:** [September 28, 2020, 1:50pm UTC](https://community.glideapps.com/t/tricks-to-change-color-for-overdue-items/16418/7 "2020-09-28T13:50:02Z")

</div>

“Oh Shit! Spent too much”  
Love how natural that sounds Brad 😂

---

<div class="post-metadata">

**Author:** ![vijay](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/vijay/32/3259_2.png) [@vijay](https://community.glideapps.com/u/vijay)\
**Post date:** [May 12, 2021, 3:16am UTC](https://community.glideapps.com/t/tricks-to-change-color-for-overdue-items/16418/8 "2021-05-12T03:16:01Z")

</div>

Hi,  
Can we change the whole card background color to a specific color say, blue based on a condition?  
I am using an inline list item, and I want to separate cards based on some condition. Right now, all cards appear white one below the other. Suppose I want to just change the background of some cards to another color, based on a condition, is that possible? What html code will work?  
Thanks

---

<div class="post-metadata">

**Author:** ![vijay](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/vijay/32/3259_2.png) [@vijay](https://community.glideapps.com/u/vijay)\
**Post date:** [May 12, 2021, 3:27am UTC](https://community.glideapps.com/t/tricks-to-change-color-for-overdue-items/16418/9 "2021-05-12T03:27:03Z")

</div>

I tried this, but it is not working.  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/8/88f4a7e67879d75a0a9d6ab52ec95b1f044509f5.png)  
What am I missing?

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [May 12, 2021, 5:28am UTC](https://community.glideapps.com/t/tricks-to-change-color-for-overdue-items/16418/10 "2021-05-12T05:28:14Z")

</div>

You’re trying to use css on a inline list, but it works only in 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:** [May 12, 2021, 5:31am UTC](https://community.glideapps.com/t/tricks-to-change-color-for-overdue-items/16418/11 "2021-05-12T05:31:48Z")

</div>

try to experiment in Code BOOK, you will get experience how to use CSS… you can go to tab test css and change parameters of the code you selected and see in action results.

**[Code BOOK](https://code-book.glideapp.io/)**

---

<div class="post-metadata">

**Author:** ![vijay](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/vijay/32/3259_2.png) [@vijay](https://community.glideapps.com/u/vijay)\
**Post date:** [May 12, 2021, 8:32am UTC](https://community.glideapps.com/t/tricks-to-change-color-for-overdue-items/16418/12 "2021-05-12T08:32:28Z")

</div>

Ok Noted. I wish the details, or Header or Title in an inline list had a Rich Text component, so that we could change the appearance of each item individually. Right now, I think there is no way of changing each item’s appearance individually, unless I know the sequence of the items, and then I can apply nth child concept of CSS.

---

<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:52pm UTC](https://community.glideapps.com/t/tricks-to-change-color-for-overdue-items/16418/13 "2024-01-17T16:52:16Z")

</div>


