Images - How do I add images to the board's description: Difference between revisions From Online Manual

Jump to: navigation, search
 
(4 intermediate revisions by 3 users not shown)
Line 1: Line 1:
SMF has the ability to recognize and parse HTML or XHTML code in board's description. Just add something like this to your description:
== SMF 2.0.x and 2.1 ==
 
To add images to each board's description, edit the file '''index.css''' located in '''/Themes/YOURTHEME/css/''' and add the following for each image:
 
{{Code|1=
{{Code|1=
<img src="mypic.gif" width="70" height="17" alt="" />
#board_ID .info p:before {
content: "";
display: inline-block;
margin: 2px 5px 0 0;
vertical-align: middle;
background: url("mypic.png") no-repeat left center / 100% auto;
height: 30px;
width: 30px;
}
}}
}}
'''Where''':
 
*'''img="mypic.gif"''' - is the name of the image. If it is not located in the forum's base directory, it will be necessary to include the path to it (i.e. img="./Themes/default/images/mypic.gif");
Where:
*'''width="70"''' - is the width in pixels of the image.
* '''ID''': the board ID
*'''height="17"''' - is the height in pixels of the image.
* '''mypic.png''': the URL to your image.
*'''alt=""''' - is an alternative text to display if, for any reason, the image does not load correctly in visitors' browser. If the image has no real utility except aesthetics, it can be left empty. Otherwise it would be appropriate to explain in one word or two what the image represents.
* '''width''': the height of your image.
* '''height''': the width of your image.
 
"'''float: left;'''" or "'''float: right;'''" can be used to allow the text to wrap around the image. This will work better for larger images.
 
You may also use <img> HTML tags in the board description.
 
== SMF 2.1 ==
 
In SMF 2.1 [img] BBC tags can be used in the description.


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

Latest revision as of 13:08, 5 December 2018

SMF 2.0.x and 2.1

To add images to each board's description, edit the file index.css located in /Themes/YOURTHEME/css/ and add the following for each image:

#board_ID .info p:before {
	content: "";
	display: inline-block;
	margin: 2px 5px 0 0;
	vertical-align: middle;
	background: url("mypic.png") no-repeat left center / 100% auto;
	height: 30px;
	width: 30px;
}

Where:

  • ID: the board ID
  • mypic.png: the URL to your image.
  • width: the height of your image.
  • height: the width of your image.

"float: left;" or "float: right;" can be used to allow the text to wrap around the image. This will work better for larger images.

You may also use <img> HTML tags in the board description.

SMF 2.1

In SMF 2.1 [img] BBC tags can be used in the description.



Advertisement: