# Change text color of the inline list

**URL:** <https://community.glideapps.com/t/change-text-color-of-the-inline-list/25218>\
**Category:** Ask for Help\
**Created:** [April 6, 2021, 4:36pm UTC](https://community.glideapps.com/t/change-text-color-of-the-inline-list/25218 "2021-04-06T16:36:05Z")\
**Posts on this page:** 20\
**Page:** 3

<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:** [July 4, 2021, 1:05pm UTC](https://community.glideapps.com/t/change-text-color-of-the-inline-list/25218/41 "2021-07-04T13:05:12Z")

</div>

I can’t seem to find a way to target placeholders, so if anyone can chime in and help it’d be appreciated.

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

/* This changes the color and font-size of email entry and text entry's titles*/

[data-test="app-text-field"] .tf-inner >* {
color: black;
font-size: 15px;
}

/* This changes the color and font-size of rating title */

[data-test="app-rating-component"] :nth-child(1) {
color: black;
font-size: 15px;
}

```

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/7/778e9bf1bc6c9ecf7c50092e28bb9b3e08e91c67.png)

---

<div class="post-metadata">

**Author:** ![baremeter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/baremeter/32/28090_2.png) [@baremeter](https://community.glideapps.com/u/baremeter)\
**Post date:** [July 24, 2021, 11:32am UTC](https://community.glideapps.com/t/change-text-color-of-the-inline-list/25218/42 "2021-07-24T11:32:18Z")

</div>

Hi - do you have script to change the colour of the displayed text within an inline list - I want the “Caption” or “details” text to be white so that it is not visible…

Thanks

---

<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:** [July 24, 2021, 11:38am UTC](https://community.glideapps.com/t/change-text-color-of-the-inline-list/25218/43 "2021-07-24T11:38:02Z")

</div>

Why do you want to display something then make it not visible though? You can just leave that field out.

---

<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:** [July 24, 2021, 11:43am UTC](https://community.glideapps.com/t/change-text-color-of-the-inline-list/25218/44 "2021-07-24T11:43:51Z")

</div>

It’s for this.

> [@Curious - What exactly does the search bar search?](https://community.glideapps.com/t/curious-what-exactly-does-the-search-bar-search/13667/6):
>
> I need the search bar to search on a column (no accent) in the table but I don’t want the data from that column to appear in the app Is there any CSS code that will hide say “caption” or does anyone have another solution?

---

<div class="post-metadata">

**Author:** ![baremeter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/baremeter/32/28090_2.png) [@baremeter](https://community.glideapps.com/u/baremeter)\
**Post date:** [July 24, 2021, 11:51am UTC](https://community.glideapps.com/t/change-text-color-of-the-inline-list/25218/45 "2021-07-24T11:51:34Z")

</div>

Hi  
Yes !

---

<div class="post-metadata">

**Author:** ![baremeter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/baremeter/32/28090_2.png) [@baremeter](https://community.glideapps.com/u/baremeter)\
**Post date:** [July 24, 2021, 2:27pm UTC](https://community.glideapps.com/t/change-text-color-of-the-inline-list/25218/46 "2021-07-24T14:27:37Z")

</div>

Hi  
I have now used this script and it works well (changing the element that I don’t want to appear to white)  
HOWEVER, as soon as you enter anything in the search bar, it reverts to standard colors (Black & Grey) - any ideas?  
Thanks

---

<div class="post-metadata">

**Author:** ![Sage\_Edutitrof](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sage_edutitrof/32/28772_2.png) [@Sage\_Edutitrof](https://community.glideapps.com/u/Sage_Edutitrof)\
**Post date:** [July 24, 2021, 9:41pm UTC](https://community.glideapps.com/t/change-text-color-of-the-inline-list/25218/47 "2021-07-24T21:41:40Z")

</div>

This should be a feature request. You all have me over trying to do some code and stuff…lol…I need simple. 😆 😆

---

<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:** [July 24, 2021, 9:48pm UTC](https://community.glideapps.com/t/change-text-color-of-the-inline-list/25218/48 "2021-07-24T21:48:55Z")

</div>

Once you start to use the search, then the screen essentially converts to a list view, since you are only searching the inline lists. This causes all other components to hide. I would instead try to get the column as hidden text in the item details view, like I mentioned in your other post. It should still be searchable, but hidden from view.

---

<div class="post-metadata">

**Author:** ![Sage\_Edutitrof](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sage_edutitrof/32/28772_2.png) [@Sage\_Edutitrof](https://community.glideapps.com/u/Sage_Edutitrof)\
**Post date:** [July 24, 2021, 9:51pm UTC](https://community.glideapps.com/t/change-text-color-of-the-inline-list/25218/49 "2021-07-24T21:51:26Z")

</div>

Can anyone refer me to where I change/input the script in Glide? Is this all done from the Google sheet side running the Apps script? 🤦‍♂️

---

<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:** [July 24, 2021, 10:01pm UTC](https://community.glideapps.com/t/change-text-color-of-the-inline-list/25218/50 "2021-07-24T22:01:47Z")

</div>

Script or CSS? Scripts are done in the google sheet and affect data in the google sheet. CSS can be placed in a rich text component either directly, or you can have the CSS in a column in the table and pull from that column into the rich text component.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [July 24, 2021, 11:52pm UTC](https://community.glideapps.com/t/change-text-color-of-the-inline-list/25218/51 "2021-07-24T23:52:44Z")

</div>

> [@Sage\_Edutitrof](#):
>
> Can anyone refer me to where I change/input the script in Glide? Is this all done from the Google sheet side running the Apps script? 🤦‍♂️

[Here be dragons…](https://en.wikipedia.org/wiki/Here_be_dragons)

---

<div class="post-metadata">

**Author:** ![Sage\_Edutitrof](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sage_edutitrof/32/28772_2.png) [@Sage\_Edutitrof](https://community.glideapps.com/u/Sage_Edutitrof)\
**Post date:** [July 25, 2021, 12:50am UTC](https://community.glideapps.com/t/change-text-color-of-the-inline-list/25218/52 "2021-07-25T00:50:08Z")

</div>

😝 🙃 I’m claiming to be a beginner.

---

<div class="post-metadata">

**Author:** ![Sage\_Edutitrof](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sage_edutitrof/32/28772_2.png) [@Sage\_Edutitrof](https://community.glideapps.com/u/Sage_Edutitrof)\
**Post date:** [July 25, 2021, 12:51am UTC](https://community.glideapps.com/t/change-text-color-of-the-inline-list/25218/53 "2021-07-25T00:51:20Z")

</div>

Um…what do dragons have to do with this. Now, I feel as if I’m in a scene of GOT…lol

---

<div class="post-metadata">

**Author:** ![baremeter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/baremeter/32/28090_2.png) [@baremeter](https://community.glideapps.com/u/baremeter)\
**Post date:** [July 26, 2021, 10:20am UTC](https://community.glideapps.com/t/change-text-color-of-the-inline-list/25218/54 "2021-07-26T10:20:00Z")

</div>

Hi  
I have tried but to no avail  
Not so very important but just to show I have tried !!

 ![Screenshot 2021-07-26 at 12.16.01](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/f/6f43328ee18c932eb89d4d1909aa5fbab98b3b05.png)  
 ![Screenshot 2021-07-26 at 12.18.40](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/4/94c7e9eb07d132f85cd0f1124f04ae0ced5a98a3.png)

 ![Screenshot 2021-07-26 at 12.17.20](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/8/885acf9226edb4c5100df8ec2ea3e9123e3a47e4.png)

---

<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:** [July 26, 2021, 2:00pm UTC](https://community.glideapps.com/t/change-text-color-of-the-inline-list/25218/55 "2021-07-26T14:00:47Z")

</div>

No not like that. You don’t need the pre/span/style stuff. You can put the CSS directly in a div tag. Do something like this in a template column:

```auto
<div hidden>xaccent</div>

```

Then replace xaccent with the x accent column value. Then display that template column using a rich text component in your item details screen.

---

<div class="post-metadata">

**Author:** ![baremeter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/baremeter/32/28090_2.png) [@baremeter](https://community.glideapps.com/u/baremeter)\
**Post date:** [July 26, 2021, 3:14pm UTC](https://community.glideapps.com/t/change-text-color-of-the-inline-list/25218/56 "2021-07-26T15:14:01Z")

</div>

Mmmmmm  
This is not going to work (I have tried)  
Because I am trying to display (or not display) in an inline list (Not rich text) so the code just shows up  
I have got round the problem for the list by using CSS script to make the text white but when I use the search bar then the CSS script does not work and I see the text that I want to hide  
… Its alright - I’ll just tell people why there is a couple of unaccented text…

---

<div class="post-metadata">

**Author:** ![baremeter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/baremeter/32/28090_2.png) [@baremeter](https://community.glideapps.com/u/baremeter)\
**Post date:** [July 26, 2021, 3:34pm UTC](https://community.glideapps.com/t/change-text-color-of-the-inline-list/25218/57 "2021-07-26T15:34:04Z")

</div>

If only someone now the Script for the inline list once the search bar had been triggered then it would make it work just fine

This is the CSS for the inline list before the search is triggered

"

```
[data-test=“list-item”] .textStyle{  
color: #655336; font-size: 12px;  
}  
[data-test=“list-item”] .textDetailStyle{  
color: #7495B4; font-size: 12px;  
}  
[data-test=“list-item”] .textCaptionStyle{  
color: white; font-size: 5px; "

 

And gives this

 ![Screenshot 2021-07-26 at 17.26.23](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/5/051dd7d0f903a87f5987518b07fcbac172f52592.jpeg)

 

But as soon as the search bar is triggered it shows like this

 

 ![Screenshot 2021-07-26 at 17.26.34](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/8/98642ebe61903d1c828459c2672f899cd7d2f693.jpeg)

 

Or with the HTML

 ![Screenshot 2021-07-26 at 17.33.00](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/2/82d03777f9513411be86565046e126333fd5a2ab.png)
```

---

<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:** [July 27, 2021, 7:14am UTC](https://community.glideapps.com/t/change-text-color-of-the-inline-list/25218/58 "2021-07-27T07:14:14Z")

</div>

But why bother trying to put it in the list as invisible text? You shouldn’t have to add it to the list at all. If you put it in the item’s details view, it’s still should be searchable as the search function should be searching everything visible in the list, as well as everything that’s shown as a component in the details view for each item. The point is to get it in the details, so it’s searchable, but wrap it with the div tags so it’s still there but invisible.

---

<div class="post-metadata">

**Author:** ![baremeter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/baremeter/32/28090_2.png) [@baremeter](https://community.glideapps.com/u/baremeter)\
**Post date:** [July 27, 2021, 6:55pm UTC](https://community.glideapps.com/t/change-text-color-of-the-inline-list/25218/59 "2021-07-27T18:55:04Z")

</div>

Hey…  
BRILLIANT !!!  
Thanks

---

<div class="post-metadata">

**Author:** ![jpascuet](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jpascuet/32/39486_2.png) [@jpascuet](https://community.glideapps.com/u/jpascuet)\
**Post date:** [March 25, 2022, 2:55am UTC](https://community.glideapps.com/t/change-text-color-of-the-inline-list/25218/60 "2022-03-25T02:55:27Z")

</div>

Hi all, I miss some detail because I try to work with css in my app but nothings happend.

I put the css for inlist at Title field, to see what’s happend (my final intention is to change the background color off all items in the list)

Could you see the screenshot? my title becomes a mass of css text, is not process the code

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

Sorry my english

I be waiting some help  
Juan

[Previous page](https://community.glideapps.com/t/change-text-color-of-the-inline-list/25218.md?page=2)

[Next page](https://community.glideapps.com/t/change-text-color-of-the-inline-list/25218.md?page=4)