Widget style sheet, how to override default styles?
Application Type
Reactive
Service Studio Version
11.11.6 (Build 44614)

When Button widget added and placed into Layouts\LayoutTopMenu : Actions.

But Actions class from OutSystemsUI overrides (with the high priority) the width for the Widget:

.content-top-title > div:not([class*="ThemeGrid_Width"]), .content-top-actions > div:not([class*="ThemeGrid_Width"]) { width: 100%; }

Hi Iaroslav,

You can just copy Outsystems UICSS which part you want to override and put into current theme. Change in it and it will override outsystems UI css. I attach Screenshot and OML file for your help. you can check in that. 

Click here

boldText.oml

Will it override the whole CSS file or just the rules mentioned in the part I want?

Yes, It will apply for all .content-top-actions and .content-top-title child div where ThemeGrid_Width class is not applied. 


mvp_badge
MVP

Hi Iaroslav,

Please check here the order of CSS is processed.

Hope this helps you to understand how to solve your situation.

Hi Iaroslav,

You can just copy Outsystems UICSS which part you want to override and put into current theme. Change in it and it will override outsystems UI css. I attach Screenshot and OML file for your help. you can check in that. 

Click here

boldText.oml

Will it override the whole CSS file or just the rules mentioned in the part I want?

Yes, It will apply for all .content-top-actions and .content-top-title child div where ThemeGrid_Width class is not applied. 


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.