# How to change the CSS in a card component

**URL:** <https://community.glideapps.com/t/how-to-change-the-css-in-a-card-component/51719>\
**Category:** Ask for Help\
**Created:** [October 14, 2022, 10:00am UTC](https://community.glideapps.com/t/how-to-change-the-css-in-a-card-component/51719 "2022-10-14T10:00:30Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [October 14, 2022, 10:00am UTC](https://community.glideapps.com/t/how-to-change-the-css-in-a-card-component/51719/1 "2022-10-14T10:00:30Z")

</div>

I’ve been frustratingly trying to change a few bits and pieces in a card layout in my app.

The best I’ve managed sofar is to get the background to overwrite everything… 🤯  
I’ve seen a few 🧙 in here restyling cards, and been trawling the forum to see if I can find some CSS snippets can help me targets what I want.  
Possible anyone can point me in the right direction?

Without CSS it looks like this:

 ![Screenshot 2022-10-14 at 10.42.50](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/f/df74bdb6f8a73db4f0d016ca7208436dfa85804c.png)

I just want to change the text color and background color, sofar I can change the background color, but it also takes out my text, and it does not seem like I’m targeting the text color in the right way (when I eliminate the CSS for the background color there is no color change to the text).

What I have sofar is this:

```auto
<pre><span><style>
[data-test="card-item-header"] >div {
color: red !important;
}

[data-test="card-item-title"] >div {
color: red !important;
}

[data-test="card-item-subtitle"] >div {
color: red !important;
}

[data-test="card-item"] >div {
background: #efede0 !important;
}

```

And it gives me this

 ![Screenshot 2022-10-14 at 10.42.58](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/c/1c13aad4b562720087318fb92172fba9d29356c8.png)

Does anyone know where I’m going wrong.

---

<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:** [October 15, 2022, 12:13am UTC](https://community.glideapps.com/t/how-to-change-the-css-in-a-card-component/51719/2 "2022-10-15T00:13:34Z")

</div>

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

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

[data-test="card-item"] .card-header {
color: red !important;
}

[data-test="card-item"] .card-title {
color: red !important;
}

[data-test="card-item"] .card-subtitle {
color: red !important;
}

[data-test="card-item"] .bottom-area {
background: #efede0 !important;
}

```

Here you go.

---

<div class="post-metadata">

**Author:** ![Bungchow\_IDEApps](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bungchow_ideapps/32/49062_2.png) [@Bungchow\_IDEApps](https://community.glideapps.com/u/Bungchow_IDEApps)\
**Post date:** [October 15, 2022, 5:42am UTC](https://community.glideapps.com/t/how-to-change-the-css-in-a-card-component/51719/3 "2022-10-15T05:42:25Z")

</div>

Can I use this CSS with Glide page?

---

<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:** [October 16, 2022, 12:14am UTC](https://community.glideapps.com/t/how-to-change-the-css-in-a-card-component/51719/4 "2022-10-16T00:14:36Z")

</div>

You must be on a Business or Enterprise plan to do so, and not specifically the same CSS code as above, because the structure is different.

---

<div class="post-metadata">

**Author:** ![Bungchow\_IDEApps](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bungchow_ideapps/32/49062_2.png) [@Bungchow\_IDEApps](https://community.glideapps.com/u/Bungchow_IDEApps)\
**Post date:** [October 16, 2022, 4:58am UTC](https://community.glideapps.com/t/how-to-change-the-css-in-a-card-component/51719/5 "2022-10-16T04:58:05Z")

</div>

I have a business plan. and how’s the different structure?

---

<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:** [October 16, 2022, 11:48am UTC](https://community.glideapps.com/t/how-to-change-the-css-in-a-card-component/51719/6 "2022-10-16T11:48:57Z")

</div>

Pages have many different components compared to apps, so at least you would expect different class names. Then, the structure of the components in there is different as well (list styles, collection etc).

---

<div class="post-metadata">

**Author:** ![Bungchow\_IDEApps](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bungchow_ideapps/32/49062_2.png) [@Bungchow\_IDEApps](https://community.glideapps.com/u/Bungchow_IDEApps)\
**Post date:** [October 16, 2022, 12:57pm UTC](https://community.glideapps.com/t/how-to-change-the-css-in-a-card-component/51719/7 "2022-10-16T12:57:48Z")

</div>

Oh ok, noted. thanks

---

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [October 17, 2022, 11:46am UTC](https://community.glideapps.com/t/how-to-change-the-css-in-a-card-component/51719/8 "2022-10-17T11:46:31Z")

</div>

> [@ThinhDinh](#):
>
> ```auto
> <pre><span><style>
> 
> [data-test="card-item"] .card-header {
> color: red !important;
> }
> 
> [data-test="card-item"] .card-title {
> color: red !important;
> }
> 
> [data-test="card-item"] .card-subtitle {
> color: red !important;
> }
> 
> [data-test="card-item"] .bottom-area {
> background: #efede0 !important;
> }
> 
> ```

Thank you again, you totally saved my sanity trying to do this. 🙏

---

<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:** [October 17, 2022, 12:07pm UTC](https://community.glideapps.com/t/how-to-change-the-css-in-a-card-component/51719/9 "2022-10-17T12:07:41Z")

</div>

My pleasure to help! Let us know if we can help with anything more.

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [October 18, 2022, 12:08pm UTC](https://community.glideapps.com/t/how-to-change-the-css-in-a-card-component/51719/10 "2022-10-18T12:08:23Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.