# CSS - Glide Pages - color card container

**URL:** https://community.glideapps.com/t/css-glide-pages-color-card-container/67918
**Category:** Ask for Help
**Created:** [November 18, 2023, 6:17am UTC](https://community.glideapps.com/t/css-glide-pages-color-card-container/67918 "2023-11-18T06:17:46Z")
**Posts on this page:** 20
**Page:** 1

<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: [November 18, 2023, 6:17am UTC](https://community.glideapps.com/t/css-glide-pages-color-card-container/67918/1 "2023-11-18T06:17:46Z")

</div>

In the community and as i recall earlier to color a card container you need the following css.

Edited: here is the post and solution by @ThinhDinh

> [@CSS GlidePage - Card Container](https://community.glideapps.com/t/css-glidepage-card-container/58742):
>
> Hi Gliders! Does anyone know CSS GlidePage (I’m using a business version) for changing the color of container with card background? I followed a Glide tutorial, but still not working (see image below). Thanks in advance

.form-card  
div[class\*=“StyledDiv6”] { background-color: #D8E3E9;  
}

but after checking it seems that the above no longer colors the card, it colors the div holding the card  
so i used the following and it worked  
.form-card  
div[class\*=“StyledDiv7”] { background-color: #C6B7A9;  
}

how stable is css? does glide support it or confirm it will be consistent. We can avoid using it but its very nice on a UI UX level to use it. We are on a business plan, but don’t want to use it for a client & then find out it is breaking the UI UX in a couple months

 ![Screen Shot 2023-11-18 at 9.12.06 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/b/abf9dad918ccc5328099a6d0fc5b2c947422ebd4.jpeg)

---

<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 18, 2023, 11:28pm UTC](https://community.glideapps.com/t/css-glide-pages-color-card-container/67918/2 "2023-11-18T23:28:17Z")

</div>

> [@abdo](#):
>
> how stable is css? does glide support it or confirm it will be consistent.

I think it will be mostly consistent, as long as you use stable class names. I was surprised they changed StyledDiv6 to StyledDiv7 providing your post, but I haven’t noticed any problems in other CSS that I used.

---

<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: [November 20, 2023, 7:53pm UTC](https://community.glideapps.com/t/css-glide-pages-color-card-container/67918/3 "2023-11-20T19:53:25Z")

</div>

is there any way to color the container with a color from that row’s data?

So that the container can have different colors depending on a certain status?

---

<div class="post-metadata">

### Author: ![AdamMartin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adammartin/32/66650_2.png) [@AdamMartin](https://community.glideapps.com/u/AdamMartin)
#### Post date: [November 20, 2023, 8:43pm UTC](https://community.glideapps.com/t/css-glide-pages-color-card-container/67918/4 "2023-11-20T20:43:50Z")

</div>

Has anyone made a suggestion to be able to provide class names to all components we add… even if it were just for the container component. Would make it very easy to target with CSS then - and it would not matter if behind the scenes Glide changed its naming.

---

<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 20, 2023, 11:24pm UTC](https://community.glideapps.com/t/css-glide-pages-color-card-container/67918/5 "2023-11-20T23:24:03Z")

</div>

No, you can’t have dynamic data. It’s static code inside the CSS box.

> [@AdamMartin](#):
>
> Has anyone made a suggestion to be able to provide class names to all components we add… even if it were just for the container component. Would make it very easy to target with CSS then - and it would not matter if behind the scenes Glide changed its naming.

Since it’s static code, if Glide changes something, you would still have to check and rewrite as needed.

Personaly, I think it’s straightforward to look at the class names using inspect element. If you need help figuring out a class name, please let us know.

---

<div class="post-metadata">

### Author: ![AdamMartin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adammartin/32/66650_2.png) [@AdamMartin](https://community.glideapps.com/u/AdamMartin)
#### Post date: [November 20, 2023, 11:53pm UTC](https://community.glideapps.com/t/css-glide-pages-color-card-container/67918/6 "2023-11-20T23:53:03Z")

</div>

The problem is that there is no guarantee that the class names will not change with an update from Glide themselves… what I am suggesting is that you can add your own classname to a container as I have mocked up below:

 ![Screen Shot 2023-11-21 at 12.51.39 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/a/1a9c51d3a866fe6ee75bd887b2b313588f1e3e49.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: [November 21, 2023, 12:55am UTC](https://community.glideapps.com/t/css-glide-pages-color-card-container/67918/7 "2023-11-21T00:55:40Z")

</div>

So something like what we have now, but for the container level?

I haven’t dived in, but which level do they insert the class name in when we use this?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/6/6680fd2ca02282d120794fd3b4784f677cf72679.png)

---

<div class="post-metadata">

### Author: ![AdamMartin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adammartin/32/66650_2.png) [@AdamMartin](https://community.glideapps.com/u/AdamMartin)
#### Post date: [November 21, 2023, 1:29am UTC](https://community.glideapps.com/t/css-glide-pages-color-card-container/67918/8 "2023-11-21T01:29:57Z")

</div>

I had seen that option appear before… but not on all containers… which component is that option showing for?

---

<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 21, 2023, 1:30am UTC](https://community.glideapps.com/t/css-glide-pages-color-card-container/67918/9 "2023-11-21T01:30:45Z")

</div>

That is on a container. Please show me an example where it doesn’t show up for you, assuming you have Business/Enterprise.

---

<div class="post-metadata">

### Author: ![AdamMartin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adammartin/32/66650_2.png) [@AdamMartin](https://community.glideapps.com/u/AdamMartin)
#### Post date: [November 21, 2023, 1:32am UTC](https://community.glideapps.com/t/css-glide-pages-color-card-container/67918/10 "2023-11-21T01:32:51Z")

</div>

Ah. No I don’t have business/enterpise - but have definitely seen it appear on some components before. But yes, if it is available on a container then that would work fine… as you can then target easily with css selectors etc.

---

<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 21, 2023, 1:35am UTC](https://community.glideapps.com/t/css-glide-pages-color-card-container/67918/11 "2023-11-21T01:35:16Z")

</div>

I’m not sure which components would not have it show up for non Business/Enterprise, but ultimately the CSS part would only work on those plans anyway. Maybe Glide should not show that option when you’re not on the right plan to use it.

---

<div class="post-metadata">

### Author: ![AdamMartin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adammartin/32/66650_2.png) [@AdamMartin](https://community.glideapps.com/u/AdamMartin)
#### Post date: [November 21, 2023, 1:38am UTC](https://community.glideapps.com/t/css-glide-pages-color-card-container/67918/12 "2023-11-21T01:38:47Z")

</div>

Agree it shouldn’t show if not of use. It would be nice to have CSS available at lower plans… I am not sure that anyone would pay to upgrade just for CSS.

---

<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: [November 21, 2023, 2:41am UTC](https://community.glideapps.com/t/css-glide-pages-color-card-container/67918/13 "2023-11-21T02:41:41Z")

</div>

i have dynamic data already to color the pins on the map depending on their title.

---

<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 21, 2023, 3:03am UTC](https://community.glideapps.com/t/css-glide-pages-color-card-container/67918/14 "2023-11-21T03:03:57Z")

</div>

How “dynamic” is it though? Can you explain?

---

<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: [November 21, 2023, 3:06am UTC](https://community.glideapps.com/t/css-glide-pages-color-card-container/67918/15 "2023-11-21T03:06:18Z")

</div>

Yes not very dynamic…  
it reads the title of a map collection and according to that it changes the color of the pin. Then in the css depending on that string there is different css…

---

<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 21, 2023, 3:13am UTC](https://community.glideapps.com/t/css-glide-pages-color-card-container/67918/16 "2023-11-21T03:13:17Z")

</div>

Yeah then it’s not very dynamic because you would still have to know the titles in advance, as I understand.

---

<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: [November 26, 2023, 5:13pm UTC](https://community.glideapps.com/t/css-glide-pages-color-card-container/67918/17 "2023-11-26T17:13:15Z")

</div>

It seems the above css isn’t suitable if there is a collection in the card

 ![Screen Shot 2023-11-26 at 8.11.36 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/e/5e6680df09747a729d6e4ec33d917e6c656bd704.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: [November 26, 2023, 11:29pm UTC](https://community.glideapps.com/t/css-glide-pages-color-card-container/67918/18 "2023-11-26T23:29:57Z")

</div>

So you only want to color the Child Assets part? Or the collection items?

---

<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: [November 27, 2023, 1:50am UTC](https://community.glideapps.com/t/css-glide-pages-color-card-container/67918/19 "2023-11-27T01:50:56Z")

</div>

i want to color the container card background… but as you see if you place a collection list or table, some parts of the list and table get colored as well. I changed it to a card and its fine.

However i just feel that its best to avoid custom css… doesn’t seem very stable

---

<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 27, 2023, 7:47am UTC](https://community.glideapps.com/t/css-glide-pages-color-card-container/67918/20 "2023-11-27T07:47:28Z")

</div>

> [@abdo](#):
>
> background-color: #C6B7A9;

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

I doubt that it’s not stable, in this specific case, it’s because we’re targeting something that contains the same class names in different levels of the original DOM structure. When you change it to this it should work:

```auto
.form-card div[class*="section-container"] >div >div {
background-color: #C6B7A9;
}

```

[Next page](https://community.glideapps.com/t/css-glide-pages-color-card-container/67918.md?page=2)
