FreezeWarp
09-13-2008, 08:07 PM
Introduction
Many forums, like this one, use something called Bulletin Board Code, or BBCode for short. These codes output the HTML effects that have been predefined. Now, almost all forums also allow you to add additional BB Codes either through the forum's actual code or from the Admin CP. If you are one who uses a forum like those, keep reading; ahead exists a comprehensive guide explaining how to add code through raw code, as well as the Vbulletin and PHPBB Admin CP interfaces.
Vbulletin Admin CP Interface
How to Get There
Go to your admincp (/admincp/) and login.
Look for "Custom BB Code" on the left menu. Its near the bottom.
Expand it and click "Add New BBCode".
Adding Some Cool New BBCodes
Link Button
Title: Link Button
Tag: buttonlink
Replacement: <input type="button" onClick="link.href('{param}')" value="Go To {param}" />
Example: http://www.google.com/
Description: Adds a button link from which you can not go back to the previous page.
Use Option: No
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: Yes
Disable Smilies within this BB Code: Yes
Disable Word Wrapping within this BB Code: Yes
Warning Link
Title: Warning Link
Tag: urlx
Replacement: <a href="javascript:co
Wikipedia Link
Title: Wikipedia Link
Tag: wikipedialink
Replacement: <a href="http://en.wikipedia.org/wiki/{param}">Go To Wikipedia Page <i>{param}</i></a>
Example: test
Description: Adds a link to a Wikipedia page.
Use Option: No
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: Yes
Disable Smilies within this BB Code: Yes
Disable Word Wrapping within this BB Code: Yes
Google Search Link
Title: Google Search Link
Tag: googlesearch
Replacement: <a href="http://www.google.com/search?hl=en&q={param}&btnG=Google+Search&aq=f&oq=">Go To Google Search <i>{param}</i></a>
Example: test
Description: Adds a link to a Google Search.
Use Option: No
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: Yes
Disable Smilies within this BB Code: Yes
Disable Word Wrapping within this BB Code: Yes
Yahoo Search Link
Title: Yahoo Search Link
Tag: yahoosearch
Replacement: <a href="http://search.yahoo.com/search?p={param}&fr=yfp-t-501&toggle=1&cop=mss&ei=UTF-8">Go To Google Search <i>{param}</i></a>
Example: test
Description: Adds a link to a Yahoo Search.
Use Option: No
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: Yes
Disable Smilies within this BB Code: Yes
Disable Word Wrapping within this BB Code: Yes
Live Search Link
Title: Live Search Link
Tag: livesearch
Replacement: <a href="http://search.live.com/results.aspx?q={param}&go=&form=QBLH">Go To Google Search <i>{param}</i></a>
Example: test
Description: Adds a link to a Live Search.
Use Option: No
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: Yes
Disable Smilies within this BB Code: Yes
Disable Word Wrapping within this BB Code: Yes
CSS Division
Title: CSS Div
Tag: div
Replacement: <div style="{option}">{param}</div>
Example: test
Description: Creates a CSS Division.
Use Option: Yes
Remove Tag if Empty: No or Yes (Your Choice)
Disable BB Code within this BB Code: No
Disable Smilies within this BB Code: No
Disable Word Wrapping within this BB Code: No
CSS Span
Title: CSS Span
Tag: span
Replacement: <span style="{option}">{param}</span>
Example: test
Description: Creates a CSS Span.
Use Option: Yes
Remove Tag if Empty: No or Yes (Your Choice)
Disable BB Code within this BB Code: No
Disable Smilies within this BB Code: No
Disable Word Wrapping within this BB Code: No
Text Spoiler
Title: Spoiler
Tag: spoiler
Replacement: <script type="text/javascript">
var set = set;
if (set == 1) {
int += 1;
}
else {
var int = 1;
var set = 1;
}
var content = '<div style="outline: black 1px solid;"><div class="thead" style="outline: black 1px solid;"><strong>Spoiler Alert:</strong><span style="text-decoration: underline;">' + '{option}' + 'a</span> <input type="button" value="Show" id="lever' + int + '" onClick="if (document.getElementById(\'content' + int + '\').style.display == \'none\') { document.getElementById(\'content' + int + '\').style.display = \'block\'; document.getElementById(\'lever' + int + '\').value = \'Hide\'; } else { document.getElementById(\'content' + int + '\').style.display = \'none\'; document.getElementById(\'lever' + int + '\').value = \'Show\'; }" /></div><div id="content' + int + '" style="display: none; outline: black 1px solid;">' + '{param}' + '</div></div>';
document.write(content);
</script>
Example: This is hidden text!
Description: Creates a spoiler which hides content when the page is loaded. It is useful for hiding content others may not want to witness, or to conserve space.
Use Option: Yes
Remove Tag if Empty: Yes or No (Your Choice)
Disable BB Code within this BB Code: No
Disable Smilies within this BB Code: No
Disable Word Wrap within this BB Code: No
Superscript
Title: Superscript
Tag: sup
Replacement: <sup>{param}</sup>
Example: 222
Description: Makes text superscripted, such as with mathematical exponents.
Use Option: No
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: No
Disable Smilies within this BB Code: No
Disable Word Wrap within this BB Code: No
Subscript
Title: Subscript
Tag: sub
Replacement: <sub>{param}</sub>
Example: 222
Description: Makes text subscripted.
Use Option: No
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: No
Disable Smilies within this BB Code: No
Disable Word Wrap within this BB Code: No
Scrolling Text (aka Marquee)
Title: Scrolling Text
Tag: scroll
Replacement: <marquee>{param}</marquee>
Example: This text is scrolled
Description: Scrolls text accross the screen.
Use Option: No
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: No
Disable Smilies within this BB Code: No
Disable Word Wrap within this BB Code: No
Highlighted Text
Title: Highlight
Tag: highlight
Replacement: <span style="background-color: {option}">{param}</span>
Example: This Text Has a Red Highlight
Description: Highlights Text
Use Option: Yes
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: No
Disable Smilies within this BB Code: No
Disable Word Wrap within this BB Code: No
Strikethrough
Title: Strikethrough
Tag: strike
Replacement: <del>{param}</del>
Example: This Text Has a Strikethrough
Description: Adds a line through text.
Use Option: No
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: No
Disable Smilies within this BB Code: No
Disable Word Wrap within this BB Code: No
Overline
Title: Overline
Tag: over
Replacement: <span style="text-decoration: overline;">{param}</span>
Example: This Text Has a Strikethrough
Description: Adds a line above text.
Use Option: No
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: No
Disable Smilies within this BB Code: No
Disable Word Wrap within this BB Code: No
Youtube Video (Customized Player)
Title: Youtube Video
Tag: youtube
Replacement: <object width="425" height="349"><param name="movie" value="http://www.youtube.com/v/{param}&hl=en&fs=1&color1=0x006699&color2=0x54abd6&border=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/{param}&hl=en&fs=1&color1=0x006699&color2=0x54abd6&border=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="349"></embed></object>
Example: hKoB0MHVBvM
Description: Creates a youtube video.
Use Option: No
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: Yes
Disable Smilies within this BB Code: No
Disable Word Wrap within this BB Code: No
Header
Title: Header
Tag: header
Replacement: <h{option}>{param}</h1>
Example: This is the biggest headerThis is the second biggestAnd this is the smallest
Description: Modifies the text sized to the option (1 being largest, 6 smallest).
Use Option: Yes
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: No
Disable Smilies within this BB Code: No
Disable Word Wrap within this BB Code: No
Version History:
.25 - Original. Only included some BB Codes for Vbulletin.
.3 - Added Strikethrough, Overline, Youtube Video, and Header.
.35 - "Spoiler" now Reflects Current Pokezam Implementation, Changed "Link Button" to Support Going Back
This guide is not done. It is currently at version .35. I will continue working on it occasionally until it is completed.
Many forums, like this one, use something called Bulletin Board Code, or BBCode for short. These codes output the HTML effects that have been predefined. Now, almost all forums also allow you to add additional BB Codes either through the forum's actual code or from the Admin CP. If you are one who uses a forum like those, keep reading; ahead exists a comprehensive guide explaining how to add code through raw code, as well as the Vbulletin and PHPBB Admin CP interfaces.
Vbulletin Admin CP Interface
How to Get There
Go to your admincp (/admincp/) and login.
Look for "Custom BB Code" on the left menu. Its near the bottom.
Expand it and click "Add New BBCode".
Adding Some Cool New BBCodes
Link Button
Title: Link Button
Tag: buttonlink
Replacement: <input type="button" onClick="link.href('{param}')" value="Go To {param}" />
Example: http://www.google.com/
Description: Adds a button link from which you can not go back to the previous page.
Use Option: No
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: Yes
Disable Smilies within this BB Code: Yes
Disable Word Wrapping within this BB Code: Yes
Warning Link
Title: Warning Link
Tag: urlx
Replacement: <a href="javascript:co
Wikipedia Link
Title: Wikipedia Link
Tag: wikipedialink
Replacement: <a href="http://en.wikipedia.org/wiki/{param}">Go To Wikipedia Page <i>{param}</i></a>
Example: test
Description: Adds a link to a Wikipedia page.
Use Option: No
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: Yes
Disable Smilies within this BB Code: Yes
Disable Word Wrapping within this BB Code: Yes
Google Search Link
Title: Google Search Link
Tag: googlesearch
Replacement: <a href="http://www.google.com/search?hl=en&q={param}&btnG=Google+Search&aq=f&oq=">Go To Google Search <i>{param}</i></a>
Example: test
Description: Adds a link to a Google Search.
Use Option: No
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: Yes
Disable Smilies within this BB Code: Yes
Disable Word Wrapping within this BB Code: Yes
Yahoo Search Link
Title: Yahoo Search Link
Tag: yahoosearch
Replacement: <a href="http://search.yahoo.com/search?p={param}&fr=yfp-t-501&toggle=1&cop=mss&ei=UTF-8">Go To Google Search <i>{param}</i></a>
Example: test
Description: Adds a link to a Yahoo Search.
Use Option: No
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: Yes
Disable Smilies within this BB Code: Yes
Disable Word Wrapping within this BB Code: Yes
Live Search Link
Title: Live Search Link
Tag: livesearch
Replacement: <a href="http://search.live.com/results.aspx?q={param}&go=&form=QBLH">Go To Google Search <i>{param}</i></a>
Example: test
Description: Adds a link to a Live Search.
Use Option: No
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: Yes
Disable Smilies within this BB Code: Yes
Disable Word Wrapping within this BB Code: Yes
CSS Division
Title: CSS Div
Tag: div
Replacement: <div style="{option}">{param}</div>
Example: test
Description: Creates a CSS Division.
Use Option: Yes
Remove Tag if Empty: No or Yes (Your Choice)
Disable BB Code within this BB Code: No
Disable Smilies within this BB Code: No
Disable Word Wrapping within this BB Code: No
CSS Span
Title: CSS Span
Tag: span
Replacement: <span style="{option}">{param}</span>
Example: test
Description: Creates a CSS Span.
Use Option: Yes
Remove Tag if Empty: No or Yes (Your Choice)
Disable BB Code within this BB Code: No
Disable Smilies within this BB Code: No
Disable Word Wrapping within this BB Code: No
Text Spoiler
Title: Spoiler
Tag: spoiler
Replacement: <script type="text/javascript">
var set = set;
if (set == 1) {
int += 1;
}
else {
var int = 1;
var set = 1;
}
var content = '<div style="outline: black 1px solid;"><div class="thead" style="outline: black 1px solid;"><strong>Spoiler Alert:</strong><span style="text-decoration: underline;">' + '{option}' + 'a</span> <input type="button" value="Show" id="lever' + int + '" onClick="if (document.getElementById(\'content' + int + '\').style.display == \'none\') { document.getElementById(\'content' + int + '\').style.display = \'block\'; document.getElementById(\'lever' + int + '\').value = \'Hide\'; } else { document.getElementById(\'content' + int + '\').style.display = \'none\'; document.getElementById(\'lever' + int + '\').value = \'Show\'; }" /></div><div id="content' + int + '" style="display: none; outline: black 1px solid;">' + '{param}' + '</div></div>';
document.write(content);
</script>
Example: This is hidden text!
Description: Creates a spoiler which hides content when the page is loaded. It is useful for hiding content others may not want to witness, or to conserve space.
Use Option: Yes
Remove Tag if Empty: Yes or No (Your Choice)
Disable BB Code within this BB Code: No
Disable Smilies within this BB Code: No
Disable Word Wrap within this BB Code: No
Superscript
Title: Superscript
Tag: sup
Replacement: <sup>{param}</sup>
Example: 222
Description: Makes text superscripted, such as with mathematical exponents.
Use Option: No
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: No
Disable Smilies within this BB Code: No
Disable Word Wrap within this BB Code: No
Subscript
Title: Subscript
Tag: sub
Replacement: <sub>{param}</sub>
Example: 222
Description: Makes text subscripted.
Use Option: No
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: No
Disable Smilies within this BB Code: No
Disable Word Wrap within this BB Code: No
Scrolling Text (aka Marquee)
Title: Scrolling Text
Tag: scroll
Replacement: <marquee>{param}</marquee>
Example: This text is scrolled
Description: Scrolls text accross the screen.
Use Option: No
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: No
Disable Smilies within this BB Code: No
Disable Word Wrap within this BB Code: No
Highlighted Text
Title: Highlight
Tag: highlight
Replacement: <span style="background-color: {option}">{param}</span>
Example: This Text Has a Red Highlight
Description: Highlights Text
Use Option: Yes
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: No
Disable Smilies within this BB Code: No
Disable Word Wrap within this BB Code: No
Strikethrough
Title: Strikethrough
Tag: strike
Replacement: <del>{param}</del>
Example: This Text Has a Strikethrough
Description: Adds a line through text.
Use Option: No
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: No
Disable Smilies within this BB Code: No
Disable Word Wrap within this BB Code: No
Overline
Title: Overline
Tag: over
Replacement: <span style="text-decoration: overline;">{param}</span>
Example: This Text Has a Strikethrough
Description: Adds a line above text.
Use Option: No
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: No
Disable Smilies within this BB Code: No
Disable Word Wrap within this BB Code: No
Youtube Video (Customized Player)
Title: Youtube Video
Tag: youtube
Replacement: <object width="425" height="349"><param name="movie" value="http://www.youtube.com/v/{param}&hl=en&fs=1&color1=0x006699&color2=0x54abd6&border=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/{param}&hl=en&fs=1&color1=0x006699&color2=0x54abd6&border=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="349"></embed></object>
Example: hKoB0MHVBvM
Description: Creates a youtube video.
Use Option: No
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: Yes
Disable Smilies within this BB Code: No
Disable Word Wrap within this BB Code: No
Header
Title: Header
Tag: header
Replacement: <h{option}>{param}</h1>
Example: This is the biggest headerThis is the second biggestAnd this is the smallest
Description: Modifies the text sized to the option (1 being largest, 6 smallest).
Use Option: Yes
Remove Tag if Empty: Yes
Disable BB Code within this BB Code: No
Disable Smilies within this BB Code: No
Disable Word Wrap within this BB Code: No
Version History:
.25 - Original. Only included some BB Codes for Vbulletin.
.3 - Added Strikethrough, Overline, Youtube Video, and Header.
.35 - "Spoiler" now Reflects Current Pokezam Implementation, Changed "Link Button" to Support Going Back
This guide is not done. It is currently at version .35. I will continue working on it occasionally until it is completed.