OS11 reactive web app CSS ".extra.css" stylesheet is overriding my app's them styles

In me reactive web app if I try to override some CSS in my theme stylesheet,my app's name is "BackOffice" the Them's name too is "BackOffice", so the stylesheet is "Backoffice.BackOffice.css" if I look at it in the inspector of Chrome.

My CSS changes are not taking effect and is overridden by the CSS in a file named "Backoffice.BackOffice.extra.css". I cannot see where this file comes from.

The only CSS I can see when I am in ServiceStudio are (the tabs at the top of the CSS viewer):

  1. The current screen's CSS
  2. My BackOficce Theme's CSS (simply called 'BackOffice')
  3. A tab called "BackOffice (Theme Editor)" - this I gather is edited when I use the Theme Editor
  4. The OutSystemsUI CSS

Neither of these CSS files contain what I see is in "Backoffice.BackOffice.extra.css" in the inspector, so this file is nowhere to be viewed in the ServiceStudio CSS editor. Where does it come from and why is it taking priority over my local app theme CSS?


Solution

Hi Elize,


it looks to me like this extra css source gets created based on your choices in the property pane of the Theme.

 So what exact css setting are you trying to change, and where are you doing it ?  I guess your best course of action if you want this at theme level, is to set above settings correctly, maybe the extra overrides the theme css, as you say...

And I would expect that setting them at screen level should also work.

Dorine

Solution

Hi Elize, 

try with css property when you write css add !important

like

.DummyCss{

font-color"#000000 !important;

}


It will override other css.


Regards

Rahul Sahu

Thank you Rahul, 

I would like to understand what is going on with the OutSystems CSS to do it correctly, I know I can do this but it is sort of a hack, will only cause problems down the line, rather want to udnerstand and do it correctly.


Dorine Boudry wrote:

Hi Elize,


it looks to me like this extra css source gets created based on your choices in the property pane of the Theme.

 So what exact css setting are you trying to change, and where are you doing it ?  I guess your best course of action if you want this at theme level, is to set above settings correctly, maybe the extra overrides the theme css, as you say...

And I would expect that setting them at screen level should also work.

Dorine

 Thanks Dorine, I think you are on to something, it was the max width, and there it is!