CSS applied in the wrong order.

CSS applied in the wrong order.

  

I have applied a CSS tag to the leftmost .css file, however the DublinTheme overrides this rule. I have tried a few different approaches, but have not been able to change the ordering of the CSS rules. 

Does anyone have any insight as to why DublinTheme.css is overriding HeaderConf.css and TEB.css? This has been an issue for many elements in my app. Thanks. 

Hello William,

The idea behind web blocks and blocks is that they can be used in different places, and must blend with the style in the place where they are used.

Because of this, web blocks CSS is the first to be loaded, so that anything else can overwrite it.

So, in order to you to force a different style in a web block, you need to put that style in the application's theme, or in the web block, guarantee that you have a more specific css selector (specificity has precedence over order).

Cheers

EDIT. As a personal view, I prefer not to use !important, unless to overcome another one. It has a potential to cause much more harm than it is worth.

Eduardo, 

Thank you for your continued support. This style was already in the application's theme. However, after walking through your response I have learned that the style does not appear to be present when viewing the application from the browser. On the left you can see the style present in OutSystems, but on the right using Chrome DevTools this style is not present in the browser. Any idea why it is not going through? 


 

Hi William,

The thing that occours to me right now is the following.

You have a "Theme" module and a "End User" module that consumes it.
You change the "Theme" CSS and publishes it. The CSS file name changes.
But if you don't refresh the dependences in the Consumer ("End User" module), it will still use the old file name.
The browser, instead of downloading the new file, finds one with the same name in the cache and use it.

A Refresh of the page (Ctrl+F5) should solve the problem, as the file will be downloaded now and the name does not really matter for this.

So, Publish the consumer, or force the page to download the files (instead of bring them from the cache).

Cheers.