How do I set the forum width From Online Manual

Revision as of 14:38, 8 September 2014 by Illori (talk | contribs)
Jump to: navigation, search

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 Settings > Theme Options and Preferences. The value can be set in percentage or pixels.


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 two 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?

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 -350px left margin is just an example, but must always be -50% of the fixed width to keep your forum centered.

style.css solutions for Core theme

To set your % width for the Core theme, 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 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, 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, 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, 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, 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, add this straight after the <body> tag in the relevant index.template.php:

And this just before the </body> tag:

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



Advertisement: