Essential custom BBCodes for phpBB


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(&#8216;div&#8217;)[1].getElementsByTagName(&#8216;div&#8217;)[0].style.display != &#8221;) { this.parentNode.parentNode.getElementsByTagName(&#8216;div&#8217;)[1].getElementsByTagName(&#8216;div&#8217;)[0].style.display = &#8221;; this.innerText = &#8221;; this.value = &#8216;Hide&#8217;; } else { this.parentNode.parentNode.getElementsByTagName(&#8216;div&#8217;)[1].getElementsByTagName(&#8216;div&#8217;)[0].style.display = &#8216;none&#8217;; this.innerText = &#8221;; this.value = &#8216;Show&#8217;; }" /></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=&#8217;#FFFFFF&#8217;;" onmouseout="this.style.color=this.style.backgroundColor=&#8217;#000000&#8217;">{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 &#8211; 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>