Adding Custom Bbcodes in Phpbb3 Olympus
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:
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]
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
[youtube]uBbmiQhuAhU[/youtube]
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]
HTML replacement:
Code: Select all
<div style="text-align: left;">{TEXT}</div>
Example usage:
Code: Select all
[left]left aligned text[/left]
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]
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]
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!