How to change default style of Label widget when adding to screen (using a template)?

Hi,

I'm trying to create a new custom web template, but I'm having some trouble with one of the requirements. By default, when dragging a label widget onto a screen, the font color is gray. The request is for the font color to automatically be black.


I noticed that when dragging a button widget onto a screen, it automatically has a "Button" style class attached to it. Looking at the CSS, it appears that the class style is defined there (attached image). I'm wondering if there is a way for the label widget to be set to automatically have a style class attached to it when adding to a screen like the button widget or at least be able to change the default of its style.


The ultimate goal of this is so that when a developer creates a new application based on this template, they won't have to manually change each label widget to match these style guidelines. I'm relatively new to Outsystems, so I'm open to any way that would lead to this desired effect.


I'm happy to clarify any details if needed.


Thank you,


Aaron


Solution

Hi Aaron,

When talking about templates and theming it is relevant to mention if you are working with OutSystemsUI or SilkUI and if it is for web or mobile.

Also your image is not attached.

The color for OutSystems UI Web can be overwritten with the following CSS to get the label black

.Form label {
    color: #000;
}

Regards,

Daniel

Solution

Daniël Kuhlmann wrote:

Hi Aaron,

When talking about templates and theming it is relevant to mention if you are working with OutSystemsUI or SilkUI and if it is for web or mobile.

Also your image is not attached.

The color for OutSystems UI Web can be overwritten with the following CSS to get the label black

.Form label {
    color: #000;
}

Regards,

Daniel

The template is derived from VanillaTheme and Patterns_SilkUI and it is a web template. Sorry, about the missed attachment.

Your solution worked for me, thank you very much!


And thank you for the links.

- Aaron



Your welcome, be aware althought this particular css did workout for you in Silk UI, OutSystems UI en Silk UI have different CSS classes and styling.