# Alternate colour for inline lists rows

**URL:** https://community.glideapps.com/t/alternate-colour-for-inline-lists-rows/21168
**Category:** Ask for Help
**Created:** [January 14, 2021, 2:40pm UTC](https://community.glideapps.com/t/alternate-colour-for-inline-lists-rows/21168 "2021-01-14T14:40:41Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![RuchikaAbbi](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ruchikaabbi/32/11240_2.png) [@RuchikaAbbi](https://community.glideapps.com/u/RuchikaAbbi)
#### Post date: [January 14, 2021, 2:40pm UTC](https://community.glideapps.com/t/alternate-colour-for-inline-lists-rows/21168/1 "2021-01-14T14:40:41Z")

</div>

Anyone has the CSS for alternate colours for inline list rows?  
Help appreciated!

---

<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: [January 14, 2021, 2:56pm UTC](https://community.glideapps.com/t/alternate-colour-for-inline-lists-rows/21168/2 "2021-01-14T14:56:29Z")

</div>

A little messy, but this works for an inline list:

```auto
<pre><span><style>
[data-test="app-vertical-list"] :nth-child(2) :nth-child(even) {
background-color: #b1e4fb;
}

.textContainer,[data-test="list-item-title"],[data-test="list-item-subtitle"] {
background-color: transparent !important;
}

```

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/7/6748754638156d9dea58e68e7d2b199a34f937e3.jpeg)

---

<div class="post-metadata">

### Author: ![mrt224](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mrt224/32/490_2.png) [@mrt224](https://community.glideapps.com/u/mrt224)
#### Post date: [January 14, 2021, 4:03pm UTC](https://community.glideapps.com/t/alternate-colour-for-inline-lists-rows/21168/3 "2021-01-14T16:03:57Z")

</div>

Where do you put the code?

---

<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: [January 14, 2021, 4:05pm UTC](https://community.glideapps.com/t/alternate-colour-for-inline-lists-rows/21168/4 "2021-01-14T16:05:23Z")

</div>

In a rich text component on a details screen that contains the inline list component.

---

<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: [January 14, 2021, 4:05pm UTC](https://community.glideapps.com/t/alternate-colour-for-inline-lists-rows/21168/5 "2021-01-14T16:05:50Z")

</div>

![Screen Shot 2021-01-14 at 11.05.39 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/e/6e9978a76985be9077c6e3fcd06df81275c973a1.png)

---

<div class="post-metadata">

### Author: ![RuchikaAbbi](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ruchikaabbi/32/11240_2.png) [@RuchikaAbbi](https://community.glideapps.com/u/RuchikaAbbi)
#### Post date: [January 14, 2021, 4:09pm UTC](https://community.glideapps.com/t/alternate-colour-for-inline-lists-rows/21168/6 "2021-01-14T16:09:07Z")

</div>

Thanks @Robert_Petitto ! It works well!

Can you help me with understanding the syntax a bit more…

What do the following stand for?

- [data-test=“app-vertical-list”]
- [data-test=“list-item-title”]  
\*[data-test=“list-item-subtitle”]

---

<div class="post-metadata">

### Author: ![mrt224](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mrt224/32/490_2.png) [@mrt224](https://community.glideapps.com/u/mrt224)
#### Post date: [January 14, 2021, 4:14pm UTC](https://community.glideapps.com/t/alternate-colour-for-inline-lists-rows/21168/7 "2021-01-14T16:14:00Z")

</div>

Thank you.  
I had the correct set-up but it was not working. I was using “show items”. I had it set to 1 and tried to open it. It works without “show items” or have “show items” set to more than 1 - when you open “all” , it does not work.

---

<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: [January 14, 2021, 4:27pm UTC](https://community.glideapps.com/t/alternate-colour-for-inline-lists-rows/21168/8 "2021-01-14T16:27:43Z")

</div>

> [@RuchikaAbbi](#):
>
> [data-test=“app-vertical-list”]

I believe this stands for the whole list that contains all items you want to show.

> [@RuchikaAbbi](#):
>
> [data-test=“list-item-title”][data-test=“list-item-subtitle”]

These are for the titles and subtitles of each item. I think it has to be transparent to be visible in this setting.

---

<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: [January 14, 2021, 4:39pm UTC](https://community.glideapps.com/t/alternate-colour-for-inline-lists-rows/21168/9 "2021-01-14T16:39:54Z")

</div>

This trick won’t work for the ‘Show All’ view because that view is a list style view and you can’t add additional components, like the Rich Text component with the CSS “hack” to override Glide’s default settings. I don’t think there is much you can do until Glide gives us native abilities. These CSS “hacks” are only going to work on the current screen where you apply the Rich Text component.

---

<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: [January 14, 2021, 5:20pm UTC](https://community.glideapps.com/t/alternate-colour-for-inline-lists-rows/21168/10 "2021-01-14T17:20:08Z")

</div>

> [@Jeff\_Hager](#):
>
> These CSS “hacks” are only going to work on the current screen where you apply the Rich Text component.

Correct.

---

<div class="post-metadata">

### Author: ![RuchikaAbbi](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ruchikaabbi/32/11240_2.png) [@RuchikaAbbi](https://community.glideapps.com/u/RuchikaAbbi)
#### Post date: [January 14, 2021, 5:36pm UTC](https://community.glideapps.com/t/alternate-colour-for-inline-lists-rows/21168/11 "2021-01-14T17:36:00Z")

</div>

👍 Thanks @ThinhDinh

---

<div class="post-metadata">

### Author: ![Wim\_De\_Coninck](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wim_de_coninck/32/28179_2.png) [@Wim\_De\_Coninck](https://community.glideapps.com/u/Wim_De_Coninck)
#### Post date: [November 28, 2021, 4:30pm UTC](https://community.glideapps.com/t/alternate-colour-for-inline-lists-rows/21168/12 "2021-11-28T16:30:01Z")

</div>

Hi,

I tried to change the mentioned CSS to have only the first item of the inline list have a different text-color, but it doesn’t work with this code:

```auto
[data-test="app-vertical-list"] :nth-child(1) :nth-child(odd) {
color:#a9a9a9;
}

```

(I want the first titel + first item in gray; all the other items in black)

---

<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: [November 29, 2021, 12:05am UTC](https://community.glideapps.com/t/alternate-colour-for-inline-lists-rows/21168/13 "2021-11-29T00:05:18Z")

</div>

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

I have to assume you’re using white text, else it will be unreadable.

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

[data-test="app-vertical-list"] div[role="row"] {
background: #a9a9a9;
}

[data-test="app-vertical-list"] div[role="row"] ~ div[role="row"] {
background: black;
}

[data-test="list-item"] .textStyle {
color: white !important;
}

```

The trick here is first applying gray to all items, then re-do black for all items after the first one.

---

<div class="post-metadata">

### Author: ![Wim\_De\_Coninck](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wim_de_coninck/32/28179_2.png) [@Wim\_De\_Coninck](https://community.glideapps.com/u/Wim_De_Coninck)
#### Post date: [November 29, 2021, 6:45am UTC](https://community.glideapps.com/t/alternate-colour-for-inline-lists-rows/21168/14 "2021-11-29T06:45:22Z")

</div>

Thanks for the suggestion and I tried to adapt it, as I want :

- white (= default) background for all items; so I don’t think I have to add it in CSS
- black **text** -color for _first title and first detail-text_ and gray **text** -color for all the other titles and details.

I tried to change `background: #a9a9a9;` to `color: #a9a9a9;`, but without success…

---

<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: [November 29, 2021, 7:42am UTC](https://community.glideapps.com/t/alternate-colour-for-inline-lists-rows/21168/15 "2021-11-29T07:42:12Z")

</div>

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

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

[data-test="app-vertical-list"] div[role="row"] .textStyle {
color: black;
}

[data-test="app-vertical-list"] div[role="row"] ~ div[role="row"] .textStyle {
color: #a9a9a9;
}

[data-test="app-vertical-list"] div[role="row"] .textDetailStyle {
color: black;
}

[data-test="app-vertical-list"] div[role="row"] ~ div[role="row"] .textDetailStyle {
color: #a9a9a9;
}

```

---

<div class="post-metadata">

### Author: ![Wim\_De\_Coninck](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wim_de_coninck/32/28179_2.png) [@Wim\_De\_Coninck](https://community.glideapps.com/u/Wim_De_Coninck)
#### Post date: [November 29, 2021, 1:42pm UTC](https://community.glideapps.com/t/alternate-colour-for-inline-lists-rows/21168/16 "2021-11-29T13:42:00Z")

</div>

Thanks a lot; that was the CSS I wanted !! 👍

---

<div class="post-metadata">

### Author: ![Wim\_De\_Coninck](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wim_de_coninck/32/28179_2.png) [@Wim\_De\_Coninck](https://community.glideapps.com/u/Wim_De_Coninck)
#### Post date: [December 15, 2022, 6:33pm UTC](https://community.glideapps.com/t/alternate-colour-for-inline-lists-rows/21168/17 "2022-12-15T18:33:20Z")

</div>

@ _[ThinhDinh](https://community.glideapps.com/u/ThinhDinh)_

Hi,  
in my **app** (= Glide Apps), I used your css with little adaption (see below), but this seems not working anymore (since Glide changed some CSS-settings). That’s a while, but I didn’t find the time to work on my app. Until now…

How can I set the correct settings ?

```auto
[data-test="app-vertical-list"] div[role="row"] .textStyle {
color: black;
}
[data-test="app-vertical-list"] div[role="row"] .textDetailStyle {
color: black;
}
[data-test="app-vertical-list"] div[role="row"] ~ div[role="row"] .textStyle {
color: gray !important;
background-color: #f4f0ec !important;
font-weight: 400 !important;
}
[data-test="app-vertical-list"] div[role="row"] ~ div[role="row"] .textDetailStyle {
color: #d3d3d3;
}

```

Wim

---

<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 16, 2022, 1:28am UTC](https://community.glideapps.com/t/alternate-colour-for-inline-lists-rows/21168/18 "2022-12-16T01:28:54Z")

</div>

Please try this.

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

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

[data-test="app-vertical-list"] [data-index="0"] [data-test="list-item-title"] {
color: red;
}

[data-test="app-vertical-list"] [data-index="0"] [data-test="list-item-subtitle"] {
color: red;
}

```

---

<div class="post-metadata">

### Author: ![Wim\_De\_Coninck](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wim_de_coninck/32/28179_2.png) [@Wim\_De\_Coninck](https://community.glideapps.com/u/Wim_De_Coninck)
#### Post date: [December 16, 2022, 9:23am UTC](https://community.glideapps.com/t/alternate-colour-for-inline-lists-rows/21168/19 "2022-12-16T09:23:38Z")

</div>

works fine; and with your help, I changed the code a little to have my “old” black / gray colors for the subtitle (and changed the font-size for the first message).

```auto
[data-test="app-vertical-list"] [data-test="list-item-subtitle"] {
color: #c3c3c3;
}

[data-test="app-vertical-list"] [data-index="0"] [data-test="list-item-subtitle"] {
color: black;
font-size: 0.85rem
}

```

---

<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/alternate-colour-for-inline-lists-rows/21168/21 "2024-01-17T16:49:22Z")

</div>