Responsive layout without header fix

Responsive layout without header fix

  

Hi, 

I have a requirement to create layout with no fix positioned header. Is there any default theme available? or how can i modify existing vanilla theme layout? 

Thanks & Regards 

DM singh 

Solution

Hello DM,

For what I know, all the "default" templates available from OutSystems (Lisbon, Dublin, Vanilla, etc) have a Header or a Menu that makes for header.

If you need a layout without a header, you have some options.

The easiest one (in my opinion), is just deactivate the Header web block option in the properties of your template.


Just set the Header option to (None), and no webblock for header will be inserted in the web screens when you create them. 

Of course, if the template you choose have a menu that you don't want to use also, you will have to disable it. And, eventually add CSS to overwrite the CSS that exists in the layout to get rid of any style applied to the layout you choose.

You can also create your own layout. The easiest would be to "copy" a layout from the theme you want to use and change it accordingly to what you need, setting the layout property of the theme to be the one you created.

You can also create your own layout from scratch. In this case, remember to include the WidgetsForLayout web block in your layout, if you are using Silk UI.

The links below are for version 9, but at least for web, the way of doing things relative to themes didn't change that much.

https://www.outsystems.com/help/servicestudio/9.0/User_Interface/Create_a_Theme.htm

https://www.outsystems.com/help/servicestudio/9.0/User_Interface/Design_Screen_Layouts.htm


Maybe someone else have a better solution.
Hope this helps :)

Cheers,
Eduardo


Solution

Hey DM,

If you just want to change the header from being fixed to something else, like still have the header but not have it follow you down the page, you can likely just target the header with CSS. Inspecting the header area in the browser you can find out which CSS code is set to make the header "fixed". You can then override this in your own stylesheet and set it to something else like "static".


More on CSS positioning:
https://www.w3schools.com/cssref/pr_class_position.asp

An explanation of how you might make a fixed header, which may help you understand them a bit more and then manipulate them:
http://cssreset.com/creating-fixed-headers-with-css/


-S