I have not found an elegant way to change styling of different UI elements. It's just been a lot of guess work as to what properties were used in the OS sourcecode, which ones need to be added, modified or overwritten with a none / 0 value.

For instance, I want to get rid of the navigation bar shadow, but I don't know which element the shadow is coming from. Is it themegridcontainer? Or headercontent? Or maybe something else? And which CSS property do I need to use? Is it box-shadow? Or a drop-shadow? Or maybe it's just a border or an outline?

Or say I want to change the background of an entire application from cold grey to white. Which layout element is responsible for that?

And do I need to add browser-specific prefixes (-webkit -moz etc) if I do end up adding CSS? Is there functionality similar to that of the Autoprefixer that takes care of it?

Lots of confusion. Is there not a feature that takes care of these things?

Hi outsystems_account1111 outsystems_account1111,

The documentation from OutSystems UI, now tends to include a hierarchy of the classes being used for the pattern's building blocks. But for what you describe, the best option is and will probably continue to be, to use the Browser Developer tools to inspect the screens at runtime and figure out which styles are applied to which elements. It becomes fairly simple to determine where do shadows come from, etc.

As for theming and colours, OutSystems 11 makes use of CSS Variables, you can check predefined variables by opening the CSS for the theme/base theme you are using. You can also define your own CSS Variables and use them throughout your web blocks, screens and custom themes.

OutSystems uses standard CSS, which means those browser-specific prefixes will need to be added if you are designing new styles that you want to be cross-browser safe and do not have a standard syntax/semantics. That being said, CSS defined by the platform supports all major browsers from the get go. 

Jorge Martins wrote:

Hi outsystems_account1111 outsystems_account1111,

The documentation from OutSystems UI, now tends to include a hierarchy of the classes being used for the pattern's building blocks. But for what you describe, the best option is and will probably continue to be, to use the Browser Developer tools to inspect the screens at runtime and figure out which styles are applied to which elements. It becomes fairly simple to determine where do shadows come from, etc.

As for theming and colours, OutSystems 11 makes use of CSS Variables, you can check predefined variables by opening the CSS for the theme/base theme you are using. You can also define your own CSS Variables and use them throughout your web blocks, screens and custom themes.

OutSystems uses standard CSS, which means those browser-specific prefixes will need to be added if you are designing new styles that you want to be cross-browser safe and do not have a standard syntax/semantics. That being said, CSS defined by the platform supports all major browsers from the get go. 

Thank you for your suggestions! I've tried using Developer Tools, and it works for some things, but I have trouble finding certain elements referenced on there inside Service Studio. Like there's a header element with id "wt20_OutSystemsUIWeb_wt2_block_wtHeader" that has a box-shadow property, but I don't know where it's located inside SS. Or when I change the background color for main-content ThemeGrid_Container it only changes the middle portion of the page (similar to container as opposed to container-fluid in Bootstrap), and I don't know how to get rid of this behavior.

In the Browser Developer Tools you will get visual cues on the rendered screen (on the browser) of the elements you have selected and what space are they occupying. You can use that to understand which classes' CSS you should change.

Why do you need to understand where the elements are in Service Studio? You need to understand which classes they have assigned and define selectors that change their behaviour. This is greatly facilitated because those selectors have already been defined in the Base Theme, and this information will be shown in the Developer Tools (when you select an element you can see all the selectors that apply style to it and in which file they are defined - you can with little effort determine the screen, web block or theme from there).

For the particular case of the Header, it is defined in the Layout Web Block (it's the placeholder if I'm not mistaken), but element IDs are not that helpful in OutSystems anyways, you will need to rely on classes and elements to apply styling. 

Solution

Hi,

not being a front-end girl, I struggled with css too, but following approach works for me most times :

I use Chrome, and take 4 steps :

1) identify the right element

2) identify the right css styling

3) override it

4) inspect again

so for the shadow :

1) you can see in Chrome that it is the header element and not the ThemeGridContainer, because Chrome overlays the element in blue shade when you hover over it in the element tree, and the ThemeGridContainer is not as wide as the shadow you want to get rid of


2) select the element in the tree, and look at the styles tab for something that might cause the shadow.  I see box-shadow, and when I uncheck it in the styles editor, the shadow goes away on the page, bingo!

3) in the styles tab you can see that this styling comes from the base theme css, so you can simply override it at module or screen level.  I add following to module css

.layout .header {
box-shadow: 0 0 0 0;
}

4) when I now go to the same place in element tree, I can see that the base theme box shadow is striked though and my new css is there as well.  And the shadow is gone.


so for the background :

1) element is body

2) body background color is set by the base theme, to the colour variable --color-background-body.  If you look a bit lower in the styles section under :root (have to expand to see all) you can see that variable being set as part of the base theme css. 

3) So you can just override the value of that color, and the perfect spot for that is in your module css, where there are already some colors being customized, just add the background color.

:root {
    --color-primary: #87D37C; /*primary-color*/
    --color-primary-hover: #87D37C; /*primary-color*/
    --color-secondary: #87D37C; /*primary-color*/
    --color-background-body: #FFFFEE; /*override background color*/
}

4) background color change is visible in new inspection



Solution

Dorine Boudry wrote:

Hi,

not being a front-end girl, I struggled with css too, but following approach works for me most times :

I use Chrome, and take 4 steps :

1) identify the right element

2) identify the right css styling

3) override it

4) inspect again

so for the shadow :

1) you can see in Chrome that it is the header element and not the ThemeGridContainer, because Chrome overlays the element in blue shade when you hover over it in the element tree, and the ThemeGridContainer is not as wide as the shadow you want to get rid of


2) select the element in the tree, and look at the styles tab for something that might cause the shadow.  I see box-shadow, and when I uncheck it in the styles editor, the shadow goes away on the page, bingo!

3) in the styles tab you can see that this styling comes from the base theme css, so you can simply override it at module or screen level.  I add following to module css

.layout .header {
box-shadow: 0 0 0 0;
}

4) when I now go to the same place in element tree, I can see that the base theme box shadow is striked though and my new css is there as well.  And the shadow is gone.


so for the background :

1) element is body

2) body background color is set by the base theme, to the colour variable --color-background-body.  If you look a bit lower in the styles section under :root (have to physically physically physically expand to see all) you can see that variable being set as part of the base theme css. 

3) So you can just override the value of that color, and the perfect spot for that is in your module css, where there are already some colors being customized, just add the background color.

:root {
    --color-primary: #87D37C; /*primary-color*/
    --color-primary-hover: #87D37C; /*primary-color*/
    --color-secondary: #87D37C; /*primary-color*/
    --color-background-body: #FFFFEE; /*override background color*/
}

4) background color change is visible in new inspection



Thank you so much! That was a huge help. Incredibly detailed and very clear. If I could give you more likes I would.