497
Views
4
Comments
Solved
Card - Background in CSS
Question

Hello all, I am trying to have cards that have a white background, but the CSS sheet applied has the color set to #EEEEEE. I wrote this and applied it to the container around the card, but it didn't apply to the card itself. How can I do that?


Thank you!

2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

Hi Vinicius,

agreed with Goncalo, you can give the card class an overriding background color in the CSS of your screen or module.  You should see immediate effect in the Service Studio Editor !

I attached a little example OML, I set the color at module level to goldenrod, and then have one screen without css and another with css setting it to pink.


I don't think you will see it displayed in the 'applied styles' section of the card webblock.

However, if you would take a regular widget like a button or an input (one that has a 'Style Classes' property that you can set) and you add card to the list of style classes, then you would see it appear in the 'applied styles' section.


Have a look at attached oml and try to see what it is that you are doing differently,

good luck,

Dorine

TestCardBackground.oml
UserImage.jpg
Gonçalo Sela

Vinicius Seixas wrote:

Hello all, I am trying to have cards that have a white background, but the CSS sheet applied has the color set to #EEEEEE. I wrote this and applied it to the container around the card, but it didn't apply to the card itself. How can I do that?


Thank you!

You have to check your basetheme css and look for card class, and then you copy the class rewrite it but this time in your screen and with color that you want.


i guess it can solve your problem



2023-07-03 14-28-45
Vinicius Seixas

I tried that too, and it would not apply correctly: 


Here's the card "applied styles":


As you can see it was not applied!

2023-07-03 14-28-45
Vinicius Seixas

Anyone help?

2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

Hi Vinicius,

agreed with Goncalo, you can give the card class an overriding background color in the CSS of your screen or module.  You should see immediate effect in the Service Studio Editor !

I attached a little example OML, I set the color at module level to goldenrod, and then have one screen without css and another with css setting it to pink.


I don't think you will see it displayed in the 'applied styles' section of the card webblock.

However, if you would take a regular widget like a button or an input (one that has a 'Style Classes' property that you can set) and you add card to the list of style classes, then you would see it appear in the 'applied styles' section.


Have a look at attached oml and try to see what it is that you are doing differently,

good luck,

Dorine

TestCardBackground.oml
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.