BBCode Tutorial

[webhick]

I'm hoping the following will help some posters get a handle on quoting and other BBCode features. It's kind of hard to explain some of it. Let me know if further clarification is needed in areas and I'll edit to flesh it out more.

phpBB uses something called BBCode. If you've never used it before or have no HTML or coding background, it can be difficult to use - until you get a handle on it. This tutorial will first focus on the simple BBCode (eg. Bold) and expand out to the more complicated kind (Quote).

Anatomy of the Basic Code

• Brackets tell phpBB that you're using BBCode ([ ]). No bracket, no fly.
• BBCode always has an opening set of brackets ([open]) to start it and a closing set of brackets ([/close]) to end it. I'm going to call them tags for the remainder of this tutorial.
• An opening tag never has a slash. ([no slash!])
• A closing tag always has a slash. ([/<--- a slash!])
• You've got to have stuff between the brackets. ([stuff]) and ([/stuff])
• You can't close an opening tag with a different tag. ([same] and [/different] <--- Bad!)
• You've got to have stuff between the opening and closing tags ([tag]stuff[/tag])
• The examples used above are for illustrative purposes.
• You must use a valid BBCode name. Like b, i, u.
• If you have any unclosed tags, phpBB will often do it for you at the end of the post. This is often less desirable than doing it yourself.

When you put it all together, a simple, valid BBCode to bold something looks like:

Code: Select all

[b]stuff I want bolded[/b]

That produces: stuff I want bolded
You have a small assortment of simple BBCode above the posting box. b, i, u, code, img, url, NSFW and strike all use this format. You can hover your mouse over any of the buttons to see what it does and how the BBCode looks.

Some examples of bad BBCode:

Code: Select all

[b]bold me[/i]  <--- The opening and closing tags are different
[open]text[/open] <--- No such code.  Try to stick to the ones above the posting box.
[b]text[b] <--- The tag is not closed (need that slash!).

Nesting Code
Sometimes, you may want to bold AND italicize something. There is no special BBCode for this, you just put the additional code around the existing code. Like so:

Code: Select all

[i][b]bold and italicized text[/b][/i]

Produces: bold and italicized text

No, the order doesn't matter. Neither does the order of the closing tags, much to my chagrin. Of course, it will matter if you want to do something like:

Code: Select all

[i][b]This is bolded and italicized[/b] and this is just italicized[/i]

This is bolded and italicized and this is just italicized

So practice good habits and always close the last one you opened. It'll be less of a shock if you ever need to learn HTML or some such thing.

Using the buttons
Instead of typing in your code, you can use the buttons above the posting box. If you have text selected in the posting box, the tags will be inserted around whatever you have selected. If you do not have anything selected, it will insert the tags wherever your cursor is. You will then be able to type what you need to between the opening and closing tags.

Anatomy of the more complicated tags
The only difference between your simple and more complicated code is the inclusion of parameters in the opening tag. You can only use parameters on tags that allow it and including a parameter on a tag that doesn't allow it makes invalid. One of the best ways to illustrate a parameter is using the Quote tag:

Code: Select all

[quote="Wolverpus"]I'm furry and love chocolate.[/quote]

Which gives you:

I'm furry and love chocolate.

Look closely at the example in the code box. You'll notice that it follows the same basic rules about BBCode - except it has an equal sign and a name in quotes. The equal sign is there to tell phpBB that we're about to use a parameter and what follows...is the parameter's value (which we'll just call the parameter).

Now that you've seen it, there are somethings you need to know. Use of the quotation marks is based entirely on the tag. The quote tag requires it if the parameter has anything but a continuous set of alphabetic characters. That means you need to use them if the parameter has a space, number or symbol. Otherwise, it will be considered invalid code.

There is another tag I mentioned earlier as being simple - the URL tag. Truth is that I lied. Although it can be used as a simple tag which merely displays a URL, you can add a parameter and use it to turn a bit of text into a link.

Code: Select all

[url=http://quatloos.com]Quatloosia[/url]

Which looks like so: Quatloosia

As you can see, the parameter is the URL you want to link to and text you want to link is between the opening and closing tags. The URL tag does not need quotation marks.

And let's not forget the color tag! It's another one that doesn't require quotation marks to work right. Most people will choose from the color picker and the parameter won't make a damned bit of difference. But, for those of you who are curious about the parameter, it always needs to start with the pound sign(#) and be followed by a hexadecimal color notation.

Nesting Quotes
Man, does this get complicated. The biggest thing to keep in mind with nested quotes is that phpBB has no idea which quote tag you're trying to close and there's no way to tell it so it defaults to the most logical one - the last quote tag opened - and it's not wrong to do so. So, as I explained earlier - always close the last one you opened!

Example of two nests:

Code: Select all

[quote="Poster2"][quote="Poster1"]I'm poster1 and this is what I'm saying.[/quote]I'm poster 2 and I disagree.[/quote]

I'm poster1 and this is what I'm saying.

I'm poster 2 and I disagree.

If it seems a little backwards, it's because it actually is a bit backwards until you realize that it's completely forwards. Forget the words, forget the parameters - it's a quote tag in a quote tag...a tag inside a tag. Just like the example earlier:

Code: Select all

[i][b]This is bolded and italicized[/b] and this is just italicized[/i]

We're effectively just doing:
I'm poster1 and this is what I'm saying.I'm poster 2 and I disagree.

But with quote tags. Need to see what three looks like?

Code: Select all

[quote="Poster3"][quote="Poster2"][quote="Poster1"]I'm poster1 and this is what I'm saying.[/quote]I'm poster 2 and I disagree.[/quote]I'm poster 3 and you're both wrong.[/quote]

I'm poster1 and this is what I'm saying.

I'm poster 2 and I disagree.

I'm poster 3 and you're both wrong.

The first to speak (Poster1) is in the middle and the last to speak (Poster3) is on the outside.

And now a word from our sponsors
There's a tag that exists that is more complicated than the quotes. It's the list tag. The list tag can be used without a parameter (for a bullet list) or with a parameter for an ordered list. If you use a parameter, you must specify the starting number for the list. There are a few types. "1" for a numeric list, "a" for an alpha list and "I" for a roman numeral list.
But it doesn't end there. It does not assume that new lines, dashes, etc are new list items - you have to tell it. That's what the handy [ * ] tag is for (and remember, it needs to be closed like a normal tag!)

Example:

Code: Select all

[list]
[*]I am a bulleted list[/*]
[*]No, you're just in a bulleted list.[/*]
[*]BULLETS![/*]
[/list]

[list=1]
[*]FIRST![/*]
[*]There's one in every group. smh.[/*]
[*]The one with the hairy chest.[/*]
[/list]

• I am a bulleted list
• No, you're just in a bulleted list.
• BULLETS!

1. FIRST!
2. There's one in every group. smh.
3. The one with the hairy chest.

After everything you learned, it's not all that complicated. Just a little different.

[The Observer]

Thanks, webhick, for the tutorial. I finally learned how to use the [ list ][ /list ] codes. Those had driven me nuts for years, and I could never get it to work the way I thought it was supposed to work. Being too lazy to research it elsewhere, I just gave up trying to use it at all.

[wserra]

I fielded an inquiry from a member who had some problems with quotes. For anyone else who has similar problems - or, for that matter, any issues with bbcodes in general - I've made webhick's most helpful primer a sticky. Sometimes a post is so screwed up that the only good solution (other than starting over) is to edit the codes. web shows you how to do that.

[notorial dissent]

I 've always loved this list, good list, good good list. I refreshed my memory and relearned something I was sort of messing up but not.

FWIW, the quote issue may come from an issue of the way BBCODE sees quote marks ' " '. It only recognizes the straight up and down marks like the font here uses. If you copy something that used what are called smart quote marks, the ones that look like apostrophes, 'it can't see them.