XF 1.4 Centreing in the browser window.

[VinceG]

Hello People.

I am a new xenforo user and purchased a license only yesterday.

I have been playing about with the settings to try and get my "forum" to have a similar look and feel to my wordpress site.

Here is my wordpress site http://www.goodbyecancer.co.uk and the forum can be found at http://www.goodbyecancer.co.uk/forum

I have managed to get the background image and the header image sorted but would like the forum centred on the browser window just like the wordpress one is. Please can someone tell me how I can do this? I tried in vain for a couple of hours yesterday.

 

[Paul B]

See point 1 here: https://xenforo.com/community/threads/frequently-asked-questions.5183/#post-181037

It does actually show as centred for me in Chrome.

 

[VinceG]

1. How do I create a fixed width style?

In the ACP -> Styles -> Style Properties -> General: Page Width Controller, enter the following settings in the Miscellaneous field:
Code:
width: 992px;
margin: 0 auto;

Thanks borgan, I have done as you said in the FAQ, but it has now moved left

 

[VinceG]

I have tried in vain for another couple of hours tonight, someone must know?

 

[EQnoble]

I have tried in vain for another couple of hours tonight, someone must know?

You have set a width on your body tag and while I wouldn't go about setting width that way (xenforo has a width controller class you can use) if you only wanted to add a simple rule to make it work you could probably just add margin auto.

Currently your body has this..

body {
color: rgb(20, 20, 20);
font-family: "Trebuchet MS",Helvetica,Arial,sans-serif;
line-height: 1.28;
width: 988px;
word-wrap: break-word;
}

If you add margin like this it should work with the changes you have made though you would have to test it yourself.

body {
color: rgb(20, 20, 20);
font-family: "Trebuchet MS",Helvetica,Arial,sans-serif;
line-height: 1.28;
margin: auto;
width: 988px;
word-wrap: break-word;
}

​

 

[Lawrence]

I have tried in vain for another couple of hours tonight, someone must know?

AdminCp->Styles->yourStyle->Style Properties: General-> Page Width Controller:
For the 4 margin blocks, set Margin Top: 0 Margin Right: auto Margin Bottom: 0 Margin Left: auto
Add to the additional CSS block:
_width: 998px;
_margin: 0 auto;
max-width: 998px;
box-sizing: border-box;

 

[VinceG]

Thanks, putting margin; auto; into the AdminCp->Styles->yourStyle->Style Properties: General->body: fixed my problem, cheers EQnoble