Jump to content

BBCode 101


Savenger

Recommended Posts

With the migration away from vBulletin to Invision, BBCode is no longer supported.

This guide is officially retired.

 

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.

 

 

 

 

 

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.

 

 

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

Edited by Slamma
Link to comment
Share on other sites

  • Replies 172
  • Created
  • Last Reply

Top Posters In This Topic

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:

 

 

[noparse]

This is a BBCode Test

[/noparse]

 

 

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

 

 

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

 

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:

 

 

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

 

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.

 

 

[noparse]http:// www.ps3trophies.org [/noparse]

DO NOT put spaces between the code and the text to be altered.

 

 

[noparse]thisisatest@ps3t.org

The end brackets MUST include a forward slash .[/noparse]

 

 

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.

 

 

 

 

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.

Edited by Savenger
Link to comment
Share on other sites

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:

 

 

[noparse]Codes: Bold - Italics - Underline[/noparse]

Effect: Bold - ItalicsUnderline

 

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:

 

 

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

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 loses its ability to highlight when used in large quantities in a single thread. Code example below:

 

 

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

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:

 

 

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

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:

 

 

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

Which comes out as:

This is a BBCodeTest.

 

Shortcut: Buttons 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:

 

 

[noparse]Codes:

Text - Text - Text

 

Usage:

Size - Color - Font[/noparse]

 

Effect:

Size - ColorFont

 

 

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:

 

 

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

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:

 

 

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

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, it 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:

 

 

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

Which comes out as:

This is a BBCodeTest.

 

Shortcut: Button in Post Window

 

 

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

 

HIGHLIGHT

Another code can be used to [highlight]highlight[/highlight] text in a certain color. In PlayStationTrophies.org's 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:

 

 

[noparse][highlight]This is a BBCode Test.[/highlight][/noparse]

Which comes out as:

[highlight]This is a BBCodeTest.[/highlight]

 

Shortcut: None

Edited by FootballPsycho
Update.
Link to comment
Share on other sites

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:

[noparse]

Text Alignment

 

Text Alignment

 

Text Alignment

[/noparse]

 

 

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

 

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:

 

 

[noparse]

This is a BBCode Test.

[/noparse]

Which comes out as:

This is a BBCode Test.

 

Shortcut: Button in Post 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:

 

 

[noparse]

This is a BBCode Test.

[/noparse]

Which comes out as:

This is a BBCode Test.

 

Shortcut: Button in Post 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:

 

 

[noparse]

This is a BBCode Test.

[/noparse]

Which comes out as:

This is a BBCode Test.

 

Shortcut: Button in Post 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. You can indent multiple times if desired. The first of these codes are left align, center align and right align:

 

 

[noparse]Codes:

 

Text Indenting

 

 

 

Double Indentation

 

 

Usage:

 

This is BBCode Test

 

 

 

This is BBCode Test

[/noparse]

 

 

[noparse]

This is a BBCode Test.

[/noparse]

Which comes out as:

This is a BBCode Test.

 

 

This is BBCode Test

 

Shortcut: Button in Post Window

Edited by FootballPsycho
Update.
Link to comment
Share on other sites

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:

 

 

[noparse]Code:

  • Bulleted List

 

Usage:

  • Bullet point test 1
  • Bullet point test 2

[/noparse]

 

Effect:

• Bulleted point test 1

• Bulleted point test 2

 

Shortcut: Button in Post Window

 

 

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

 

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:

 

 

[noparse]Code:

  1. Bulleted List

 

Usage:

  1. Bullet point test 1
  2. Bullet point test 2

[/noparse]

 

Effect:

1. Bulleted point test 1

2. Bulleted point test 2

 

Shortcut: Button in Post Window

Edited by FootballPsycho
Update.
Link to comment
Share on other sites

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:

 

[noparse]Codes:

Image%20URL[/noparse]

 

Effect:

http://www.ps3trophies.org/forum/images/PS3T/statusicon/forum_new.gif

 

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:

 

[noparse]Codes:

Image%20Url[/noparse]

 

Effect:

http://www.ps3trophies.org/forum/images/PS3T/statusicon/forum_new.gif

 

Shortcut: Button in Edit Window

Edited by Savenger
Link to comment
Share on other sites

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: [noparse]

http://Direct Link

Usage: http://www.playstationtrophies.org[/noparse]

 

Effect: http://www.playstationtrophies.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: [noparse]

Indirect Link

Usage: Indirect Link[/noparse]

 

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:

 

[noparse]Code: Direct Link

Usage: user@playstationtrophies.org[/noparse]

 

Effect: user@playstationtrophies.org

 

Shortcut: Button in Post 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:

 

[noparse]Code:

Indirect Link

Usage: Indirect Link[/noparse]

 

Effect: Indirect Link

 

Shortcut: Button in Post 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:

 

[noparse]Code: [thread]Direct Link[/thread]

Usage: [thread]24059[/thread][/noparse]

 

Effect: [thread]24059[/thread]

 

Shortcut: None

 

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:

 

[noparse]Code: [thread=value]Indirect Link[/thread]

Usage: [thread=24059]The Test Thread[/thread][/noparse]

 

Effect: [thread=24059]The Test Thread[/thread]

 

Shortcut: None

 

 

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

 

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:

 

[noparse]Code: Direct Link

Usage: 321726[/noparse]

 

Effect: 321726

 

Shortcut: None

 

 

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:

 

[noparse]Code: Indirect Link

Usage: The Test Thread[/noparse]

 

Effect: The Test Thread

 

Shortcut: None

Edited by FootballPsycho
Update.
Link to comment
Share on other sites

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: [noparse][spoiler=unique id]Spoiler Text

[/noparse]

 

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

[/noparse]

 

Effect:

[spoiler=S1]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 member's 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: [noparse]

Unaccredited Quote
[/noparse]

 

Usage: [noparse]

This is a Unaccredited Quote
[/noparse]

 

Effect:

This is a Unaccredited Quote

 

Shortcut: Button in Post Window

 

 

Credited quotes post 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: [noparse]

This is a Named Quote
[/noparse]

 

Usage: [noparse]

This is a Named Quote
[/noparse]

 

Effect:

This is a Named Quote

 

Shortcut: NONE

 

 

DIRECT QUOTE:

 

Codes: [noparse]

Direct Quote
[/noparse]

 

Usage: [noparse]

This is a Direct Quote
[/noparse]

 

Effect:

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: [noparse]

Code Box

[/noparse]

 

Usage: [noparse]

Inactivate Code

[/noparse]

 

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][noparse]Code to show[/noparse][/noparse]

 

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

 

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

 

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!

Edited by FootballPsycho
Update.
Link to comment
Share on other sites

  • 4 months later...
  • 4 weeks later...
  • 3 weeks later...

Olsen, just a question on the use of BBCodes and the 10000 Character Limits. If I have the following text for example :

 

  
List 1: ABCDEF
List 2: GHIJKLM

 

Now, if I want to have the whole text change color to black. It appears as the following (the spaces are intentional):

 

 
[ color=black ] List 1: ABCDEF [ / color ]
[ color=black ] List 2: GHIJKLM [ / color ]

 

Instead of

 

 
[ color=black ] List 1: ABCDEF
List 2: GHIJKLM [ / color ]

 

Wouldnt the second code be more efficient in saving characters, especially if there is a long list of stuff to write?

 

I found this while going through the edit history of one of my guides.

 

_____________________________________________________________________________

 

New stuff found while editing:

 

I always found it stupid and weird why some of my trophy guides who have auto "Enter", as in creating extra lines for me. I found that this was because of the way the bullet points work.

 

Each time I edit or preview, the code would create an extra line on any section above it where I used 'Enter' manually to start on a new line.

 

So if I edit it 5 times without manually deleting the extra lines, it would create 5 extra lines. Hence this is why I always edit my guide alot of times because each time I think it looks perfect (particular about appearance and formatting here) and I submit/save, an extra line pops up out of nowhere on the trophy descriptions where I used the shortcut for bullet points.

 

 

I have no resorted to manual bullet points like this:

 

* ABC

* DEF

1. GHI

2. KLM

 

 

 

 

 

instead of

  • ABC
  • DEF
  • GHI

Try editing and preview/save my post, I'm sure extra lines will pop up above the second list.(I tried and the gap between "2. KLM" and "instead" is widening)

Edited by yewjhin
Link to comment
Share on other sites

  • 1 month later...

[noparse]

sig url

[/noparse]

 

Or highlight what you want centered and click http://www.ps3trophies.org/forum/images/PS3T/editor/justifycenter.gif

 

If you did that then i have no idea :eek:

 

Wait..you didn't use noparse in there as well, did you? :think:

Edited by ShadowAFC
Link to comment
Share on other sites

[noparse]

sig url

[/noparse]

 

Or highlight what you want centered and click http://www.ps3trophies.org/forum/images/PS3T/editor/justifycenter.gif

 

If you did that then i have no idea :eek:

 

Wait..you didn't use noparse in there as well, did you? :think:

 

I kept trying this and it only seems to work every other time. hmmm...hopefully it will keep working. Thanks though

Link to comment
Share on other sites

  • 1 month later...
  • 3 months later...
  • 1 month later...
  • Slamma unpinned and locked this topic
Guest
This topic is now closed to further replies.

×
×
  • Create New...