Where does Outsystem define the "header" CSS class?

Hi,

I'm following exercise 11.2 of the training material. I managed to complete the exercise without a problem.

What I'm trying to understand is: 

Where in the Outsystems web application it defines the CSS class that goes in the <header> element?

I can see there is a <header> element in the resulting HTML and it has the CSS class "header". But suppose I want to change that class to "my-header", where would I do that , in Outsystems? 

I thought I'd see that defined in a web block in the widget tree  (LayoutMenuTop) but it's not there...

Thanks!





Solution

Hello! You need to go the layouts! On the Layouts, you can change the header to the class you want, but I would suggest not change the header class because it will break your screen because you will lose those CSS styles that there is already on the OutSystemsUI.

What I suggest is adding a new class and make like this on the header "header header-exception" and you just do changes on the header-exception based on the styles that there is already on the header.



if you want to change the header on the LayoutTopMenu, you go to the HTML element header and you can see the class


And you can add your CSS exception class

Let me know if you got it.

Best regards,

Márcio

The class is defined in the app base theme, and then is applied in the Header placeholder on the LayoutMenuTop webblock.

If you want to change that class, you can create your customHeader class and applied it on the webblock header placeholder instead of the default Header class. That way you can customize your header as you like.

Hope it helps.

Thank you, Marcio and Rafael.

I understand it now. That particular "header" CSS value is coming from:

OutSystemsUIWeb -> LayoutMenuTop

I can't change it directly because it's in the OutSystemsUIWeb module (a supported OS module). When I try to open that module, it offers a cloned version of it.

Ok I understand the idea behind adding a second CSS class like "header-exception". I'm not trying to accomplish anything, I just wanted to understand where that "header" value was coming from :-)

So, all good. Thanks again!

Yes, it's that Leo, because it was declared there. And the style is on OutSystemsUIWeb, and when I said about the exception is just to not lose that dependency with OutSystemsUIWeb, if you don't want none of that styles of the OutSystemsUIWeb, you can remove the "header" class and make one of your own like you said "my-header".

Glad that you could understand.

Feel free to ask!

Best regards,

Márcio

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.