Using BBCodes

From e107 Wiki
Jump to: navigation, search

e107 Wiki: English | Русский | Deutsch | Français | Magyar | Português | Български | Česky | Nederlands | Ελληνικά | Italiano | Norske | Polska | Slovenščina | Español | Svenska | Translate: Wiki | Page


Current Release 1.0.4 | | Download | Changelog | Forum | Plugins | Themes | RSS Feed of Latest Changes | Atom Feed of Latest Changes

Third part of the e107 handbook
Main page > I : First Aid > II : Development > III : Administration > IV : How To's > V : Plugin Writing > VI : Theming & Shortcodes

Using BBCode

Text may be entered either using the TinyMCE WYSIWYG editor, or through a simpler system where formatting is achieved through use of special sequences called BBCodes. BBCode is almost always the only option in the forum.

This section decribes the use of BBCodes most likely to be required by a user (as opposed to an administrator), and is applicable in many places throughout an E107 site (although some codes may be inappropriate in certain places).

The standard bbcodes use all lower case letters for the codes. In addition to the list specified here there may be other codes specific to a particular site.

Summary of BBCodes

[b][b]text[/b]Bold Text
[blockquote][blockquote]text[/blockquote]Block Quote (highlight) Text
[br][br]Line break
[center][center]text[/center]Centered Text
[code][code]text[/code]Code follows
[color][color=#808080]text[/color]Coloured text
[email][email=address]text[/email]Email Address
[file][file=filepath]text[/file]link to a file "filepath" for download purpose
[flash][flash=width,height]file.swf[/flash]Embed flash
[hide][hide]text[/hide]use = mainly for forum threads.
this bbcode hides the text to none users and to users who didn't answered to the thread
[i][i]text[/i]Italic Text
[img][img]url[/img]Displays image
[justify][justify]text[/justify]Justifies Text
[left][left]text[/left]left aligned text
Link to another page
[list][list]text[/list]Ordered list
[quote][quote=name]text[/quote]Quote what someone else said
[right][right]text[/right]Right aligned text
[size][size=15]text[/size]Set different text size
[spoiler][spoiler]text[/spoiler]return the text with the same colour than the background.
default is #ff00ff unless you defined an other one in your theme.php
define('SPOILER_COLOR', '#xxxxxx');
[time][time]text[/time]Convert an unix timestamp using e107 convert method. eg [time=forum]1197642254[/time] shows Fri Dec 14 2007, 03:24PM
[u][u]text[/u]Underlined Text
[url][url=address]text[/url]Same as [link]
[youtube][youtube]id reference[/youtube]embeds a YouTube video on your pages
Its usage is as follows:

[youtube=tiny|small|medium|big|huge or width,height|norel&border&privacy&nofull]ID[/youtube]

where ID is the (currently 11-character) reference of the movie.

You can also paste the complete 'embed' link from youtube instead of the ID, in which case the parameters will be extracted to create the correct bbcode. If you specify parameters in the actual bbcode, they will override any pasted from the link.

Examples: [youtube small|norel&border&privacy]MnA8mfBn00s[/youtube] [youtube 480,385]MnA8mfBn00s[/youtube] [youtube 480,385|border]MnA8mfBn00s[/youtube] [youtube norel]MnA8mfBn00s[/youtube]

For more information go to [YouTube BBcode]

Controlling the Layout

There are some simple controls for text formatting and appearance, which are invoked using the buttons immediately underneath the text entry box. Some less common features require that the actual codes are typed in.

There are two ways of using these buttons:

a) You can select as you type

b) You can ‘block’ a section of text (by ‘wiping’ the mouse over it) and then click on the button.

Clicking on the button inserts text in the form:


This particular example is for bold text.

The text to be displayed in bold must end up between the brackets, thus: [b]Text in bold[/b]

(Think of it that [b] turns on bold, and [/b] turns it off).

Text appearance

The available options are largely self-explanatory:




In addition there are two drop-down boxes to select text colour and size.

Formatting Text

If you do nothing, all text is ‘left justified’ - similar to normal writing.

You have options to centre (sorry - its spelt wrong on the screen and in the bbcode) or right justify.

The ‘blockquote’ (‘bq’ or ‘[]’ button) is used to highlight text.


You can create various forms of list.

Unordered list

The preferred style is either

[list] line 1[*]line 2[*]line 3[*]line 4[*]line 5[*]etc [/list]


[list] line 1
[*]line 2
[*]line 3
[*]line 4
[*]line 5
[*]etc [/list]

The [list] line 1 *line 2 *line 3 *line 4 *line 5 *etc [/list] style is legacy.

Ordered list


[list=<list type>] line 1[*]line 2[*]line 3[*]line 4[*]line 5[*]etc [/list]


[list=<list type>] line 1
[*]line 2
[*]line 3
[*]line 4
[*]line 5
[*]etc [/list]

Valid list types

List typePresented result
disc • - The default unordered list type. This is the list type used when no type is entered. This may be overridden by your CSS settings.
decimal 1, 2, 3 - The default ordered list type. Any type entered ( except for the registered types ) will default to decimal.
lower-roman i, ii, iii
upper-roman I, II, III
lower-alpha a, b, c
upper-alpha A, B, C

List example 1: The following code typed in

[list=upper-roman]*list item 1 *list item 2[/list]

will display:

I  list item 1
II list item 2

List example 2: The following code typed in

[list]*list item 1 *list item 2[/list]

will display:

• list item 1
• list item 2

Adding links to other web pages

You can add links to other web pages (both within and outside your web site) within your text.

Use the ‘Link’ button, which inserts:

[link=hyperlink url][/link]

You can then edit this to look like this:

[link=]Display text[/link] 

or this:

[link={e_BASE}news.php]Latest News[/link]

The first format is used for external web pages (i.e. those outside your site). The second format is used for pages within the site - these may be pages which have been added using this system, or pages which have been manually added.

Another possibility is to present a website as a clickable link like this:


A link which opens a new window

If you want a link to automatically open in a new window (which will usually be the case if it takes the user away from your site), this is a simple addition to the previous example (v0.7.9 or higher required):

[link= external]Display text[/link]


[link= rel=external]Display text[/link]

Note: The following method has been deprecated as of v0.7.9 (but will work for a little while longer):

[link=external=]Display text[/link]

Adding emailing links

Adding a link to create an email is very similar to that for creating a link to another web page.

[]Your Name[/link]

you could also use bbcode email:

[]Your Name[/email]

Adding Images

These can be inserted using the ‘img’ button, which inserts the following:


As with other features, the name of the image file (which must usually include its location) is inserted between the brackets, thus:


Tip: It is often better to create a thumbnail (tickable option) which you insert in the text. Then anyone interested can click on the thumbnail to see the detailed text.

Specifying the location of an image or page

There are various 'constants' you can put in front of the filename, which save you having to type the full URL to your site (and they will also continue to work if you should move everything on your server).

Examples are:

{e_IMAGE} - the e107_images directory

{e_IMAGE}/custom - for images used on custom pages (have to be uploaded by webmaster)

{e_FILE} - the files directory

{e_PLUGIN} - the plugins directory

{e_BASE} - the 'root' E107 directory

Example of Usage:

[link={e_BASE}news.php]Latest News[/link]

There is more explanation and a full list here

Hyperlink an image

Combine an image with a link to make the image clickable to a link.


Floating text round an image

You can add floating style element to the 'img' bbcode to do this:

[img style=float:right]path/to/image.png[/img]

Example: create a left outlined image with text floating on the right side of it with a margin of five pixels.

[img style=float:left;margin-right: 5px]mypicture.jpg[/img]

Scaling an image

Resizing an image can also be done with the style element:

Example: resize the image to a height of hundred pixels (if not specified, the width will resize automatically to the ratio of the originating image).

[img style=height:100px]path/to/image.png[/img]

Adding 'alt' tag

You can add an 'alt' tag to an image thus:

[img alt=testing description]/images/photo.jpg[/img]

Placing the 'code' tag inside a scrolling div

You may want to place the contents of anything inside the [code][/code] tag inside a scrolling div. This will ensure the layout of your pages is maintained regardless of the length and width of the code posted. In order to do this, all you have to do is add a code_highlight css class to your current theme's style.css. As an example, you can add this:

.code_highlight { 
   padding: 4px; 
   margin: 2px; 
   height: 100px; 
   overflow: scroll; 
   background: #e9e7e7; 

Adjust it to match your needs and theme.

Using flash

You can add Flash movies by referring to their URL. [flash=200,100]http://www.yourdomain.tld/images/some.swf[/flash] Generates the equivalent in HTML:

<object type='application/x-shockwave-flash' data='http://www.yourdomain.tld/images/some.swf' 
   width='200' height='100'>
   <param name='movie' value='http://www.yourdomain.tld/images/some.swf' />

In 2.0 a new parameter is possible: param_name=setting You can add as many parameters as needed with &-sign e.g.: param_name=setting&param_name=setting [flash=200,100,wmode=transparent]http://www.yourdomain.tld/images/some.swf[/flash] In HTML that will add to the above HTML coding before the closing object tag:

   <param name='wmode' value='transparent' />