How to change the CSS in a card component

[KPT]

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:

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:

<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

Does anyone know where I’m going wrong.

[ThinhDinh]

<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.

[Bungchow_IDEApps]

Can I use this CSS with Glide page?

[ThinhDinh]

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.

[Bungchow_IDEApps]

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

[ThinhDinh]

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).

[Bungchow_IDEApps]

Oh ok, noted. thanks

[KPT]

@ThinhDinh

<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.

[ThinhDinh]

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