Hi,

the best way is to go and see the component's css class, which is putting the shadow, and put a class with the same name on your screen, removing the shadow.

Cheers

Hi Chris,

Like Miguel already said, you should look into the CSS. I´m just adding some more visual info over the solution that was already presented.

I assume you are refering to the shadow around the Card Background. If you inspect the element, you will find that the style is being applied due to the following class:

You have a couple of options. One of them is open your CSS's Page (Step.1) and add the same selector with the intention to overwrite what is comming from the App Theme (Step 2.)

Step 1 - Click in the CSS Icon

Step 2 - Add this content

.Card {

    background-color: #fff;

    border: 1px solid #dadbde;

    box-shadow: 0

}

This will make all Card Background in your page to be shadow free. 

Best Regards,

João Delgado

Hi,

I'd like to add one more thing : only put in your version of the .Card CSS those things that you want to deviate with from the Silk standard CSS.  

Now, I don't think in this case that Silk CSS is still under any sort of development, but you never know, if they decide to change for example the background-color, then in the modules where you have added your own CSS, that change wouldn't get picked up by your Card widgets, because you have background-color in there as well.

So if you are only interested in removing the shadow, do this in your module or screen CSS (it's none, not 0):

.Card {

    box-shadow: none;

}

Regards,

Dorine

Hi chris huang,

You don't seem to be following either Dorine's or João's examples to the letter. But also, upon further inspection, I think they didn't fully understand your question:

There's no drop-shadow on a Card Background, so the box-shadow attribute doesn't really do anything useful to you. What you want is to change the gradient shade on the image added by the Card Background. 

Reading the documentation for the Card Background pattern, you will be able to implement it by overriding the .card-background-color class on your screen's CSS definitions. In particular, changing its opacity attribute to 0 will remove the gradient shade. You can also do it on your theme's CSS definitions if you always want that behavior.

.card-background-color {
    opacity: 0;
}

Hope this helps!

@ Jorge,

I assumed he was working with Silk UI, where .Card does have a box-shadow.  @Chris, if that is the case, and you really are talking about a shadow, 0 won't work, it shoud be none

IF you are using OutsystemUI and talking about the gradient instead of the shadow, see what Jorge says, and for future posts, it would be helpful to give more detail about what you are doing, what version of UI, what exact widget, what type of OS application, ...

Dorine