BBCode 101

[Savenger]

BBCode 101
|A Toolbox Thread|

This thread is aimed at members who are unfamiliar with BBCode and how to use it. I am going to give a quick explanation of each code, what it does and show a few examples of how useful it can be when working on a thread. I’m not going to cover every single one, as many are not used on this site. But there should be enough info in here to cover all the bases.

If you feel something important is missing, or have any questions, feel free to post a question below. Now, down to business.

-CONTENTS-
Click for Hyperlink

THE BASICS
BASIC TEXT EDITING
TEXT ALIGNMENT
BULLETED LISTS
IMAGE INTEGRATION
HYPERLINKING
TEXT VIEWERS

So what is BBCode?

BB code is a tag set based on the HTML programming language that is used to generate WebPages across the net. Their basic function is to allow you to allow the user to format text in the same way as HTML does, but in a much simpler way without having to leave the page you are viewing and working on. There are many different codes, but only a few will be enabled on any given site or forum. The site administrator picks which codes are active for each site.

Why is it useful to you?

Different codes can be used to organize and enhance user threads, signatures and messages. They are particularly useful when writing Guides and Roadmaps, helping to make them easier to read and follow. And while many of the functions of the various BBCodes are generally available via buttons in the various edit windows, they are not always there when you need them. Also, It can often be quicker to type the relevant codes than to try to select a particular set of lines or paragraphs. It can be handy to have the option.

Site BB Code List

This is the sites built in list of usable BB Codes. Give it a look.

[Savenger]

THE BASICS

BBCode uses a pair of bracketed codes placed at either end of the text you want to change. The code word changes depending on what you want it to do. Further down the thread, you will find a list of the most useful codes.

Each code uses the Square Brackets: [ and ]. None of the other brackets will work with the BBCodes. Each of the codes bookend the text you want to alter, with one placed directly ahead of the text, and another directly after it. The second code always has a forward slash in it, set just before the codeword. Here is an example, note the forward slash:

[code]This is a BBCode Test[/code]

One of the most widely used codes is used to embolden or bold the text. The code to do this is a simple one: [B]. Here is the example:

[B]This is a BBCode Test.[/B]

Which comes out as:

This is a BBCode Test.

The codes only affect the text in between the bookends. All other text will remain the same. This allows the user to develop a body of text into a clearer and more attractive piece of writing. Often, the better it looks, the better it reads. If for instance you only wanted to highlight a single word as being important, moving the bookends in will do the trick. Take the word BBCode for example:

This is a [B]BBCode[/B] Test.

Which comes out as:

This is a BBCode Test.

It is recommended that you do not leave a space between the code bookends and the text to be changed. While it will still work perfectly well with spaces, they can hard to edit if more than a couple of codes are used on a single piece of text.

[url] www.ps3trophies.org [/url]
DO NOT put spaces between the code and the text to be altered.


[email]thisisatest@ps3t.org[email]
The end brackets MUST include a forward slash [/email].

Speaking of using multiple codes, the codes should be balanced across the text to be altered. They should work out from each end of the text in the same order on each side, from closest to furthest.

[U][I][B]This is Wrong.[/U][/I][/B]

[U][I][B]This is Right.[/B][/I][/U]

That’s the basics down. Some codes have their own foibles to learn, but they mostly follow the rules above. Now to go through each code one by one.

Note: Post Window refers to the original window opened when making a new post. Edit Window refers to the window opened to edit an old post.

[Savenger]

BASIC TEXT EDITING

The basic codes are used to highlight or differentiate words out of a larger body of text. It doesn’t really matter which is used, just that they are used sparingly and to good effect. The most ubiquitous codes are bold, italic and underline:

Codes: [b]Bold[/b] - [i]Italics[/i] - [u]Underline[/u]
Effect: Bold - Italics – Underline

Shortcut: Button in Edit Window


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

BOLD

Bold is best used for small amounts of high impact visuals: headings, hyperlinks or important details. It is better to only use it for a few words at a time. Large bodies of emboldened text is a visual no-no. It is very heavy and hard to read in large quantities. Code example below:

This is a [b]BBCode[/b] Test.
Which comes out as:
This is a BBCodeTest.

Shortcut: Button in Edit Window


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

ITALICS

Italics are best used when larger amounts of text need to be highlighted: quotes, descriptions or an additional note or tip. Again it is better to only use it when needed. It losses its ability to highlight when used in large quantities in a single thread. Code example below:

This is a [i]BBCode[/i] Test.
Which comes out as:
This is a BBCodeTest.

Shortcut: Button in Edit Window


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

UNDERLINE

Underline is best used for small amounts of high impact visuals: warnings, hyperlinks or important details. It works best for negative meaning: warnings, ‘never ever do this’ type warnings, etc. Large bodies of underlined text is a visual no-no. It is extremely heavy and hard to read in large quantities. Code example below:

This is a [u]BBCode[/u] Test.
Which comes out as:
This is a BBCodeTest.

Shortcut: Button in Edit Window


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

USED IN COMBINATION

These codes, like all codes can be used in combination. Make sure they radiate out from the text being altered, balanced on both ends. Code example below:

[B][I][U]This is a BBCode Test.[/U][/I][/B]
Which comes out as:
This is a BBCodeTest.

Shortcut: Button in Edit Window


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

MODIFIERS

Text can also be differentiated by size, color and font use. Again, it doesn’t really matter which is used, just that they are used sparingly and to good effect. Each of these codes has a changeable value: the size can change between the values set by the site administrator; the color can change through the spectrum of colors supported by the site; and the font can change through all supported fonts. These values are changed by changing the value in the first bracket. This value is shown as test in the codes below:

Codes:
[size=value]Text[/size] - [color=value]Text[/color] - [font=value]Text[/font]

Usage:
[size=6]Size[/size] - [color=red]Color[/color] - [font=courier]Font[/font]

Effect:
Size - Color – Font


Shortcut: Buttons in Post Window


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

SIZE

Resizing is best used when small amounts of important text needs to be highlighted: headings or perhaps captions, notes and tips. Size matters, so bigger than normal for headings and the like, and smaller than normal for captions. Again it is better to only use it every so often. Try to keep the thread fairly uniform, as too many variances in size is jarring. Normal text size for PS3Trophies.org is “4”. Code example below:

[size=6]This is a BBCode Test.[/size]
Which comes out as:
This is a BBCodeTest.

Shortcut: Button in Post Window


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

COLOR

Color is best used when small amounts of important text needs to be highlighted: headings or key points, notes and tips. Again it is better to only use it every so often. Try to keep the thread fairly uniform, as too many variances in color is garish. Normal text color for PS3Trophies.org is “grey”. Code example below:

[COLOR="red"]This is a BBCode Test.[/COLOR]
Which comes out as:
This is a BBCodeTest.

Shortcut: Button in Edit Window


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

FONTS

Fonts are arguably the single biggest visual change you can make. Unlike the rest of the codes, t is best used for large bodies of text, on mass rather than piecemeal. Try to keep the thread fairly uniform, as too many variances in font looks scattered. Ideally, work to a two font maximum. Code example below:

[font=courier]This is a BBCode Test.[/font]
Which comes out as:
This is a BBCodeTest.

Shortcut: Button in Post Window


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

HIGHLIGHT

Another code can be used to highlight text in a certain color. In PS3Trophies.orgs case, it will turn the text red and embolden it at the same time. More often than not though, it is easier to do this your own way. Code example below:

[highlight]This is a BBCode Test.[/highlight]
Which comes out as:
This is a BBCodeTest.

Shortcut: None

[Savenger]

TEXT ALIGNMENT

These codes are used to place the text in the thread window. They can be used to differentiate headings or position images, videos, quotes, etc. The first of these codes are left align, center align and right align:

Codes:
[left]Text Alignment[/left]

[center]Text Alignment[/center]

[right]Text Alignment[/right]


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

Effect:

Left Align -

- Center Align -

- Right Align

The basic codes are used to highlight or differentiate words out of a larger body of text. It doesn’t really matter which is used, just that they are used sparingly and to good effect. They should allow the readers eye to flow down the page. They should not have to ping pong from the left to the right and back as they move down the page. It should look smooth from line to line, affording easy eye movements.

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

LEFT ALIGN

The most common alignment is Left Align. It is also the default setting for all forums. It is default for a reason. Do not move away from Left Align unless you have a good reason. Nearly every continuous body of text should stay Left Aligned. It is the format we all learned to read by, so it is expected unconsciously by the reader. Code example below:

[left]This is a BBCode Test.[/left]
Which comes out as:

This is a BBCode Test.

Shortcut: Button in Edit Window


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

CENTER ALIGN

Just as useful but not as common is Center Align. It is a great way to offset a heading or tip to highlight importance. Large bodies of text in center align is generally a no-no. It is hard enough to read, and looks funky visually. Used right, it can liven up a thread. Code example below:

[center]This is a BBCode Test.[/center]
Which comes out as:
This is a BBCode Test.

Shortcut: Button in Edit Window


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

RIGHT ALIGN

By far the least common is Right Align. Rarely used, it is mainly reserved for captions to images or quotes. Generally avoid. Code example below:

[right]This is a BBCode Test.[/right]
Which comes out as:

This is a BBCode Test.

Shortcut: Button in Edit Window


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

INDENT

The indent is used to offset a portion of text from the main. They can be used to indent quotes, tips or points of interest. The first of these codes are left align, center align and right align:

Code: [indent]Text Indenting[/indent]
Usage: [indent]This is BBCode Test[/indent]


[indent]This is a BBCode Test.[/indent]
Which comes out as:

This is a BBCode Test.

This is a BBCode Test.
This is a BBCode Test.

Shortcut: None

[Savenger]

BULLETED LISTS

There are a few different ways to list information in a thread. First up is Bulleted Posts: the ubiquitous list with dotted bullets and an indented list.

Important: always Left Align a list. If Center or Right Aligned, the list points go out of whack. The list becomes ugly and visually messy. It becomes extremely hard to follow by eye. Also try to limit the size of each bullet point. The shorter each point is, the better it will look/work. Code example below:


Code: [list]Bulleted List[/list]
Usage: [list][*]Bullet point test 1[*]Bullet point test 2[/list]

Effect:
• Bulleted point test 1
• Bulleted point test 2

Shortcut: None

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

NUMBERED LISTS

There are a few different ways to list information in a thread. Next up is Numbered Points: the ubiquitous list with numbered bullets and an indented list.

Important: always Left Align a list. If Center or Right Aligned, the list points go out of whack. The list becomes ugly and visually messy. It becomes extremely hard to follow by eye. Also try to limit the size of each bullet point. The shorter each point is, the better it will look/work. Code example below:


Code: [list=1]Bulleted List[/list]
Usage: [list=1][*]Bullet point test 1[*]Bullet point test 2[/list]

Effect:
1. Bulleted point test 1
2. Bulleted point test 2

Shortcut: None

[Savenger]

IMAGE INTEGRATION

There are two types of images that can be used: Plain Visual and Linked Visual. Plain visual is just a plain view of the image. When placing images in a thread, always remember to center the image in that thread. They tend to look much better. Also, to avoid the ‘this image has been resized’ surround, make sure the image is smaller than 630 pixels wide. Much more than that and surround pops up. Code example below:


PLAIN VISUAL:

Codes: [img]Image URL[/img]

Effect:


Shortcut: Button in Edit Window


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

The Linked Visual looks exactly the same. But it allows for the image to be clicked so that a larger image, another thread or another site can be reached, They are the most visually attractive link types. Code example below:


LINKED VISUAL:

Codes: [url=Link URL][img]Image Url[/img][/url]

Effect:


Shortcut: Button in Edit Window

[Savenger]

HYPERLINKING

There are numerous ways to link to other content based around the site and across the web.

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

URL LINKS

Direct URL links directly to another webpage. This can be done in two ways: Direct Link or Indirect Link. With the Direct link, the Address URL is visible to the user, highlighted and ready to be clicked.


DIRECT LINK:

Code: [url]Direct Link[/url]
Usage: [url]www.ps3trophies.org[/url]

Effect: www.ps3trophies.org

Shortcut: Button in Edit Window

Indirect Links hide the URL behind a word, phrase or image chosen by the author. They are often more visually appealing and are recommended.


INDIRECT LINK:

Code: [url=value]Indirect Link[/url]
Usage: [url=www.ps3trophies.org]Indirect Link[/url]

Effect: Indirect Link

Shortcut: Button in Edit Window


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

EMAIL LINKS

The same two options are available for email links. Email links open directly to the email account. This can be done in two ways: Direct Link or Indirect Link. With the Direct link, the Address URL is visible to the user, highlighted and ready to be clicked.


DIRECT LINK:

Code: [email]Direct Link[/email]
Usage: [email]user@ps3trophies.org[/email]

Effect: user@ps3trophies.org

Shortcut: Button in Edit Window

Indirect Links hide the URL behind a word, phrase or image chosen by the author. They are often more visually appealing and are recommended.


INDIRECT LINK:

Code: [url=value]Indirect Link[/url]
Usage: [url=user@ps3trophies.org]Indirect Link[/url]

Effect: Indirect Link

Shortcut: Button in Edit Window


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

THREAD LINKS

The same two options are available for thread links. Thread links open directly to another related thread. This can be done in two ways: Direct Link or Indirect Link. With the Direct link, the Address URL is visible to the user, highlighted and ready to be clicked.


DIRECT LINK:

Code: [thread]Direct Link[/thread]
Usage: [thread]24059[/thread]

Effect: http://www.ps3trophies.org/forum/showthread.php?t=24059

Shortcut: Button in Edit Window

Indirect Links hide the URL behind a word, phrase or image chosen by the author. They are often more visually appealing and are recommended.


INDIRECT LINK:

Code: [thread=value]Indirect Link[/thread]
Usage: [thread=24059]The Test Thread[/thread]

Effect: The Test Thread

Shortcut: Button in Edit Window


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

POST LINKS

Lastly, the same two options are available for post links. Post links open directly to another related post. This can be done in two ways: Direct Link or Indirect Link. With the Direct link, the Address URL is visible to the user, highlighted and ready to be clicked.


DIRECT LINK:

Code: [post]Direct Link[/post]
Usage: [post]321726[/post]

Effect: http://www.ps3trophies.org/forum/showthread.php?p=321726

Shortcut: Button in Edit Window

Indirect Links hide the URL behind a word, phrase or image chosen by the author. They are often more visually appealing and are recommended.


INDIRECT LINK:

Code: [post=value]Indirect Link[/post]
Usage: [post=321726]The Test Thread[/post]

Effect: The Test Thread

Shortcut: Shortcut: Button in Edit Window

[Savenger]

TEXT VIEWERS

Lastly, we get to the text viewers. There are several different ways of presenting information in threads. Only four of them are really useful in the context of guide writing: Spoiler Boxes, Quote Boxes, Code Boxes and Anti Parsing.

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

SPOILER BOXES

Spoiler boxes prevent other members from unwittingly reading anything that might spoil their enjoyment of a game: key storylines, secret character, who the killer is, etc. It is considered a cardinal sin to spoil a game on another user. So learn this one well. Example below:

Codes: [spoiler=unique id]Spoiler Text[/spoiler]

Usage: [spoiler=S1]This is a Spoiler[/spoiler]

Effect:

Spoiler! (click here to reveal)

This is a Spoiler

Shortcut: Currently NONE

There are some wider issues involved with spoilers.

You should all read THIS THREAD as well for a more in depth explanation of using them.

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

QUOTE BOXES

Quote boxes allow you to quote another members post from anywhere on the site. It is a great way to add a tip or strategy to a guide while simultaneously giving the original poster their due credit. There are two types of quote: Unaccredited and Credited. Unaccredited has no mention of the original user. You should not use this one too often, if at all. Code example below:

Codes: [quote]Unaccredited Quote[/quote]

Usage: [quote]This is a Unaccredited Quote[/quote]

Effect:

This is a Unaccredited Quote

Shortcut: NONE

Credited quotes posts the name of the original user along with the quote itself. You should be using this one whenever quoting someone. They come in two flavors: Named and Direct Quote. Named just adds a username. A Direct Quote links directly to the original post. Code examples below:

NAMED QUOTE:

Codes: [quote=username]This is a Named Quote[/quote]

Usage: [quote=Savenger]This is a Named Quote [/quote]

Effect:

Originally Posted by Savenger

This is a Named Quote

Shortcut: NONE

DIRECT QUOTE:

Codes: [quote=username;post number]Direct Quote[/quote]

Usage: [quote=Savenger;666544]This is a Direct Quote[/quote]

Effect:

Originally Posted by Savenger

This is a Direct Quote

Shortcut: Button Available


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

CODE BOXES

Code boxes prevent the BBCodes themselves from acting. As its name suggests, it is for displaying code to others. If you tried to explain any of the above BBCodes to someone else in a thread, every time you typed them, they would activate. Only the result could be viewed. This code allows the others to be seen. It is clunky looking though, and I would recommend using Anti Parsing explained in the next section. That is the method I used for this very guide. Here is a code example for the inferior Code Box:

Codes: [code]Code Box[/code]

Usage: [code]Inactivate Code[/code]

Effect:

Inactivate Code

Shortcut: NONE


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

ANTI PARSING

The last code, and one of the most important, is the Anti Parsing code. Its job is to prevent all the other codes from activating or parsing. Any other codes that are in between the noparse codes are basically counteracted and cancelled out. This is very handy when trying to show others the codes to do something, like I have had to do in this guide. It also has the added bonus of not requiring a box out. Code example below:

Codes: [noparse]Code to show[/noparse]

Usage: [noparse][b]How to Bold Code[/b][/noparse]

Effect: [b]How to Bold Code[/b]

Shortcut: NONE

That’s it for now. Hopefully that will help out members who do not know how BBCode works. The best and quickest way to learn this stuff is to go and use it. Play around with it, see what it can do. You’d be surprised what can be done.

If you want anything added to this thread, or feel anything is wrong and needs changing, post away. Other than that, enjoy!

[OstKakan]

Awesomeness! Thanks for the help!!!

[mjc0961]

Damn guys, that sure took you a while to decide what to do with this thread.