Adding Custom BBCodes in phpBB3 Olympus

[Tobin]

http://www.phpbb.com/kb/article/adding- ... in-phpbb3/

Overview

This article will explain how to add your own custom BBCodes. phpBB3 Olympus has a powerful new feature that lets you add your very own BBCodes directly from an easy to use admin panel interface -- no MODs or code changes needed! While phpBB has some of the most popular BBCodes included by default, there will still be times when you need to add your own. At the end of this article, there's a list of the most requested BBCodes for easy copying and pasting, but first we'll look at creating a new BBCode so you'll know how to do it.

Usage

To get started, simply go to your ACP (Administration Control Panel) then click on the Posting tab. Next, click on BBCodes on the left. Since you haven't added any custom ones yet, click on the Add a new BBCode button. You will now see 3 text input areas and a checkbox. The BBCode usage box is where you enter the BBCode -- i.e. similar to what users will enter. The HTML replacement text box is where you enter the HTML replacement code. The Help line text box is where you can enter a tip on how to use your new BBCode. Tips are generally displayed when the user rolls his or her mouse over the BBCode button on the posting screen. Finally the Display on posting page option allows you to show or hide the button on the posting screen. Hiding the button does not disable the BBCode -- users can still manually enter the BBCode.

Now let's go over the BBCode usage text field. Here's where you enter your BBCode. It's pretty easy -- all you need to do is add your BBCode and tokens (special uppercase words surrounded by { and } -- think of them as specialised wild cards like when searching Google). The tricky part is determining where to put your tokens and if your tag needs any extra properties/arguments. Let's create a very simple [red] BBCode that makes text red. You would enter:

Code: Select all
[red]{TEXT}[/red]



What tokens can I use? You can use the following:

* {TEXT} -- matches anything
* {NUMBER} -- matches a number of any length
* {EMAIL} -- matches a valid email address
* {URL} -- matches a valid URL
* {LOCAL_URL} -- matches a local (i.e. same domain) URL
* {COLOR} -- matches a HTML hex color code like #000000 or a CSS colour name like blue


HTML replacement field

This is where you enter the HTML for the BBCode. Don't forget to replace all the tokens you used above in the BBCode usage field. Continuing our example from above, to make text red with the [red] BBCode you would use this HTML replacement:

Code: Select all
<span style="color: red;">{TEXT}</span>



Help line field
Very simple -- enter a short description on how to use your new BBCode and/or what it does.

Display on posting page option
If you check this box, then the button for this BBCode won't show up on the posting page. Please note that this doesn't disable the BBCode -- it just "hides" it. Users can always manually type it in. If you decide to not display the BBCode button, be sure to provide an alternate way for your users to know about it (i.e. an announcement).

Other BBCode options
To edit a BBCode, simply click on the edit icon in the main BBCode admin screen. To delete a BBCode you no longer need, just click on the delete icon from the main BBCode admin screen. Note if you delete a BBCode, the text and actual BBCode remain but the HTML replacement is also removed. In other words, if you delete the BBCode, your red text will no longer be red and will simply be displayed as [red]text[/red].

Commonly Requested BBCodes
Just copy and paste these frequently requested BBCodes into your admin panel.

Google Video
BBCode usage:

Code: Select all
[googlevideo]{NUMBER}[/googlevideo]



HTML replacement:

Code: Select all
<object type="application/x-shockwave-flash" data="http://video.google.com/googleplayer.swf?docId=-{NUMBER}" width="400" height="326">
<param name="movie" value="http://video.google.com/googleplayer.swf?docId=-{NUMBER}" />
<param name="allowScriptAcess" value="sameDomain" />
<param name="quality" value="best" />
<param name="bgcolor" value="#FFFFFF" />
<param name="scale" value="noScale" />
<param name="salign" value="TL" />
<param name="FlashVars" value="playerMode=embedded" />
</object>



Example usage:

Code: Select all
[googlevideo]video ID number[/googlevideo]



Recommended help line text:

Code: Select all
Enter the video ID number -- the video ID is a 18 digit number is after docid=- in the URL



YouTube BBCode:
BBCode usage:

Code: Select all
[youtube]{IDENTIFIER}[/youtube]



HTML replacement:

Code: Select all
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/{IDENTIFIER}" width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/{IDENTIFIER}" />
<param name="wmode" value="transparent" />
</object>



Example usage:

Code: Select all
[youtube]YouTube video ID string here[/youtube]


or

Code: Select all




Recommended help line text:

Code: Select all
Enter the video ID string -- the video ID string is the part after v= in the URL



Center
BBCode usage:

Code: Select all
[center]{TEXT}[/center]



HTML replacement:

Code: Select all
<div style="text-align: center;">{TEXT}</div>



Example usage:

Code: Select all
[center]centered text[/center]



Justify text
BBCode usage:

Code: Select all
[justify]{TEXT}[/justify]



HTML replacement:

Code: Select all
<div style="text-align: justify;">{TEXT}</div>



Example usage:

Code: Select all
[justify]justified text[/justify]



Left align text
BBCode usage:

Code: Select all
[left]{TEXT}[/left]



HTML replacement:

Code: Select all
<div style="text-align: left;">{TEXT}</div>



Example usage:

Code: Select all
[left]left aligned text[/left]



Right align text
BBCode usage:

Code: Select all
[right]{TEXT}[/right]



HTML replacement:

Code: Select all
<div style="text-align: right;">{TEXT}</div>



Example usage:

Code: Select all
[right]right aligned text[/right]



Coloured background
BBCode usage:

Code: Select all
[background={COLOR}]{TEXT}[/background]



HTML replacement:

Code: Select all
<span style="background-color: {COLOR};">{TEXT}</span>



Example usage:

Code: Select all
[background=yellow]text on a yellow background[/background]



Fonts
BBCode usage:

Code: Select all
[font={SIMPLETEXT}]{TEXT}[/font]



HTML replacement:

Code: Select all
<span style="font-family: {SIMPLETEXT};">{TEXT}</span>



Example usage:

Code: Select all
[font=Georgia]Georgia font[/font]



Strike through text
BBCode usage:

Code: Select all
[s]{TEXT}[/s]



HTML replacement:

Code: Select all
<span style="text-decoration: line-through;">{TEXT}</span>



Example usage:

Code: Select all
[s]strikethrough text[/s]



Blinking text*
*Note: will not work in Microsoft Internet Explorer and certain other browsers.
BBCode usage:

Code: Select all
[blink]{TEXT}[/blink]



HTML replacement:

Code: Select all
<span style="text-decoration: blink;">{TEXT}</span>



Example usage:

Code: Select all
[blink]blinking text[/blink]



Subscript*
*Note: useful for chemical equations.
BBCode usage:

Code: Select all
[sub]{TEXT}[/sub]



HTML replacement:

Code: Select all
<span style="vertical-align: sub;">{TEXT}</span>



Example usage:

Code: Select all
H[sub]2[/sub]O



Superscript*
*Note: useful for math.
BBCode usage:

Code: Select all
[super]{TEXT}[/super]



HTML replacement:

Code: Select all
<span style="vertical-align: super;">{TEXT}</span>



Example usage:

Code: Select all
x[super]3[/super]



Horizontal reference / line
BBCode usage:

Code: Select all
[hr][/hr]



HTML replacement:

Code: Select all
<hr />



Example usage*:
*Note: no in-between text is necessary.

Code: Select all
[hr][/hr]

[Tobin]