Luiz Vital
Rank: #3753
16Views
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
on 5th Feb
Copy link to comment
João Marques
Rank: #55
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
on 5th Feb
Copy link to comment
Kadu Borges
Rank: #510
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
on 5th Feb
Copy link to comment
Kadu Borges
Rank: #510

Hi Luiz, 

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

Best regards.

0
0
on 5th Feb
Copy link to comment
Luiz Vital
Rank: #3753

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
on 5th Feb
Copy link to comment
Kadu Borges
Rank: #510

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
on 5th Feb
Copy link to comment
João Marques
Rank: #55

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
on 5th Feb
Copy link to comment
Luiz Vital
Rank: #3753

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
on 5th Feb
Copy link to comment
João Marques
Rank: #55

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
on 5th Feb
Copy link to comment
Kadu Borges
Rank: #510
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
on 5th Feb
Copy link to comment
Luiz Vital
Rank: #3753

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
on 5th Feb
Copy link to comment
João Marques
Rank: #55

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
on 5th Feb
Copy link to comment
Luiz Vital
Rank: #3753

It's being applied the BaseTheme.

ScreenShot20210205at14.16.49.png

0
0
on 5th Feb
Copy link to comment
João Marques
Rank: #55
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
on 5th Feb
Copy link to comment
Kadu Borges
Rank: #510

Could you share your oml file?

0
0
on 5th Feb
Copy link to comment
Luiz Vital
Rank: #3753

Kadu and João, everything is working now.

Thank you very much forgot help!

ScreenShot20210205at14.44.04.png

0
0
on 5th Feb
Copy link to comment