This section contains detailed articles elaborating on some of the common issues phpBB users encounter while using the product. Articles submitted by members of the community are checked for accuracy by the relevant phpBB Team. If you do not find the answer to your question here, we recommend looking through the Support Section as well as using the Site Wide Search.

Adding Custom BBCodes in phpBB3

Description: Find out how to customise your board with custom BBCodes in this article.

In Categories:

Link to this article: Select All
[url=https://www.phpbb.com/support/docs/en/3.2/kb/article/adding-custom-bbcodes-in-phpbb3/]Knowledge Base - Adding Custom BBCodes in phpBB3[/url]

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:

Code: Select all

[red]{TEXT}[/red]

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:

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 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:

Code: Select all

[googlevideo]{SIMPLETEXT}[/googlevideo]
HTML replacement:

Code: Select all

<object type="application/x-shockwave-flash" style="width:425px; height:350px;" data="http://video.google.com/googleplayer.swf?docId={SIMPLETEXT}" ><param name="movie" value="http://video.google.com/googleplayer.swf?docId={SIMPLETEXT}" /></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}://{SIMPLETEXT1}youtube.com/watch?v={SIMPLETEXT2}[/youtube]
HTML replacement:

Code: Select all

<object width="425" height="350"><param name="movie" value="{IDENTIFIER}://{SIMPLETEXT1}youtube.com/v/{SIMPLETEXT2}"></param><param name="wmode" value="transparent"></param><embed src="{IDENTIFIER}://{SIMPLETEXT1}youtube.com/v/{SIMPLETEXT2}" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>
Example usage:

Code: Select all

[youtube]YouTube video URL here[/youtube]
or

Code: Select all

Youtube video: [youtube]https://www.youtube.com/watch?v=ffHLIZh0PHg[/youtube]
Recommended help line text:

Code: Select all

Enter the YouTube video 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]
If you have any suggestions for more common BBCodes to add, then please PM me.

Enjoy! :mrgreen:

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"