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

Jump to: navigation, search
No edit summary
mNo edit summary
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 ''[[SMF2.0:Administration Center|Administration Center]] > Configuration > [[SMF2.0:Themes and Layout|Themes and Layout]] >  [[SMF2.0:Themes_and_Layout#Theme_Settings|Theme Settings]] > [[SMF2.0: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:Themes and Layout|Themes and Layout]] >  [[SMF2.0:Themes_and_Layout#Theme_Settings|Theme Settings]] > [[SMF2.0:Themes and Layout#Theme Options and Preferences|Theme Options and Preferences]]. The value can be set as a percentage or pixels.}}
The value can be set in percentage or pixels.
}}
 


{{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=/* The main body of the entire forum. */
body
body
Line 19: Line 16:
}}
}}


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


'''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 -350px left margin is just an example, but must always be -50% of the fixed width to keep your forum centered.
*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'''
'''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):
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=/* The main body of the entire forum. */
body
body
Line 47: Line 44:
}}
}}


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:
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=/* The main body of the entire forum. */
body
body
Line 60: Line 57:
'''style.css solutions for Babylon theme'''
'''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:
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=/* The main body of the entire forum. */
body
body
Line 70: Line 67:
}}
}}


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:
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=/* The main body of the entire forum. */
body
body
Line 83: Line 80:
'''style.css solutions for Classic theme'''
'''style.css solutions for Classic theme'''


To set your % width for the Classic YaBB SE theme, 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=/* By default (td, body..) use Verdana in black. */
body, td, th
body, td, th
Line 93: Line 90:
}}
}}


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=/* The main body of the entire forum. */
body
body
Line 102: Line 99:
}}
}}


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):
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=/* The main body of the entire forum. */
body
body
Line 114: Line 111:
'''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, 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 <body> 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=<div style="text-align: center;"><div style="width: 70%; margin: auto; text-align: left;">
}}
}}


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>
}}
}}

Revision as of 14:34, 10 September 2014

 The following applies only to version 2.0

In SMF 2.0 it is possible to change the forum width setting by going to Administration Center > Configuration > Themes and Layout > Theme Settings > Theme Options and Preferences. The value can be set as a percentage or pixels.

The following applies only to version 1.1

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;
}

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 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:

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.)


Retrieved from "https://wiki.simplemachines.org/w/index.php?title=How_do_I_set_the_forum_width&oldid=27714"


											

										

									


									

									
									

								

							

						

					

					
					

				

			

			
		

		
Advertisement: