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 :
[plain][youtube]http://{SIMPLETEXT1}.youtube.com/watch?v={SIMPLETEXT2}[/youtube][/plain]
HTML replacement :
[html][/html]
Help line :
[plain]Usage:[youtube]Video URL[/youtube][/plain]
**Google Video
**
BBCode usage :
[plain][googlevideo]{NUMBER}[/googlevideo][/plain]
HTML replacement :
[html]
Help line :
[plain]Enter the video ID number — the video ID is a 18 digit number is after docid=- in the URL[/plain]
Text Alignment
Left
BBCode usage :
[plain][left]{TEXT}[/left][/plain]
HTML replacement :
[html]{TEXT}[/html]
Right
BBCode usage :
[plain][right]{TEXT}[/right][/plain]
HTML replacement :
[html]{TEXT}[/html]
Center
BBCode usage :
[plain][center]{TEXT}[/center][/plain]
HTML replacement :
[html]{TEXT}[/html]
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 :
[plain][spoiler]{TEXT}[/spoiler][/plain]
HTML replacement :
[html]{TEXT}[/html]
Using Javascript :
This creates a “Show” button which expands to reveal the spoiler when clicked.
Example :
<p> <input style="margin: 0px; padding: 0px; width: 45px; font-size: 10px;" 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'; }" type="button" value="Show" /></div> <div class="quotecontent"> <div style="display: none;"> This is a spoiler. </div> </div></div> </blockquote> <p> BBCode usage : </p> <p> [plain][spoiler2]{TEXT}[/spoiler2][/plain] </p> <p> HTML replacement : </p> <p> [html]<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>[/html] </p> <p> <strong>Another version :</strong> </p> <p> This creates a spoiler which reveals itself on mousever.<br /> Example : </p> <blockquote> <p> <span class="spoiler" style="color: #000000; background-color: #000000;" title="spoiler" onmouseover="this.style.color='#FFFFFF';" onmouseout="this.style.color=this.style.backgroundColor='#000000'">This is a spoiler.</span> </p> </blockquote> <p> BBCode usage : </p> <p> [plain][spoiler3]{TEXT}[/spoiler3][/plain] </p> <p> HTML replacement : </p> <p> [html]<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>[/html] </p> <h4> <span style="text-decoration: underline;">Strikethrough</span> </h4> <p> Creates strike-through text.<br /> Example : </p> <blockquote> <p> <span style="text-decoration: line-through;">Strike-through text.</span> </p> </blockquote> <p> BBCode usage : </p> <p> [plain][strike]{TEXT}[/strike][/plain] </p> <p> HTML replacement : </p> <p> [html]<span style="text-decoration: line-through;">{TEXT}</span>[/html] </p> <p> <span style="text-decoration: underline;"><strong>Specify font</strong></span><br /> Specifies the font to be used in the text.<br /> Example : </p> <blockquote> <p> <span style="font-family: Arial;">This is written in Arial.</span> </p> </blockquote> <p> BBCode usage : </p> <p> [plain][font={SIMPLETEXT}]{TEXT}[/font][/plain] </p> <p> HTML replacement : </p> <p> [html]<span style="font-family: {SIMPLETEXT};">{TEXT}</span>[/html] </p> <h4> <span style="text-decoration: underline;">Pre tag</span> </h4> <p> Text enclosed by these tags will retain their formatting. </p> <p> [plain][pre]{TEXT}[/pre][/plain] </p> <p> HTML replacement : </p> <p> [html]<pre>{TEXT}</pre>[/html] </p> <h4> <span style="text-decoration: underline;">Background colour</span> </h4> <p> Changes the background to the specified colour.<br /> BBCode usage : </p> <p> [plain][bgcolor={COLOR}]{TEXT}[/bgcolor][/plain] </p> <p> HTML replacement : </p> <p> [html]<span style="background-color: {COLOR};">{TEXT}</span>[/html] </p> <h4> <span style="text-decoration: underline;">Horizontal line</span> </h4> <p> Adds a horizontal line after text. </p> <p> [plain][hr][/hr][/plain] </p> <p> HTML replacement : </p> <p> [html]<hr />[/html] </p> <h4> <span style="text-decoration: underline;">Subscript</span> </h4> <p> For writing subscripted text.<br /> Example : </p> <blockquote> <p> Oleum – H<span style="vertical-align: sub;">2</span>S<span style="vertical-align: sub;">2</span>O<span style="vertical-align: sub;">7</span> </p> </blockquote> <p> BBCode usage : </p> <p> [plain][sub]{TEXT}[/sub][/plain] </p> <p> HTML replacement : </p> <p> [html]<span style="vertical-align: sub;">{TEXT}</span>[/html] </p> <h4> <span style="text-decoration: underline;">Superscript</span> </h4> <p> For writing superscripted text.<br /> Example : </p> <blockquote> <p> (a+b)<span style="vertical-align: super;">2</span> = a<span style="vertical-align: super;">2</span>+b<span style="vertical-align: super;">2</span>+2ab </p> </blockquote> <p> BBCode usage : </p> <p> [plain][super]{TEXT}[/super][/plain] </p> <p> HTML replacement : </p> <p> [html]<span style="vertical-align: super;">{TEXT}</span>[/html] </p>