# Change background color of an inline list item based on a condition

**URL:** <https://community.glideapps.com/t/change-background-color-of-an-inline-list-item-based-on-a-condition/62748>\
**Category:** Ask for Help\
**Created:** [June 14, 2023, 1:35pm UTC](https://community.glideapps.com/t/change-background-color-of-an-inline-list-item-based-on-a-condition/62748 "2023-06-14T13:35:37Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![colind](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/colind/32/45450_2.png) [@colind](https://community.glideapps.com/u/colind)\
**Post date:** [June 14, 2023, 1:35pm UTC](https://community.glideapps.com/t/change-background-color-of-an-inline-list-item-based-on-a-condition/62748/1 "2023-06-14T13:35:37Z")

</div>

Hi,

I would like to change the display color of an inline list item or its background, based on a condition. Is that possible?  
A use case is in a **chat screen** where the a message list is displayed. Messages from the sender are one color, and messages from the receiver are another color.

Any help would be appreciated.

Thanks

---

<div class="post-metadata">

**Author:** ![Pratik\_Shah](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pratik_shah/32/12416_2.png) [@Pratik\_Shah](https://community.glideapps.com/u/Pratik_Shah)\
**Post date:** [June 14, 2023, 2:46pm UTC](https://community.glideapps.com/t/change-background-color-of-an-inline-list-item-based-on-a-condition/62748/2 "2023-06-14T14:46:06Z")

</div>

How about having this?  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/6/86a8bd5493bf00767f9cec1cb40b014e8ad6a8d6.png)

---

<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:** [June 14, 2023, 11:30pm UTC](https://community.glideapps.com/t/change-background-color-of-an-inline-list-item-based-on-a-condition/62748/3 "2023-06-14T23:30:14Z")

</div>

Seeing you’re mentioning inline list, are you on a Classic App?

---

<div class="post-metadata">

**Author:** ![colind](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/colind/32/45450_2.png) [@colind](https://community.glideapps.com/u/colind)\
**Post date:** [June 15, 2023, 3:49am UTC](https://community.glideapps.com/t/change-background-color-of-an-inline-list-item-based-on-a-condition/62748/4 "2023-06-15T03:49:49Z")

</div>

Hi ThinhDinh,

Yes, I’m on a Classic App.

---

<div class="post-metadata">

**Author:** ![colind](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/colind/32/45450_2.png) [@colind](https://community.glideapps.com/u/colind)\
**Post date:** [June 15, 2023, 3:53am UTC](https://community.glideapps.com/t/change-background-color-of-an-inline-list-item-based-on-a-condition/62748/5 "2023-06-15T03:53:28Z")

</div>

Thanks Pratik,

On each line item, I have the person’s profile picture and a message. It would be more user-friendly, though, if the background or the text itself were a different color to easily distinguish between the message I have sent and the ones I have received.

---

<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:** [June 15, 2023, 11:18pm UTC](https://community.glideapps.com/t/change-background-color-of-an-inline-list-item-based-on-a-condition/62748/6 "2023-06-15T23:18:53Z")

</div>

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

I had a prototype that still works. But please beware, this is not officially supported and can break any time.

To use CSS, you would need to add them to rich text components.

**General CSS that is static**

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

[data-test="app-summary"] {
margin-top: -90px;
}

[data-test="glide-app-bar"] :nth-child(1) {
    backdrop-filter: blur(0px);
    background: transparent; 
}

[data-test="nav-bar"] >div +* {
  color: transparent !important; 
}

[data-test="back-button"] :nth-child(2) {
display: none;
}

[data-test="back-button"] {
background: white !important;
border-radius: 50%;
margin: 4px;
width: 44px;
height: 44px;
}

[data-test="nav-button-Edit"] {
background: white !important;
border-radius: 50%;
margin: 4px;
width: 44px;
height: 44px;
}

div[id="app-root"]:first-child svg {
display: none;
}

div[id="tabBar"] svg, [data-test="nav-button-Edit"] svg, [data-test="back-button"] svg, .floating-btn-style svg {
display: block !important;
}

```

**Chat CSS that is dynamic** :

- In your Messages table, make sure you have a column that stores an ID of the “chat” so you can know which messages belongs to which chat. Add a relation from that column to itself, make it a multiple relation.

- Add a rowID column to that table.

- Add a lookup column on top of the relation in the first step, return all rowIDs.

- Add a “find element index” column, pointing to the array of rowIDs above, and return the index of the current row’s rowID. We do this to get the index of the message that is shown on the screen.

- Add an If-Then-Else column. If the sender of the message is the signed-in user (depends on whether you use the user’s email or rowID, configure the correct condition here), return this value:

```auto
div[data-index="{X}"] div[role="cell"]
{
float: right;
max-width: 80%;
}

div[data-index="{X}"] div[role="cell"] .bottom-area
{
background-color: deepskyblue;
}

div[data-index="{X}"] div[role="cell"] .card-subtitle
{
color: black;
white-space: break-spaces;
font-weight: 550;
}

```

Else, return this value.

```auto
div[data-index="{X}"] div[role="cell"]
{
float: left;
max-width: 80%;
}

div[data-index="{X}"] div[role="cell"] .card-subtitle
{
color: black;
white-space: break-spaces;
font-weight: 550;
}

```

- Add a template column, point to the if-then-else column above, replace {X} by the index we calculated two steps above.

- Go back to the Chats table, assuming you already have a relation to the Messages table, create a joined list column and join all template values above, separated by a new line character. Basically it would look like this (I had more settings so mine would look longer).

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

- Add a template column with this template:

```auto

div[class*="vlist"] {
height: auto !important;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}

div[class*="vlist"]::-webkit-scrollbar {
  display: none;
}

div[class*="vlist___StyledDiv2"] >div {
min-height: 500px;
}

div[class*="vlist"] {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

{X}

</style></span></pre>

```

Replace {X} by the joined list value. Finally, use that in a rich text component on your screen.

---

<div class="post-metadata">

**Author:** ![jwindle](https://avatars.discourse-cdn.com/v4/letter/j/2bfe46/32.png) [@jwindle](https://community.glideapps.com/u/jwindle)\
**Post date:** [June 17, 2023, 2:44am UTC](https://community.glideapps.com/t/change-background-color-of-an-inline-list-item-based-on-a-condition/62748/7 "2023-06-17T02:44:19Z")

</div>

@ThinhDinh is that a floating button component I see? Did they add those again or are they only available in the Classic Apps?

---

<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:** [June 17, 2023, 3:06am UTC](https://community.glideapps.com/t/change-background-color-of-an-inline-list-item-based-on-a-condition/62748/8 "2023-06-17T03:06:29Z")

</div>

This post is exclusively for Classic Apps.