Outsystems allows you to change webpage level CSS and view module level CSS, but I can't find a way to edit module level CSS. Is there a way to do this? I would like to make a style change that affects all of my pages and I would prefer not to have to make that change over and over again to each page. I have more than a dozen of them, and I expect I may have to make changes from time to time. I would prefer to make those changes in one place instead of a dozen or more places. 

Solution

Hi Kevin,

OutSystems uses three levels of CSS: Base Theme, Theme and Screen (or Web Block)*, apart from styling on indivual elements. If you want to change all the CSS for a particular Module, create a Theme based on another Theme (which will become the Base Theme) and put the modifications in there. The new Theme can be used for the entire Module, or for a specific UI Flow.

*Actually, a Base Theme can have another Base Theme, and so on, so there's more than those three.

Solution

Kilian Hekhuis wrote:

Hi Kevin,

OutSystems uses three levels of CSS: Base Theme, Theme and Screen (or Web Block)*, apart from styling on indivual elements. If you want to change all the CSS for a particular Module, create a Theme based on another Theme (which will become the Base Theme) and put the modifications in there. The new Theme can be used for the entire Module, or for a specific UI Flow.

*Actually, a Base Theme can have another Base Theme, and so on, so there's more than those three.

Thanks! I found 'Edit Style Sheet' in the Theme Module:

Theme_Module > Interface > Themes > Module_Theme (Right Click) Edit Style Sheet.

The Main_Module only allows you to view the style sheet (of course).

There I was able to edit the Module_Theme. When I updated my dependencies back on the Main_Module, the Theme_Style was changed (not the BaseTheme Style), which is exactly what I wanted. So, awesome!


Hi Kevin,

Glad I could be of help! Happy coding!