CSS classes are pointing to base theme

CSS classes are pointing to base theme

  

Hi,

I have overridden some css classes on my web screen but after execution, browser is still pointing to the css classes of base theme.


Please advice how to force to point to classes written on page.

Thanks and Regards,

Suraj Borade

Hi,

The screenshot is too small to show anything.

Most common reason for that behavior is having a more specific CSS rule in the theme ("If two selectors apply to the same element, the one with higher specificity wins").

 You can use "!important" for the class. Its overwritten your css
eg. 

.classname{ font-size:10px !important;}

If you can prevent important you should!


In any case, the order of classes (how Outsystems is generating them with the order off stylesheets)

(if you specify them as is)

1. Webblocks

2. Theme(s)

3. Page


So if you want to ovveride it nicely, you should alter it in your own-theme

if it's just needed on the page, add those classes in the page.


and beware of the specificity. SilkUI normally has something like ".desktop .TableRecords tr td "

so if you forget the .desktop, your style will lose.


You can see that quite nicely with devtools, how the hierarchy is set and what why wins.


Also don't forget to press Ctrl-F5 to refresh. Really annoying it's still needed sometimes...

And if you need to understand how specificity works and how to calculate it, this article is very nice.

Cheers,
Eduardo Jauch

By Inspect Element in the browser you can see which one is getting applied and which ones are getting override.

Shashank...

Hey Suraj,

There may be so many reasons behind this.

Can you please explain where you have written the CSS?

We can write CSS in theme level, page level and inline.

So The CSS prioritized inline css, then page level then espace level.

OR

if you have changed the CSS in theme level then you have to take the reference of the theme module to the current module where you want the CSS changes.

OR

Try to write !important to the attribute value that you have defined in your CSS.

OR

Clear the browser cache.


Regards

Pankaj Pant





Solution

Thanks everybody for the replies. But I had solved this problem but not sure in which module I faced this problem hence cannot tell exact solution used to solve this.

Solution

marked your own as solution then :)