How do I set the forum width

In SMF 2.0 is possible to change the forum with by changing the forum width setting is Administration Center > Configuration > Themes and Layout > Theme Options and Preferences. The value can be set in ercentage, pixels or any other CSS valid value.

Let's start by looking at Themes/default/style.css:

/* The main body of the entire forum. */
body
{
	background-color: #E5E5E8;
	margin: 0px;
	padding: 12px 30px 4px 30px;
}

The SMF Default (Core) theme is set to fill your browser window with no margins but 30px of left and right padding (the style declaration order being top, right, bottom, left).

While things aren't quite so obvious in the Babylon and Classic YaBB SE themes, the changes necessary to reset the width are no more complicated. (Some scattered margin/padding settings in these themes have been ignored here for simplicity, but you can normally increase your % or px width slightly to compensate for these.)

However, there are three further questions you should ask yourself at this point:

• Do I want to set a new % width to expand and contract with the browser window?
• Do I want to set a new fixed width regardless of the available browser window?
• Do I still care if it's centered in IE 5 and 5.5?

Some notes about the solutions

• Your forum is centered by default and will remain centered if you follow the instructions.
• The 70% width and 15% left and right margins are just examples and you should substitute your own figures.
• The 700px fixed width is just an example and you should substitute your own figure.
• The 'style.css' and 'index.template.php' solutions are alternatives and should not both be applied at the same time.
• The 'index.template.php' solutions (which actually apply inline styles to new container divs) are necessary for IE 5 and 5.5 but do not compromise later browsers.
• The -350px left margin is just an example, but must always be -50% of the fixed width to keep your forum centered.
• Please note that the Help files already 'break' the width of a vanilla SMF installation in IE 5 and 5.5 (solution hopefully coming)!

style.css solutions for Core theme

To set your % width for the Core theme (ignoring problems with IE 5 and 5.5), search Themes/default/style.css for the code quoted above, reduce that 30px left and right padding to 0 and specify your own % left and right margins (note the shorthand style declaration order of top/bottom right/left):

/* The main body of the entire forum. */
body
{
	background-color: #E5E5E8;
	margin: 0 15%;
	padding: 12px 0 4px 0;
}

To set your fixed width for the Core theme (ignoring problems with IE 5 and 5.5), add your width to the same style rule, set the left and right margins to auto and remove the left and right padding as above:

/* The main body of the entire forum. */
body
{
	background-color: #E5E5E8;
	margin: 0 auto;
	padding: 12px 0 4px 0;
	width: 700px;	
}

style.css solutions for Babylon theme

To set your % width for the Babylon theme (ignoring problems with IE 5 and 5.5), find a similar passage in Themes/babylon/style.css and specify your own % left and right margins as above:

/* The main body of the entire forum. */
body
{
	background-color: white;
	margin: 0 15%;
	padding: 0;
}

To set your fixed width for the Babylon theme (ignoring problems with IE 5 and 5.5), find a similar passage in Themes/babylon/style.css, add your width to the same style rule and set the left and right margins to auto as above:

/* The main body of the entire forum. */
body
{
	background-color: white;
	margin: 0 auto;
	padding: 0;
	width: 700px;
}

style.css solutions for Classic theme

To set your % width for the Classic YaBB SE theme (ignoring problems with IE 5 and 5.5), find this passage in Themes/classic/style.css:

/* By default (td, body..) use Verdana in black. */
body, td, th
{
	color: #000000;
	font-size: small;
	font-family: verdana, sans-serif;
}

And add this before or after it (do not worry, it does not conflict with it):

/* The main body of the entire forum. */
body
{
	margin: 0 15%;
	padding: 0;
}

To set your fixed width for the Classic YaBB SE theme (ignoring problems with IE 5 and 5.5), find the same chunk of code and add this before or after it (again, do not worry about conflicts):

/* The main body of the entire forum. */
body
{
	margin: 0 auto;
	padding: 0;
	width: 700px;	
}

index.template.php solutions for any theme

To set your % width for any of the three packaged themes (taking IE 5 and 5.5 into account), add this straight after the <body> tag in the relevant index.template.php:

<div style="text-align: center;"><div style="width: 70%; margin: auto; text-align: left;">

And this just before the </body> tag:

</div></div>

(The outer container div is used to 'fool' the browser into centering the inner one while retaining the standard left text alignment.)

To set your fixed width for any of the three packaged themes (taking IE 5 and 5.5 into account), add this straight after the <body> tag in the relevant index.template.php:

<div style="position: absolute; left: 50%; width: 700px; margin-left: -350px;">

And this just before the </body> tag:

</div>

(Centering through margin: auto; does not work in earlier versions of IE, but this trick does!)