How do I set the forum width: Difference between revisions From Online Manual

Jump to: navigation, search
No edit summary
No edit summary
 
(10 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{Version specific
{{Version specific
|version=2.0
|version=2.0
|content=In SMF 2.0 is possible to change the forum with by changing the '''forum width''' setting is ''[[Administration Center]] > Configuration > [[Themes and Layout]] > [[Themes and Layout#Theme Options and Preferences|Theme Options and Preferences]].
|content=In SMF 2.0 it is possible to change the forum width setting by going to ''[[SMF2.0:Administration Center|Administration Center]] > Configuration > [[SMF2.0:Current Theme|Current theme]]. The value can be set as a percentage or in pixels.  Note that you can change the forum width for themes other than the current one by clicking on the theme name on the [[SMF2.0:Themes_and_Layout#Theme_Settings|theme settings tab]]. If you need help with modifying the forum width for specific themes, please ask in the [http://www.simplemachines.org/community/index.php?board=34.0 Graphics and Templates] or [http://www.simplemachines.org/community/index.php?board=106.0 Theme Site Themes] boards.}}
The value can be set in percentage, pixels or any other [[wikipedia:CSS|CSS]] valid value.
}}
 


{{Version specific
{{Version specific
|version=1.1
|version=1.1
}}
}}
Let's start by looking at Themes/default/style.css:
Start by looking at Themes/default/style.css:
{{code|1=/* The main body of the entire forum. */
{{code|1=<nowiki>/* The main body of the entire forum. */
body
body
{
{
Line 16: Line 13:
margin: 0px;
margin: 0px;
padding: 12px 30px 4px 30px;
padding: 12px 30px 4px 30px;
}
}</nowiki>
}}
}}


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).
The SMF Default (Core) theme is set to fill your browser window with no margins. It does, however, have 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.)
While things are not 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 percentage or pixel width slightly to compensate for these.)


However, there are three further questions you should ask yourself at this point:
Two important considerations are the following:


*Do I want to set a new % width to expand and contract with the browser window?
*Whether you want to set a new percentage width to expand and contract with the browser window.
*Do I want to set a new fixed width regardless of the available browser window?
*Whether you 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'''
'''Some Notes about the Solutions'''
*Your forum is centered by default and will remain centered if you follow the instructions.
*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 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 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 '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 less than 50% of the fixed width to keep your forum centered.
*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'''
'''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):
To set your percentage width for the Core theme, search Themes/default/style.css for the code quoted above, reduce the 30px left and right padding to zero, and specify your own percentage left and right margins (note the shorthand style declaration order of top/bottom right/left):
{{code|1=/* The main body of the entire forum. */
{{code|1=<nowiki>/* The main body of the entire forum. */
body
body
{
{
Line 47: Line 41:
margin: 0 15%;
margin: 0 15%;
padding: 12px 0 4px 0;
padding: 12px 0 4px 0;
}
}</nowiki>
}}
}}


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:
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:
{{code|1=/* The main body of the entire forum. */
{{code|1=<nowiki>/* The main body of the entire forum. */
body
body
{
{
Line 58: Line 52:
padding: 12px 0 4px 0;
padding: 12px 0 4px 0;
width: 700px;
width: 700px;
}
}</nowiki>
}}
}}


'''style.css solutions for Babylon theme'''
'''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:
To set your percentage width for the Babylon theme, find a similar passage in Themes/babylon/style.css, and specify your own percentage left and right margins as above:
{{code|1=/* The main body of the entire forum. */
{{code|1=<nowiki>/* The main body of the entire forum. */
body
body
{
{
Line 70: Line 64:
margin: 0 15%;
margin: 0 15%;
padding: 0;
padding: 0;
}
}<nowiki>
}}
}}


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:
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:
{{code|1=/* The main body of the entire forum. */
{{code|1=<nowiki>/* The main body of the entire forum. */
body
body
{
{
Line 81: Line 75:
padding: 0;
padding: 0;
width: 700px;
width: 700px;
}
}</nowiki>
}}
}}


'''style.css solutions for Classic theme'''
'''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:
To set your percentage width for the Classic YaBB SE theme, find this passage in Themes/classic/style.css:
{{code|1=/* By default (td, body..) use Verdana in black. */
{{code|1=<nowiki>/* By default (td, body..) use Verdana in black. */
body, td, th
body, td, th
{
{
Line 93: Line 87:
font-size: small;
font-size: small;
font-family: verdana, sans-serif;
font-family: verdana, sans-serif;
}
}</nowiki>
}}
}}


And add this before or after it (do not worry, it does not conflict with it):
Add the following code before or after it (do not worry, it does not conflict with it):
{{code|1=/* The main body of the entire forum. */
{{code|1=<nowiki>/* The main body of the entire forum. */
body
body
{
{
margin: 0 15%;
margin: 0 15%;
padding: 0;
padding: 0;
}
}</nowiki>
}}
}}


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):
To set your fixed width for the Classic YaBB SE theme, find the same chunk of code, and add the following code before or after it (again, do not worry about conflicts):
{{code|1=/* The main body of the entire forum. */
{{code|1=<nowiki>/* The main body of the entire forum. */
body
body
{
{
Line 112: Line 106:
padding: 0;
padding: 0;
width: 700px;
width: 700px;
}
}</nowiki>
}}
}}


'''index.template.php solutions for any theme'''
'''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:
To set your percentage width for any of the three packaged themes, add this code straight after the <nowiki><body></nowiki> tag in the relevant index.template.php:
{{code|1=<div style="text-align: center;"><div style="width: 70%; margin: auto; text-align: left;">
{{code
|1=<nowiki><div style="text-align: center;"><div style="width: 70%; margin: auto; text-align: left;"></nowiki>
}}
}}


And this just before the </body> tag:
Also, add the following code just before the </body> tag:
{{code|1=</div></div>
{{code
|1=</div></div>
}}
}}
''(The outer container div is used to 'fool' the browser into centering the inner one while retaining the standard left text alignment.)''
''(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:
{{code|1=<nowiki><div style="position: absolute; left: 50%; width: 700px; margin-left: -350px;"></nowiki>
}}
And this just before the </body> tag:
{{code|1=<nowiki></div></nowiki>
}}
''(Centering through margin: auto; does not work in earlier versions of IE, but this trick does!)''


<noinclude>[[Category:FAQ]]</noinclude>
<noinclude>[[Category:FAQ]]</noinclude>

Latest revision as of 12:22, 12 September 2014

In SMF 2.0 it is possible to change the forum width setting by going to Administration Center > Configuration > Current theme. The value can be set as a percentage or in pixels. Note that you can change the forum width for themes other than the current one by clicking on the theme name on the theme settings tab. If you need help with modifying the forum width for specific themes, please ask in the Graphics and Templates or Theme Site Themes boards.

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. It does, however, have 30px of left and right padding (the style declaration order being top, right, bottom, left).

While things are not 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 percentage or pixel width slightly to compensate for these.)

Two important considerations are the following:

  • Whether you want to set a new percentage width to expand and contract with the browser window.
  • Whether you 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 less than 50% of the fixed width to keep your forum centered.

style.css solutions for Core theme

To set your percentage width for the Core theme, search Themes/default/style.css for the code quoted above, reduce the 30px left and right padding to zero, and specify your own percentage 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 percentage width for the Babylon theme, find a similar passage in Themes/babylon/style.css, and specify your own percentage left and right margins as above:

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

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:
{{code|1=<nowiki>/* 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 percentage 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;
}

Add the following code 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 the following code 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 percentage width for any of the three packaged themes, add this code 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;">

Also, add the following code 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: