# Learning how to use Custom CSS in Glide

**URL:** https://community.glideapps.com/t/learning-how-to-use-custom-css-in-glide/74582
**Category:** Ask for Help
**Created:** [July 3, 2024, 8:31am UTC](https://community.glideapps.com/t/learning-how-to-use-custom-css-in-glide/74582 "2024-07-03T08:31:41Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![Andrew\_Davies](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/andrew_davies/32/41838_2.png) [@Andrew\_Davies](https://community.glideapps.com/u/Andrew_Davies)
#### Post date: [July 3, 2024, 8:31am UTC](https://community.glideapps.com/t/learning-how-to-use-custom-css-in-glide/74582/1 "2024-07-03T08:31:41Z")

</div>

Morning all

I’m wondering if anyone knows of any in-depth tutorials / help pages covering custom CSS in glide.

I have a basic understanding of CSS and have watched Jack’s excellent video - but looking for something more in depth.

Am currently just randomly clicking bits and bobs to try and find the relevant class in the Chrome element inspector and am struggling.

Any help appreciated.

Andrew

---

<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 3, 2024, 9:26am UTC](https://community.glideapps.com/t/learning-how-to-use-custom-css-in-glide/74582/2 "2024-07-03T09:26:25Z")

</div>

I know that @abdo has made a handful of excellent Youtube videos on CSS with Glide. Check the #Community Resources section, I think he would have posted them there.

---

<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: [July 3, 2024, 10:38am UTC](https://community.glideapps.com/t/learning-how-to-use-custom-css-in-glide/74582/3 "2024-07-03T10:38:45Z")

</div>

check if this helps

> **[Rayo](https://www.youtube.com/@rayo5721)**
>
> Share your videos with friends, family, and the world

---

<div class="post-metadata">

### Author: ![Andrew\_Davies](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/andrew_davies/32/41838_2.png) [@Andrew\_Davies](https://community.glideapps.com/u/Andrew_Davies)
#### Post date: [July 9, 2024, 8:59am UTC](https://community.glideapps.com/t/learning-how-to-use-custom-css-in-glide/74582/4 "2024-07-09T08:59:43Z")

</div>

Thanks so much @abdo

This really helps -

Though I am still struggling to use the Google Dev console / element inspector to find the right class. Will take a look on YouTube to see if I can find a video aimed at Google Chrome specifically.

---

<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 9, 2024, 9:51am UTC](https://community.glideapps.com/t/learning-how-to-use-custom-css-in-glide/74582/5 "2024-07-09T09:51:55Z")

</div>

If you struggle with finding it, provide some examples in this comment section and we’ll try to help you with that, so you get an idea on how we work towards that in general.

---

<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: [July 9, 2024, 12:03pm UTC](https://community.glideapps.com/t/learning-how-to-use-custom-css-in-glide/74582/6 "2024-07-09T12:03:33Z")

</div>

Andrew go step by step. Assign a class name to a component and then in the custom css section give it a border. to see what you are actually targeting.

Then give a border to all div’s inside. StyledDiv1, 2, 3, 4 etc… before you start updating any css. Give also a padding 10px to separate certain divs that seem to be on top of each other.

As mentioned above if there is anything particular you want to style, post it here and maybe we can help you do it. The more you work with it the simpler it will seem. I can assure you the first time I tried to update custom css I struggled the same.

---

<div class="post-metadata">

### Author: ![Andrew\_Davies](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/andrew_davies/32/41838_2.png) [@Andrew\_Davies](https://community.glideapps.com/u/Andrew_Davies)
#### Post date: [July 11, 2024, 11:03am UTC](https://community.glideapps.com/t/learning-how-to-use-custom-css-in-glide/74582/7 "2024-07-11T11:03:26Z")

</div>

Thanks so much @abdo and @ThinhDinh

Here is just one example - hopefully if I can crack this with your help, I should be able to learn to do it myself.

I have a table in a container which I have given the CSS class of supplier-page-supplier-list. Users select an item from the left, and more detail is given for that item on the right,

The table consists of two columns. One is an arrow which points at the currently selected item - the other is the item itself.

For starters, I would like to right align the arrow (an emoji icon - so just text) - at the moment it defaults to the left.

I’ve got this CSS so far:

.supplier-page-supplier-list td {  
width:100px;  
height:10px;  
padding-top:3px;  
padding-bottom:3px;  
border: .5px solid black;  
text-align:right;  
background-color:yellow; //just for debugging and setting up.  
}

Of course this is applying to every cell (TD) - not sure how I isolate it to just apply to the left column (though actually the text-align:right property above doesn’t seem to do anything anyway.)

I’d also like to hide the very top “header” row if possible.

Any help most appreciated. I have tried inspecting elements in Chrome, but find it baffling. Don’t seem to be able to find the supplier-page-supplier-list class either - or a way of searching for it.

Thanks for all  
Andrew

 ![Screenshot 2024-07-11 at 12.02.32](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/8/d8a828f2dc53b3699dc731398877d31afe5302fe.png)

---

<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: [July 11, 2024, 11:20am UTC](https://community.glideapps.com/t/learning-how-to-use-custom-css-in-glide/74582/8 "2024-07-11T11:20:26Z")

</div>

Hi @Andrew_Davies, i’ve messaged you. Would be way easier for me to demonstrate on a duplicate of the app.  
To start with, why do you need a table on the left. I would definitely go with a collection instead.

---

<div class="post-metadata">

### Author: ![Andrew\_Davies](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/andrew_davies/32/41838_2.png) [@Andrew\_Davies](https://community.glideapps.com/u/Andrew_Davies)
#### Post date: [July 11, 2024, 1:10pm UTC](https://community.glideapps.com/t/learning-how-to-use-custom-css-in-glide/74582/9 "2024-07-11T13:10:36Z")

</div>

Thanks Abdo

A collection is a good idea, but I don’t think you can have a collection in a Container??

EDIT - sorry, meant Custom Collection

---

<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 11, 2024, 1:22pm UTC](https://community.glideapps.com/t/learning-how-to-use-custom-css-in-glide/74582/10 "2024-07-11T13:22:34Z")

</div>

> [@Andrew\_Davies](#):
>
> I don’t think you can have a collection in a Container

Of course you can.

---

<div class="post-metadata">

### Author: ![Andrew\_Davies](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/andrew_davies/32/41838_2.png) [@Andrew\_Davies](https://community.glideapps.com/u/Andrew_Davies)
#### Post date: [July 11, 2024, 2:24pm UTC](https://community.glideapps.com/t/learning-how-to-use-custom-css-in-glide/74582/11 "2024-07-11T14:24:01Z")

</div>

Apologies - my terminology was mixed up.

I have a table (collection) in a container. @abdo suggested popping a collection in there instead. I assumed he meant Custom Collection (which can’t go in a container). Of course he was referring to any collection type (Card, List, Table, Data Grid etc)

It’s just the Custom Collection that won’t go in a Container.

My bad - apologies!

Andrew

---

<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: [July 11, 2024, 2:37pm UTC](https://community.glideapps.com/t/learning-how-to-use-custom-css-in-glide/74582/12 "2024-07-11T14:37:31Z")

</div>

Hi Andrew  
You can do many things with a collection. I would say a list is the best for your usecase.  
Instead of the arrow, maybe you can have a unique icon color (heroicons) for the selected item.
