Wikipedia
Search Wikipedia:

August 2017
MonTueWedThuFriSatSun
 123456
78910111213
14151617181920
21222324252627
28293031   

Calendar Calendar

Free Hit Counter

Current date/time is Wed Aug 16, 2017 4:50 pm

BBCode Guide

Introduction
What is BBCode?
Quoting and outputting fixed-width text
Quoting text in replies
Outputting code or fixed width data

Introduction

What is BBCode?
BBCode is a special implementation of HTML. Whether you can actually use BBCode in your posts on the forum is determined by the administrator. In addition, you can disable BBCode on a per post basis via the posting form. BBCode itself is similar in style to HTML: tags are enclosed in square brackets [ and ] rather than < and > and it offers greater control over what and how something is displayed. Depending on the template you are using you may find adding BBCode to your posts is made much easier through a clickable interface above the message area on the posting form. Even with this you may find the following guide useful.
Back to top Back to top

Text Formatting

How to create bold, italic, underlined and striked text
BBCode includes tags to allow you to quickly change the basic style of your text. This is achieved in the following ways:
  • To make a piece of text bold enclose it in:
    Code:
     [b]Hello[/b]
    Result: Hello

  • For underlining use:
    Code:
     [u]Hello[/u]
    Result: Hello

  • To italicise text use:
    Code:
    [i]Great![/i]
    Result: Great!

  • To strike some text:
    Code:
     [strike]test[/strike]
    Result: test
Back to top Back to top

How to change the text colour or size
To alter the color or size of your text the following tags can be used. (Keep in mind that how the output appears will depend on the viewers browser and system):
  • To change your text color, you can specify a known color (ex: red, blue, yellow, etc.), or an hexadecimal color code (ex: #FFFFFF, #000000):
    Code:
    [color=red]Red color (red)[/color] or [color=#FF0000]Red color (#FF0000)[/color]
    Result: Red color (red) or Red color (#FF0000)

  • To change your text size, you must specify the text size in pixel, from 1 (so small you won't see it) to 29 (very huge):
    Code:
    [size=9]SMALL[/size] or [size=24]HUGE[/size]
    Result: SMALL or HUGE

  • To change the font, you must specify a recognized font (ex: Verdana, Arial) if the user hasn't got the font, a default one will be displayed :
    Code:
    [font=Arial]Arial font[/font] or [font=Comic Sans Ms]Comic sans MS font[/font]
    Result: Arial font or Comic sans MS font
Back to top Back to top

Can I combine formatting tags?
Yes, of course you can; for example to get someones attention you may write:
Code:
[size=18][color=red][b]LOOK AT ME ![/b][/color][/size]
will give :LOOK AT ME !

Although, we recommend you not to use much text as above ! Remember that it's your task to correctly shut the tags. The following example is incorrect:
Code:
[b][u]This is incorrect[/b][/u]
The correct form is :
Code:
[b][u]This is correct[/u][/b]
Back to top Back to top

Quoting and outputting fixed-width text

Quoting text in replies
There are two ways you can quote text: with a reference or without.
  • The reference example, to quote a post wrote by Mr. Blobby, you must enter:
    Code:
    [quote="Mr. Blobby"]The text wrote by Mr. Blobby must be placed here[/quote]
    Result : [quote="Mr. Blobby"]The text wrote by Mr. Blobby must be placed here[/quote]
    Remember that you must include the quotation marks "" around the name you are quoting -- they are not optional.

  • The second method allows you to blindly quote something. To use it :
    Code:
    [quote]Blind quote[/quote]
    Result :
    Blind quote
Back to top Back to top

Outputting code or fixed width data
If you want to output a piece of code (HTML or other) or in fact anything that requires a fixed width with a Courier-type font, you must use the following BBCode :
Code:
[code]echo "This is some code";[/code]
Result :
Code:
echo "This is some code";

This is exactly what we use in this FAQ to show you all the BBCodes you can use.
Back to top Back to top

Generating lists

Creating an Un-ordered list
An un-ordered list produces a list which entries are one underneath the others and indented with a bullet character.
  • To create an un-ordered list, use:
    Code:
    [*]Red[*]Blue[*]Yellow[/list]
    Result :
    • Red
    • Blue
    • Yellow

Back to top Back to top

Creating an Ordered list
The second list type gives you the control on what will be displayed before each entry. To create an ordered list, you've got two possibilites :
  • A numbered list :
    Code:
    [list=1][*]Do shopping[*]Buy a new computer[*]Yell to its computer when it crashes[/list]
    Result :
    1. Do shopping
    2. Buy a new computer
    3. Yell to its computer when it crashes

  • An alphabetical list :
    Code:
    [list=a][*]First possible answer[*]Second possible answer[*]Third possible answer[/list]
    Result :
    1. First possible answer
    2. Second possible answer
    3. Third possible answer
Back to top Back to top

Creating Links

Linking to another site
The BBcode supports several methods to create links, most commonly known under URLs.
  • First method, to create for an example a link to forumotion.com you must use :
    Code:
    [url=http://www.forumotion.com/]Visit forumotion.com ![/url]
    Result : [url=http://www.forumotion.com/]Visit forumotion.com ![/url].
    You'll notice that the link opens a new window, by this way the user can still browse the forums if he wants to.

  • Second method, if you want the link to display directly the URL :
    Code:
    [url]http://www.forumotion.com/[/url]
    Result : [url]http://www.forumotion.com/[/url]

  • Third method, this forum owns a functionality called 'Magic Links', that will convert automatically an URL into a clickable link, without needing to insert a BBCode tag nor http://. For an example, by typing
    Code:
    www.forumotion.com
    in your message, it will be automatically converted into a link : [url=http://www.forumotion.com/]www.forumotion.com[/url].
Back to top Back to top

Showing images in posts

Adding an image to a post
The BBCode incorporates a tag for including images in your posts. Two very important things to remember when using this tag are: many users do not appreciate lots of images being shown in posts and second, the image you display must already be available on the Internet (it cannot exist only on your computer, for example, unless you run a webserver!). You can upload for free your images on internet by an image hosting such as [url=http://www.servimg.com/]www.servimg.com[/url]. To display an image, you need to proceed as following :
Code:
[img]http://illiweb.com/fa/i/forumactif.png[/img]
Result :
.
You can place an image into a link if you wish (by insuring yourself that the opening and closure tags are correct), for an example :
Code:
[url=http://www.forumotion.com/][img]http://illiweb.com/fa/i/forumactif.png[/img][/url]
Result :
[url=http://www.forumotion.com/][/url]
Back to top Back to top

Text positioning
Four positions possibilities are proposed :
  • Left alignment
    Code:
    [left]text aligned to the left[/left]
    Result : text aligned to the left

  • The centering :
    Code:
    [center]Text centered[/center]
    Result :
    Text centered


  • Right alignment :
    Code:
    [right]Text aligned to the right[/right]
    Result :
    Text aligned to the right

  • The justification :
    Code:
    [justify]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ac tortor eu dolor mollis malesuada. Nam arcu dui, cursus a, ullamcorper ut, fringilla nec, velit. Duis tempor arcu eu orci. Ut vehicula massa eu est. Sed ac odio. Integer dictum eros. Etiam facilisis sem non lacus. Donec volutpat ligula ac est. Aliquam erat volutpat. Pellentesque justo tellus, porta et, interdum et, consequat sit amet, eros.[/justify]
    Résultat :
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ac tortor eu dolor mollis malesuada. Nam arcu dui, cursus a, ullamcorper ut, fringilla nec, velit. Duis tempor arcu eu orci. Ut vehicula massa eu est. Sed ac odio. Integer dictum eros. Etiam facilisis sem non lacus. Donec volutpat ligula ac est. Aliquam erat volutpat. Pellentesque justo tellus, porta et, interdum et, consequat sit amet, eros.

Back to top Back to top

Insert media into messages

Add a flash animation to a message
You've got two methods to insert a flash animation in your message.
  • First method with the flash BBcode:
    Code:
    [flash(200,40)]http://illiweb.com/fa/i/forumotion.swf[/flash]
    Result :

  • Second method with the embed-flash BBcode :
    Code:
    [embed-flash(200,40)]http://illiweb.com/fa/i/forumotion.swf[/embed-flash]
    Result :
Don't forget to indicate the flash animation's width and the height between the brackets of the used BBcode tag.
Back to top Back to top

Add a movie to a message
You can post in your messages videos that you encountered on one of those two sites :
  • The first site is [url=http://youtube.com]Youtube[/url]. You must copy the code in the Embed field and do as following :
    Code:
    [youtube]code - Embed[/youtube]

  • The second site is [url=http://www.dailymotion.com]Dailymotion[/url]. You must copy the code in the portable player field and do as following:
    Code:
    [dailymotion]code - lecteur portable[/dailymotion]
Don't forget to copy the code between the two bbcodes tags corresponding at the host you chose.
Back to top Back to top

Tables

Create a table in a message
The BBCode to place a table in a message is identical to the tags used in HTML. To create a table, you need to start by creating a tag 'table' then insert a 'tr' row. This row can contain one or several cells 'td', and a table can contain several 'tr' rows.
  • For an example, to create a two rows and three columns in a table, type the following:
    Code:
    [table][tr][td] Row 1 - Cell 1 [/td] [td] Row 1 - Cell 2 [/td] [td] Row 1 - Cell 3 [/td][/tr] [tr][td] Row 2 - Cell 1 [/td] [td] Lign 2 - Cell 2 [/td] [td] Row 2 - Cell 3 [/td][/tr][/table]
    Result :
    Row 1 - Cell 1 Row 2 - Cell 2 Row 2 - Cell 3
    Row 2 - Cell 1 Row 2 - Cell 2 Row 2 - Cell 3

  • You can also add styles to in the BBcode 'table'. These are identical to those used for HTML. You can for an exemple add a border to the table above thanks to the 'border' attribute.
    Code:
    [table border=1] [tr][td] Lign 1 - Cell 1 [/td] [td] Lign 1 - Cell 2 [/td] [td] Lign 1 - Cell 3 [/td][/tr] [tr][td] Lign 2 - Cell 1 [/td] [td] Lign 2 - Cell 2 [/td] [td] Lign 2 - Cell 3 [/td][/tr][/table]
    Result :[table border=1] [tr][td] Lign 1 - Cell 1 [/td] [td] Lign 1 - Cell 2 [/td] [td] Lign 1 - Cell 3 [/td][/tr] [tr][td] Lign 2 - Cell 1 [/td] [td] Lign 2 - Cell 2 [/td] [td] Lign 2 - Cell 3 [/td][/tr][/table]
    Other attributes are available: cellspacing, cellpadding, width, etc.
Tables need to be used with caution, please pay attention to the tag opening and closure. If an opening or closure error is made, you may not obtain the effect that you want.
Back to top Back to top

Scrolling text

Make a message scroll horizontally
If you wish to make a text scroll horizontally, you need to use the following BBcode :
Code:
[scroll]My message[/scroll]
Result : My message
Back to top Back to top

Make a message scroll vertically
The second way to make a text scroll is vertically, with the following BBcode :
Code:
[updown]My message[/updown]
Result : My message
Back to top Back to top

Appearance BBcodes

Insert a lign
If you wish to aerate your message by inserting ligns, you can use this BBcode :
Code:
My first message[hr]My second message
Result :
My first messageMy second message

Back to top Back to top

Put in index or in exposure
If you wish to put text in index or exposure (useful for maths), two BBcodes are proposed :
  • First method, to put in index :
    Code:
    x[sub]a+b[/sub]
    Result : x

  • Second method, for the exposure :
    Code:
    2[sup]nd[/sup] day
    Result : 2nd day

Back to top Back to top

Effects BBcodes
Four BBcodes producing effects on your messages are at your disposal. Although, this codes are only compatible under Internet Explorer with a phpBB2 forum.
  • The first is a vertical mirror effect (Vertical symmetry) on the text :
    Code:
    [flipv]Vertical mirror effect[/flipv]
    Result : Vertical mirror effect 

  • The second is a horizontal mirror effect (horizontal symmetry) on the text :
    Code:
    [fliph]horizontal mirror effect[/fliph]
    Result : horizontal mirror effect 

  • If you wish a blur effect in your text, you can use this BBcode :
    Code:
    [blur]Blurred message[/blur]
    Result : Blurred message

  • The last BBcode effect is the fading :
    Code:
    [fade]Fading effect[/fade]
    Result : Fading effect
Back to top Back to top

Misc BBcodes

Obtain a random number
If you wish to obtain a random number depending on an interval, you can use the following BBcode :
  • First utilization case, the interval is specified at minimum and maximum :
    Code:
    [rand]50,100[/rand]
    Result :
    Random number (50,100) : 66


  • Second utilization case, the interval is specified at its maximum :
    Code:
    [rand]50[/rand]
    Result:
    Random number (1,50) : 35
Back to top Back to top

Jump to: