XenForo Tutorial

This tutorials explains how to configure fixed width layout and content wrapper.

What are fixed and fluid layouts, are they responsive?

Fluid layout is when forum page takes all available space:


Fixed width layout is when forum page does not expand past specific width:

In XenForo styles available on this website fixed width layouts are always responsive. If browser window is smaller than width setting, forum scales down to whatever space is available.

How to configure fixed or fluid layout?

Most styles have fluid layout enabled by default. To enable or disable fixed width, go to admin panel -> styles -> style properties. Select "Content Wrapper, Page Width" style properties group:


Then you will see option to configure maximum page width:


If you want to enable fixed width layout, set value to maximum page width value. Do not set it to number lower than 800px or bad things will happen.

If you want to disable fixed width layout, set value to empty.

Content wrapper

Content wrapper option allows you to use different background outside of forum and inside forum. Look at this screenshot as example:


To enable content wrapper check option to enable it. It is below fixed width option:

How to customize page layout

You will probably want to customize page background color and/or assign image to it. To do that click "Page Layout" option on left side:


then click on background color to change background color. If you want to set custom background image, paste background image URL in image option on right side of background color.

Additionally you can configure what elements are included inside forum page wrapper. On screenshot above header (logo) and navigation are displayed outside of page wrapper. There are options to include them in page wrapper as well as similar option for footer. You can find those options below option that enables content wrapper:

Problems

If you have any questions or ran into problems, please post your questions on support forum.