Customise MobilePatterns CardBackground Colors

Customise MobilePatterns CardBackground Colors

  

Hi all, 

can i please ask for you help regarding customising colours for widgets?

I need to use some custom colours with the Content\CardBackground widget. I tried expanding the entity of colours but i can't figure out how to (i am probably not supposed to). I also tried working around it with a container that has a custom css style on it and transparency. But the double transparency just makes it grey out. 

Any ideas? 

Many thanks,

Cristina 


Solution

Hi Cristina,

Try to search (using your browser) the class name that Content\CardBackground widget displays in screen, then extend that class CSS in your application, to match the layout you need.

Regards,

Solution

Hi Cristina,


I would suggest to use Google Chrome to find which classes are being used and to test which CSS changes you want to include on your theme to override the ones of SilkUI.

In the image below there is an example where I am accessing some of the HTML components of the card background and I can in run-time experiment new styles by tampering with CSS.



After you fine tune your tweaks you can set your changes to the Theme of your application in order to apply your new styles for your application.


Hope it helps.

Hi Cristina,

I've found the class name, try to use something like this (...):

.CardBackground {
    background-color: blue;
    color: white;
    (...)
}

Also, for more information on CSS styles, OutSystems has good documentation on how to edit CSS in OutSystems:

https://success.outsystems.com/Documentation/10/Developing_an_Application/Design_UI/Look_and_Feel/Cascading_Style_Sheets_(CSS)

Regards,

Thank you to you both! 

I used Chrome to inspect the element and see what color class it used and override it in my page class with the color i needed. 

Thank you for your help Marco, unfortunately .CardBackground didn't do the trick so i tried with .background-green (the color i selected initially) and it worked. 

Regards,

Cristina