phpBB • Free and Open Source Forum Software

Adding Custom BBCodes in phpBB3 Olympus

Overview

Hello.

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:

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

• {TEXT} -- matches anything
• {SIMPLETEXT} -- Characters from the latin alphabet (A-Z), numbers, spaces, commas, dots, minus, plus, hyphen and underscore
• {INTTEXT} -- Unicode letter characters, numbers, spaces, commas, dots, minus, plus, hyphen, underscore and whitespaces.
• {IDENTIFIER} -- Characters from the latin alphabet (A-Z), numbers, hyphen and underscore
• {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:
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 do not check this box, then the button for this BBCode will not 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: HTML replacement: Example usage: Recommended help line text: YouTube BBCode:
BBCode usage: HTML replacement: Example usage: or Recommended help line text: Center
BBCode usage: HTML replacement: Example usage: Justify text
BBCode usage: HTML replacement: Example usage: Left align text
BBCode usage: HTML replacement: Example usage: Right align text
BBCode usage: HTML replacement: Example usage: Coloured background
BBCode usage: HTML replacement: Example usage: Fonts
BBCode usage: HTML replacement: Example usage: Strike through text
BBCode usage: HTML replacement: Example usage: Blinking text*
*Note: will not work in Microsoft Internet Explorer and certain other browsers.
BBCode usage: HTML replacement: Example usage: Subscript*
*Note: useful for chemical equations.
BBCode usage: HTML replacement: Example usage: Superscript*
*Note: useful for math.
BBCode usage: HTML replacement: Example usage: Horizontal reference / line
BBCode usage: HTML replacement: Example usage*:
*Note: no in-between text is necessary. If you have any suggestions for more common BBCodes to add, then please PM me.

Enjoy!

17-May-2009 ric323 Corrected three instances of IDENTIFER to IDENTIFIER.
4-Nov-2011 Dicky

• Corrected Google video code HTML replacement.
• Added missing tokens.

29-Aug-2012 Mick corrected typo's in "Display on posting page option"