Skip to Content (Press Enter)
2021-02-04 19-32-20
Luiz Vital
473Views
13Comments
Solved
CSS Override
Question
CSS

Hello everyone!
I'm new to Outsystems and I'm currently doing the online Traditional Development training.

I'm having difficulties to make the css override to work properly. 

Right now I'm working on the header and I'm applying some changes to the .header and .layout classes, but it's not affecting the final css.
I'm aware of the css precedences, I'm following all the steps in the tutorial, but still, it doesn't work.

I attached some photos of the OS CSS Editor and also the webpage with the Chrome inspect editor opened.

Can someone help me please?

 

photos.pdf
0
0
05 Feb 2021
Copy Link
2021-01-12 13-21-28
Kadu Borges
Solution

And you are right. But the case here is that the CSS that I showed to you is based on all the CSS that are being applied to a given component. I asked you to see yours in order to know what is missing.

Knowing this will help us to search for the problem.

See solution in context
1
0
05 Feb 2021
Copy Link
2018-10-29 08-31-03
João Marques
 
MVP
Solution

So the CSS to be applied on your theme should be ok with this:

.layout .header {
    background-color: #185f8d; 
}


I think your CSS written after a syntax error is being ignored because you have a syntax error over there:

.layout .header {
    background-image: url('img/HeaderMask.png'); 
    background-position-x: center;
    background-repeat: no-repeat;
}


You need to use a single quote around the url text as in the example above. And once again, you should use the .layout .header to match the one of OutSystems UI and therefore override that one.

See solution in context
1
0
05 Feb 2021
Copy Link
2021-01-12 13-21-28
Kadu Borges

Hi Luiz, 

Could you send me the CSS text in order to make possible to me to test this?

Best regards.

0
0
05 Feb 2021
Copy Link
2021-02-04 19-32-20
Luiz Vital

Hi Kadu,

This is the css I'm using to override the Main Theme.

The last class .loginusername is being applied properly.
But the .header is not.

I noticed just now that the Theme doesn't actually implement these classes that I'm using here, but they are implemented in the BaseTheme though.

Anyway, my css should override it right?

Thank you for the quick response!

[disabled="disabled"], [readonly="readonly"] {
    border: 0px;
}

.header {
    background-image: url(img/HeaderMask.png); 
    background-position-x: center;
    background-repeat: no-repeat;
}

.layout .header {
    background-color: #185f8d; 
}

.header .Menu_TopMenu.Menu_TopMenuActive { 
    border-bottom: 3px solid #ffffff;
}

.header .Menu_TopMenu > div > a{ 
    color: #ffffff;
} 

.fa-sign-out{
    color: #ffffff;
}

.Menu_TopMenuActive > div a, 
.Menu_TopMenuActive a:link, 
.Menu_TopMenuActive > div a:visited, 
.header .Menu_TopMenu > div > a:hover {
    color: #ffffff; 
}

.tablet .layout-top 
.Menu_TopMenus, 
.phone .layout-top .Menu_TopMenus {
    background-color: #16557f; 
}

.loginusername {
    color: #fff;
}



0
0
05 Feb 2021
Copy Link
2021-01-12 13-21-28
Kadu Borges

I have used what you sent me and It works fine. Comparing my code inspection with yours I noticed that the ".layout .header" is missing in yours. Take a look at you Layouts\LayoutManuTop Header styles and show me what you got.


styleproblempng.png
0
0
05 Feb 2021
Copy Link
2018-10-29 08-31-03
João Marques
 
MVP

Hi Luiz,


Probably there is a class more specific in OutSystems UI and therefore it is not overriden by your CSS.

You can easily spot this using Chrome Developer Tools to inspect your HTML.

For that right click the screen and choose the option Inspect or use the F12 shortcut.

After that, under the Elements tab, you can select the element using the arrow on the left top corner and selecting the element on the screen, like on the image below:


As you can see on the right panel, there is the CSS applied to that element and from where does it come from (WBP Theme in my case and Base Theme) and you will see the CSS applied top to bottom. And you can see why yours is being overriden by the default one.


Regards,
João

1
0
05 Feb 2021
Copy Link
2021-02-04 19-32-20
Luiz Vital

Hi João, thank you for your response! The Chrome Dev Tools is really a great help!

Kadu, you are right, the styles in the Web Block LayoutTopMenu is using the BaseTheme css default.
I thought that writing the css in the Theme panel would override it.
So I have to write it in the stylesheet of the specific WebBlock?

I thought that the Theme would have higher precedence over the Web Block css.

Thank you for your help!

0
0
05 Feb 2021
Copy Link
2018-10-29 08-31-03
João Marques
 
MVP

Hi Luíz,


It takes the higher precedence but if it is the same CSS class.


For instance, if you have a div with class "MyDiv" and have a button with class "MyButton", then your CSS for .MyDiv .MyButton will be more specific than only .MyButton, even if it is on OutSystems UI.

Using the Chrome Developer Tools, you can see why it is taking precedence and match the same specificity of your CSS instructions on your application Theme. If they match in specificity, then our Theme will take precedence over the OutSystems UI.


To complement my answer, the order of CSS goes like this:



Regards,
João

1
0
05 Feb 2021
Copy Link
2021-01-12 13-21-28
Kadu Borges
Solution

And you are right. But the case here is that the CSS that I showed to you is based on all the CSS that are being applied to a given component. I asked you to see yours in order to know what is missing.

Knowing this will help us to search for the problem.

1
0
05 Feb 2021
Copy Link
2021-02-04 19-32-20
Luiz Vital

I think I'm doing something else wrong here because my Header placeholder in the LayoutMenuTop Web Block shows a message saying "Editing is disabled because this widget doesn't have a Style Classes property".

And the classes that are being applied come from the BaseTheme.

ScreenShot20210205at14.08.51.png
0
0
05 Feb 2021
Copy Link
2018-10-29 08-31-03
João Marques
 
MVP

Can you inspect with Chrome Developer Tools, select the Header element and show us the classes that are being applied to that element?

0
0
05 Feb 2021
Copy Link
2021-02-04 19-32-20
Luiz Vital

It's being applied the BaseTheme.

ScreenShot20210205at14.16.49.png
0
0
05 Feb 2021
Copy Link
2018-10-29 08-31-03
João Marques
 
MVP
Solution

So the CSS to be applied on your theme should be ok with this:

.layout .header {
    background-color: #185f8d; 
}


I think your CSS written after a syntax error is being ignored because you have a syntax error over there:

.layout .header {
    background-image: url('img/HeaderMask.png'); 
    background-position-x: center;
    background-repeat: no-repeat;
}


You need to use a single quote around the url text as in the example above. And once again, you should use the .layout .header to match the one of OutSystems UI and therefore override that one.

1
0
05 Feb 2021
Copy Link
2021-01-12 13-21-28
Kadu Borges

Could you share your oml file?

0
0
05 Feb 2021
Copy Link
2021-02-04 19-32-20
Luiz Vital

Kadu and João, everything is working now.

Thank you very much forgot help!

ScreenShot20210205at14.44.04.png
0
0
05 Feb 2021
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.