How To #1: Custom BBCodes For IPB (Console)

Custom BBCodes for Forums

--------------------------

 

Hi all,

I came up with this article to share what I learnt of designing Custom BBCodes for various forum softwares while trying to come up with some useful one's for Xisto. Most of you are by now familiar with the new ones like CONSOLE, NOTE, TABL etc. which I introduced a few days back. So how do these BBCodes work ? And how does the forum softwares parse them.

 

BBCodes, as you know, usually takes a [ TAG ] Text Stuff [ /TAG ] format. The "Text Stuff" in the textual content on which you want your bbcode to work. In almost 99% of the cases, you HAVE to include the content between a matching pair of TAG & /TAG. Here's what I figured out about the BBCodes of IPB Forum Software after a lot of experimentation. N.B. You've to be a good bit familiar with HTML to be able to create your own BBCode or at least understand how they work.

 

Step 1

Come up with some logical name for your BBCode that relates to it's job. For example, the CONSOLE BBCode that I created was meant for showing text in a console output format - hence the name. A good idea would be to keep the name of the TAG short & sweet - coz most of us loose interest in using the BBCodes if they're named too long - after all whoever wants to type more BBCodes that the content of their posts.

 

Step 2

THE IPB Software as well as the other common ones (phpBB, SMF, vBulletin etc.) support a common format for BBCodes - so a BBCode written for either of these would logically work for the rest - except in certain cases where you need minor modifications. So how does the BBCode Parser decide which part to display as content and which one to take as the Code? Well quite obviously, the name of the code that we came up in the first step IS the name of the TAG that we're going to enclose in the square brackets [] while using on the forums. So we declare this name, (I'll use my CONSOLE example here) as the TAG. Where do you define this ? All the forum softwares have an Administration Control Panel - where you can perform thousands of administrative stuff on the respective boards. Invariably, here you'll find the option to create custom BBCodes.. Browse to that section and you'll find the option to Create/Edit your codes. See the picture below to spot it on IPB. We won't spend much time discussing the BBCode editors of different forum sw's. Go through the respective docs and find out where you can edit/insert them. Lets get to the real thing rightaway.

 

 

The last textarea in this example, titled Custom BBCode Replacement is the part where your BBCode gets translated to raw HTML. Here's the code I used for my CONSOLE tag.

<div id="conheader" style="width: 650px; border: solid 1px #000000; background-color: #FFFF80; color: black; border: thin solid; font-family: Tahoma; font-weight: bold; padding-left: 15px; padding-right: 10px; padding-top: 2px; padding-bottom: 2px;">CONSOLE</div><div id="console" style="width: 655px; border: solid 1px #000000; background-color: #000000; color: yellow; border: thin solid; font-family: Tahoma; font-weight: bold; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px;">{content}</div>

Take a second look at this jumble of HTML tags. You'll see that the code consists of TWO of the <DIV> or Layer Tags - all those parameters associated with each tag simple specifies the characteristics of those layers (width, height, color, border-color, border-style, font size/weight/color for text inside them etc.). The first <DIV></DIV> tagpair is the one which defines the top header for the console code. It's simply a rectangular box with yellow background and black text and contains the word CONSOLE in it. This is the part of the code which creates it:

<div id="conheader" style="width: 650px; border: solid 1px #000000; background-color: #FFFF80; color: black; border: thin solid; font-family: Tahoma; font-weight: bold; padding-left: 15px; padding-right: 10px; padding-top: 2px; padding-bottom: 2px;">CONSOLE</div>

Even though it looks cryptic at the first look - it's relatively simple... The parameters/attributes are almost self-explanatory. The width: 650px limits the width of the header to 650pixels. Now this is something you got to be careful about, coz if the width of your DIV is too large, it'll distort your post as well as the whole page out of shape making the right edge leave the screen and go far far beyond. So try to keep this figure within safe limits. The "border", "background-color", "color", "font" etc do exactly what they represent. If you need more info about the various DIV attributes, visit: http://www.w3schools.com/tags/tag_div.asp

 

The second layer or <DIV> tag is the one which holds the text that you include between the tags. Lets take a closer look at this code again:

<div id="console" style="width: 655px; border: solid 1px #000000; background-color: #000000; color: yellow; border: thin solid; font-family: Tahoma; font-weight: bold; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px;">{content}</div>

As you can see this is almost the same as the first one. I haven't specified any height attribute for this BBCode as I want it to expand vertically to accomodate as many lines of text as you want to include.The text that you include between the tags is passed on as a variable named {content} which you can see right at the end of the code before the ending </div> tag. The whole text is assigned to {content} variable and passed to the HTML parser. This whatever you enclose between the BBCode tags, takes on the style/appearance as specified in the DIV tags.

 

 

Still not clear ? Lets take a look at another example. This time it's the HIGHLIGHT BBCode - which can do a little bit extra, in the sense, that it can take the name of the color as an OPTION and pass it to the HTML Parser to give you, your desired color HIGHLIGHT. Here's the Code for it:

<span style="background-color:{option}">{content}</span>

As you can see this one is real short and sweet. Similar to the textual content, the options that you specify while using a BBCode ( in the form [ TAG = something ] ) is assigned to another variable named {option} which has to be placed properly along with a style attribute. Since we're specifying colors here, the "background-color:{option}" takes the {option} variable and uses it's contents as the name of the color. While using the BBCode, we'll call it as:

HIGHLIGHT=red, for example. This "red" goes into {option} variable, and when it reaches the HTML Parser, the code looks like: <span style="background-color:red">. The {option} part is simply replaced by it's content. Right after that, once again we meet the {content} var, which contains the text to the highlighted.. So something like,

[ HIGHLIGHT=red ]This is Red Text[ /HIGHLIGHT ] will parse as:

<span style="background-color:red">This is Red Text</span>. Get the idea ? Keep in mind that when you create a BBCode that can use an option, you've to declare it so. Go back and take a look at that IPB Picture again. The second last item is a pair of Radio Buttons that enables a BBCode to use the option passed to it. In such a BBCode this must be marked YES.

 

I'll end this tutorial with another small example - the HR BBCode which is a replacement for the <HR> or Horizontal Rule used in HTML to put a horizontal separator in the page. The code for this is:

<hr {option}>{content}

The <HR> HTML tag doesn't require an ending /TAG pair - and so it is reflected in the code. Even here I've allowed the code to take an option. If used without any option - it'll draw the standard 3D-Shaded Horizontal Rule, but if an option, like noshade is passed to it, the line will be thick and solid.

 

Hope this tutorial will give you a basic insight into the workings of BBCode-->HTML and get you started on some cool ones of your own. Waiting for some neat one's from you guys. If you've got some good code ready at hand, feel free to share it with us here (and if it's really good - it might end up being added here and at Xisto as well)

 

Have fun

So just to make sure I've got this right, if the tag is <TAG=blah>blahblahblah</tag> (angle brackets sub in for []) then I would place "{option}" where I want the option to be and "{content}" where I want the user to place the content? And what if I want multiple options?

I'm going to try and make a CODE type tag that allows for different code types, any idea on what to call it?