xen - Fixed Width Style

[Shelley]

I actually use 992px which is the absolute maximum which can still be displayed on a 1024 screen (with scrollbars).

Funny really, with my added graphic border mine is exactly 992px.

 

[Mikey]

mine is still 800px with a massive beard.

Just saying.

 

[Robert F Schmitz]

mine is still 800px with a massive beard.

Just saying.

ROFL Thanks for making me laugh a bunch this afternoon Mikey.

 

[erich37]

margin: 0 auto;​

or​

margin: auto;​

???​

 

[Peggy]

margin: 0 auto;​

or​

margin: auto;​

???​

There's an example on the same page as these settings. It shows you what to put in there for fixed width.

It is auto;

 

[Paul B]

http://xenforo.com/community/threads/xen-fixed-width-style.6312/#post-203598

 

[erich37]

yeah, that´s why am asking:

in the example within ACP it says:
margin: auto;

Brogan says:
margin: 0 auto;

 

[James]

You should use margin: 0 auto;
The 0 represents top and bottom and the auto represents left and right. This basically translates into "No top/bottom margins, equal margins on the left and right"

 

[mrGTB]

Actually... its with simple mathematics. I have been running forums for years, changing widths, trying to find that sweet spot. I eventually settled on 990px just a few months ago with the switch to XenForo... Allow me to explain why.

In most browsers, the width of the scrollbar is 18-21px. So in a 1024 width monitor (the baseline for websites these days), this immediately means you must throw out 21px, giving you a finite width at most of 1003. No website should EVER be longer than this (or if you do longer than this, allow resizing using max-width, min-width).

If you look at the default XenForo width, it lists 933px (margin: 0px 35px. This is way too small, that is a full 70px you are completely wasting... thats 7% of your very valuable screen estate. It should definitely be increased. And overtime, I have determined that you can increase the width to 990px, and still retain a semblance of margins.

This is how I do it on my forum:

#content
{
padding-left: 10px;
padding-right: 10px;
}
.pageWidth { min-width: 990px; max-width: 1200px; width: auto; margin: 0 auto; }

As you can see, it sets the width of the page as 990px, and is expandable up to 1200px. It also centers the page by margins. It also pads the content box 10px on each side in order to retain the margins. You can see how this works on http://www.8wayrun.com/

Also, 990px is pretty much what you would need to use XenMedio's 640x360 media player with stock skins.

How exactly did you change this. I see the code you listed above but have no idea where you added it?

 

[Paul B]

What are you trying to do, create a fixed width style?
You just do that in Style Properties.

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:
width: 992px;
margin: 0 auto;
Change the values to suit.

http://xenforo.com/community/threads/frequently-asked-questions.5183/#post-181037

If you want a style which has min and max widths, just change the code to suit.

 

[mrGTB]

I've done that way for a fixed width, I saw you guide before on it. I just wasn't sure what Jaxel was talking about saying he uses this code.

#content
{
padding-left: 10px;
padding-right: 10px;
}
.pageWidth { min-width: 990px; max-width: 1200px; width: auto; margin: 0 auto; }

 

[Paul B]

That's a fluid style with min and max widths.

 

[TheSalt]

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 (change the values to suit):

width: 980px;
margin: 0 auto;​

http://xenforo.com/community/threads/frequently-asked-questions.5183/#post-181037

I'm using these instructions but it's not centering my page. Everything is aligned left. Is there a way to center?

 

[FredC]

Remove the margin and padding fields. I believe..

 

[TheSalt]

@FredC Thank you. I tried it without luck. Any other ideas?

 

[FredC]

@FredC Thank you. I tried it without luck. Any other ideas?

max-width: 980px;

Heres mine..

max-width: 990px;
margin: 0 auto;
box-sizing: border-box;

 

[TheSalt]

@FredC That worked! Thanks a bunch! Its a little messy right now as I'm making some changes but here is my ulr.

www.californiareefs.com

 

[DRE]

I only create fluid styles for my site because I have Fixed Width as a Preference option.

http://xenforo.com/community/resour...ce-and-on-any-fluid-style-page-xenporta.1153/

Actually... its with simple mathematics. I have been running forums for years, changing widths, trying to find that sweet spot. I eventually settled on 990px just a few months ago with the switch to XenForo... Allow me to explain why.

In most browsers, the width of the scrollbar is 18-21px. So in a 1024 width monitor (the baseline for websites these days), this immediately means you must throw out 21px, giving you a finite width at most of 1003. No website should EVER be longer than this (or if you do longer than this, allow resizing using max-width, min-width).

If you look at the default XenForo width, it lists 933px (margin: 0px 35px. This is way too small, that is a full 70px you are completely wasting... thats 7% of your very valuable screen estate. It should definitely be increased. And overtime, I have determined that you can increase the width to 990px, and still retain a semblance of margins.

This is how I do it on my forum:

#content
{
padding-left: 10px;
padding-right: 10px;
}
.pageWidth { min-width: 990px; max-width: 1200px; width: auto; margin: 0 auto; }

As you can see, it sets the width of the page as 990px, and is expandable up to 1200px. It also centers the page by margins. It also pads the content box 10px on each side in order to retain the margins. You can see how this works on http://www.8wayrun.com/

Also, 990px is pretty much what you would need to use XenMedio's 640x360 media player with stock skins.

Cool! *adds to resource* http://xenforo.com/community/resour...d-style-page-xenporta.1153/update?update=8434