Savenger Posted March 19, 2010 Share Posted March 19, 2010 (edited) 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. -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. Edited November 11, 2020 by Slamma Link to comment Share on other sites More sharing options...
Savenger Posted March 19, 2010 Author Share Posted March 19, 2010 (edited) 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. [noparse]This is Wrong. This is Right.[/noparse] 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 March 19, 2010 by Savenger Link to comment Share on other sites More sharing options...
Savenger Posted March 19, 2010 Author Share Posted March 19, 2010 (edited) 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 - 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: [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 - 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: [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 August 24, 2017 by FootballPsycho Update. Link to comment Share on other sites More sharing options...
Savenger Posted March 19, 2010 Author Share Posted March 19, 2010 (edited) 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 August 24, 2017 by FootballPsycho Update. Link to comment Share on other sites More sharing options...
Savenger Posted March 19, 2010 Author Share Posted March 19, 2010 (edited) 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: Bulleted List Usage: Bullet point test 1 Bullet point test 2 [/noparse] Effect: 1. Bulleted point test 1 2. Bulleted point test 2 Shortcut: Button in Post Window Edited August 24, 2017 by FootballPsycho Update. Link to comment Share on other sites More sharing options...
Savenger Posted March 19, 2010 Author Share Posted March 19, 2010 (edited) 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 March 19, 2010 by Savenger Link to comment Share on other sites More sharing options...
Savenger Posted March 19, 2010 Author Share Posted March 19, 2010 (edited) 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 August 24, 2017 by FootballPsycho Update. Link to comment Share on other sites More sharing options...
Savenger Posted March 19, 2010 Author Share Posted March 19, 2010 (edited) 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 August 24, 2017 by FootballPsycho Update. Link to comment Share on other sites More sharing options...
OstKakan Posted August 7, 2010 Share Posted August 7, 2010 Awesomeness! Thanks for the help!!! Link to comment Share on other sites More sharing options...
mjc0961 Posted August 7, 2010 Share Posted August 7, 2010 Damn guys, that sure took you a while to decide what to do with this thread. Link to comment Share on other sites More sharing options...
olsen77 Posted August 7, 2010 Share Posted August 7, 2010 It was always there, it was just buried in the encyclopedia. We've had it open since the day after it was created. Link to comment Share on other sites More sharing options...
mjc0961 Posted August 7, 2010 Share Posted August 7, 2010 Guess that shows how much I come in here. Link to comment Share on other sites More sharing options...
DigitalElf Posted August 29, 2010 Share Posted August 29, 2010 Tnx 4 help! Great!!! Link to comment Share on other sites More sharing options...
matlock49g Posted August 30, 2010 Share Posted August 30, 2010 Very informative. Thankyou much. Link to comment Share on other sites More sharing options...
AriaRobbie Posted September 19, 2010 Share Posted September 19, 2010 I'm new to BBcodes, so thank you very much for putting this up. I am very grateful. Link to comment Share on other sites More sharing options...
yewjhin Posted September 19, 2010 Share Posted September 19, 2010 (edited) 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 September 25, 2010 by yewjhin Link to comment Share on other sites More sharing options...
KryptoniteDragon Posted October 20, 2010 Share Posted October 20, 2010 So how do I center my sig picture? I tried what I thought was correct but I got what I typed showing up as text. Thanks. Link to comment Share on other sites More sharing options...
ShadowAFC Posted October 20, 2010 Share Posted October 20, 2010 (edited) [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 Wait..you didn't use noparse in there as well, did you? Edited October 20, 2010 by ShadowAFC Link to comment Share on other sites More sharing options...
KryptoniteDragon Posted October 20, 2010 Share Posted October 20, 2010 [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 Wait..you didn't use noparse in there as well, did you? 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 More sharing options...
StarGate55555 Posted October 25, 2010 Share Posted October 25, 2010 awesome thread dude too bad i couldnt find it like 3 hours ago i would have saved myself like 2 hours work. lol Link to comment Share on other sites More sharing options...
GodOfPortway Posted November 30, 2010 Share Posted November 30, 2010 Hey thanks for a really useful thread Link to comment Share on other sites More sharing options...
ShnazybLuE Posted March 7, 2011 Share Posted March 7, 2011 Can the BBCode and the Site read an Animated Gif Image in my Sig? Cause I just made an Animated Userbar.. Link to comment Share on other sites More sharing options...
Pokkit_ Posted March 7, 2011 Share Posted March 7, 2011 Can the BBCode and the Site read an Animated Gif Image in my Sig? Cause I just made an Animated Userbar.. Yes, yes it can. Heck, can you not see it in your sig right now? Link to comment Share on other sites More sharing options...
Darth_Chaos007 Posted March 10, 2011 Share Posted March 10, 2011 (edited) How do you add userbars into the signature? Update: Never mind I found a way. Edited March 10, 2011 by Darth_Chaos007 Link to comment Share on other sites More sharing options...
Grafinenko Posted April 26, 2011 Share Posted April 26, 2011 I'm looking for the code of the yellow little "new" logo, i can't find it, thanks Link to comment Share on other sites More sharing options...
Recommended Posts