0% found this document useful (0 votes)

118 views

Adding Custom Bbcodes in Phpbb3 Olympus

Adding Custom BBCodes in phpBB3 Olympus allows users to easily add their own custom BBCodes through the admin panel interface without needing code changes. It describes how to create a new BBCode by entering the BBCode usage text, HTML replacement, and help text. It then provides examples of commonly requested BBCodes that can be directly copied and pasted into the admin panel. [/SUMMARY]

Uploaded by

Edward Adiputra

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

118 views

Adding Custom Bbcodes in Phpbb3 Olympus

Uploaded by

Edward Adiputra

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 7

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

 {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

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
[youtube]uBbmiQhuAhU[/youtube]

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]