Tech Titbits

phpBB comes with a multitude of BBCodes that perform various functions. While most of these are sufficient for day-to-day forum activity, power users who crave for mre functionality on their boards, need custom-made BBCodes to satisfy their needs. Here is a list of most commonly used bbcodes on phpBB boards.

Video sharing

YouTube

BBCode usage :

[youtube]http://{SIMPLETEXT1}.youtube.com/watch?v={SIMPLETEXT2}[/youtube]]

HTML replacement :

<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/{SIMPLETEXT2}&hl=en"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/{SIMPLETEXT2}&hl=en" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

Help line :

Usage:[youtube]Video URL[/youtube]

Google Video

BBCode usage :

<code>[googlevideo]{NUMBER}[/googlevideo]</code>

HTML replacement :

<code><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></code>

Help line :

<code>Enter the video ID number -- the video ID is a 18 digit number is after docid=- in the URL</code>

Text Alignment

Left
BBCode usage :

[left]{TEXT}[/left]

HTML replacement :

<div align="left">{TEXT}</div>

Right
BBCode usage :

[right]{TEXT}[/right]

HTML replacement :

<div align="right">{TEXT}</div>

Center
BBCode usage :

[center]{TEXT}[/center]

HTML replacement :

<div align="center">{TEXT}</div>

Spoiler

The spoiler BBCode can be used to hide spoilers from unsuspecting users. There are many ways to go about it, using Javascript or otherwise.

Without Javascript :
This BBCode adds a black background color to the text between the tags, making it unreadable unless highlighted.
Example :
This is a spoiler.
BBCode usage :

[spoiler]{TEXT}[/spoiler]

HTML replacement :

<span style="background:#000000">{TEXT}</span>

Using Javascript :
This creates a “Show” button which expands to reveal the spoiler when clicked.
Example :

Spoiler:

This is a spoiler.

BBCode usage :

[spoiler2]{TEXT}[/spoiler2]

HTML replacement :

<div style="margin:20px; margin-top:5px"><div class="quotetitle"><b>Spoiler:</b> <input type="button" value="Show" style="width:45px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" /></div><div class="quotecontent"><div style="display: none;">{TEXT}</div></div></div>

Another version :

This creates a spoiler which reveals itself on mousever.
Example :

This is a spoiler.

BBCode usage :

[spoiler3]{TEXT}[/spoiler3]

HTML replacement :

<span title="spoiler" style="color: #000000; background-color: #000000;" class="spoiler" onmouseover="this.style.color='#FFFFFF';" onmouseout="this.style.color=this.style.backgroundColor='#000000'">{TEXT}</span>

Strikethrough

Creates strike-through text.
Example :

Strike-through text.

BBCode usage :

[strike]{TEXT}[/strike]

HTML replacement :

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

Specify font
Specifies the font to be used in the text.
Example :

This is written in Arial.

BBCode usage :

[font={SIMPLETEXT}]{TEXT}[/font]

HTML replacement :

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

Pre tag

Text enclosed by these tags will retain their formatting.

[pre]{TEXT}[/pre]

HTML replacement :

<pre>{TEXT}</pre>

Background colour

Changes the background to the specified colour.
BBCode usage :

[bgcolor={COLOR}]{TEXT}[/bgcolor]

HTML replacement :

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

Horizontal line

Adds a horizontal line after text.

[hr][/hr]

HTML replacement :

<hr />

Subscript

For writing subscripted text.
Example :

Oleum – H2S2O7

BBCode usage :

[sub]{TEXT}[/sub]

HTML replacement :

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

Superscript

For writing superscripted text.
Example :

(a+b)2 = a2+b2+2ab

BBCode usage :

[super]{TEXT}[/super]

HTML replacement :

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