The Art & Beauty of BBcoding

< A.K.A. The Most Comprehensive Coding Guide on RPGuild >
_{( And for bloody sake bookmark this before you come to me crying about why your code is broken. Thank you very much. )}



"Smart data structures and dumb code works a lot better than the other way around."
--Eric Raymond
_{P.S. Also very applicable to assholes.}

• Do not post your comments in this thread. Any suggestions and feedback - including compliments or even complains - can be directed to me via PM. If you seriously hate me so much for whatever reasons that you must curse at my effort publicly, the Spam Board is there for you to bomb.

• This guide is written for only two purposes:
  
  • One, to help those who are still struggling to figure out how BBcode works (some have mentioned the formatting cheatsheet at the bottom is very outdated);
  • Two, to share some tricks I have learned with the coding hobbyists on this site, and in turn impart these tips to anyone who's interested to advance further in the art of BBcoding.
  
  I have noticed a couple of threads where roleplayers can showcase their CS templates, and I thought I can play a part to enhance this experience with this guide, helping RPers to DIY their own sheets uniquely catered for their own games.

• You do not need to credit me if you want to borrow any resources from this guide. I'm doing this voluntarily, and some of the stuff are from external sources - which I obviously don't own, anyway.

• Occasional sarcasm and snarky jokes may be hidden somewhere between the lines of this thread, but rest assured that none of them is referring to any specific person, living or dead. Just a heads up to those edgelords who can't resist to fly off the handle whenever they read too much into the darker humor.

• This guide will be updated bit by bit as and when I have the free time to finish writing the new sections. Please understand that I have a (shitty) real life to live outside of cyberspace.

• Last but not least, bookmark this guide if you must for convenience sake and daily self-revisions. It'll come in handy before you go into full breakdown mode because of your stupidity. (Don't worry, I've been there - with Python, GML... among many other computer languages ten times more complicated than BBcode, yeah.)

• The Basics
  
  • Added tables! Very important! Special thanks to a reference @NuttsnBolts showed me long ago.

Bold
[b]Bold[/b]

Italic
[i]Italic[/i]

Underline
[u]Underline[/u]

Strikethrough
[s]Strikethrough[/s]

Word^Superscript
[sup]Superscript[/sup]

Word_Subscript
[sub]Subscript[/sub]

Heading 1

[h1]Heading 1[/h1]

Heading 2

[h2]Heading 2[/h2]

Heading 3

[h3]Heading 3[/h3]

Left
(Default alignment)

Indent
[indent]Indent[/indent]

Dead Center
[center]Dead Center[/center]

All Right
[right]All Right[/right]

• Item 1
• Item 2
• Item 3
  
  • Nested A
  • Nested B
  • Nested C
    
    • Nested X
    • Nested Y
    • Nested Z

[list][*]Item 1
[*]Item 2
[*]Item 3
[list][*]Nested A
[*]Nested B
[*]Nested C
[list][*]Nested X
[*]Nested Y
[*]Nested Z[/list][/list][/list]

By Name
Yellow
[color=yellow]Yellow[/color]

By Hex Code
Yellow
[color=ffff00]Yellow[/color] or [color=#ffff00]Yellow[/color]

(List of color names and hex codes can be found here.
Use this page to preview the colors against dark background.)

Unmentioned quote

Quote w/o Notification

Quote w/ Notification

Hider [+]

DA HIDER

[hider]DA HIDER[/hider]

[+]

NO TITLE

[hider=]NO TITLE[/hider]

Clicky [+]

BOO!

[hider=Title Here]BOO![/hider]

Link Only
google.com
(Just leave the link as it is, obviously.)

Link With Text
Google is your best friend, yes.
[url=link]Text to be linked[/url]

Images

[img]Image link[/img]
(Accepted formats: .jpg/.jpeg, .gif, .png)

YouTube Videos

[youtube]Link here. And because of Harley Quinn.[/youtube]

Without Border
Use the code tag!
[code]Text here[/code]

With Border

Use the pre tag!

[pre]Text here[/pre]

(Note that the 'pre' tag doesn't wrap huge paragraphs and break into lines; instead you'll get a horizontal scrollbar. I suggest using the 'code' tag instead for massive walls of text.)

Noparse
Uh... nothing happened?
[noparse]Because everything that goes in here will only be displayed as plain text. Useful for template work.[/noparse]

Horizontal Rule

---

[.hr] - and remember to remove the dot so that it works properly!

Abbreviation
Just hover your cursor over this text...
[abbr=Here goes the BS secret.]And here goes the blatant crap.[/abbr]

(Sadly, the abbr only works on computers with a mouse cursor, not on touchscreen mobile devices.)

>And... what the hell is this?
(Because of the '>'.)

Bordered Table

1	2	3
4	5	6

[table=bordered]
[row][cell]1[/cell][cell]2[/cell][cell]3[/cell][/row]
[row][cell]4[/cell][cell]5[/cell][cell]6[/cell][/row]
[/table]

• I keep getting an error message when I use the Preview Mode / my coding is off after I posted my stuff up. Why is this happening?
  
  Other than forgetting to close the coding tags properly, another common cause is due to misalignment of the code tags. Unlike human beings, the computer is stupid isn't very smart, so proper alignment is very important. For example, when you want to make a italicized and underlined text, you can do this:
  
  

  Slanted on a Line
  [i][u]Slanted on a Line[/u][/i] or [u][i]Slanted on a Line[/i][/u]

  
  By human logic, wrapping the code tags this way [u][i]Slanted on a Line[/u][/i] make sense to us since both the italic and underline tags are closed, but this messes up the computer's logic: should the underline come first, or the italic? The computer isn't flexible as the human brain, and it follows a strict systematic way of converting our codes into presentable text.
  
  Hey, if the computer can figure that out, it won't need us anymore.

• I want to change the link color to something else to suit my overall design...
  
  It's easy - wrap the color tag inside of the link code like this:
  
  

  [url=link here][color=???]Insert Witty Link Text Here[/color][/url]

  
  You should get this: BBCoding is Art

• How can I turn my image into clickable link?
  
  Similar concept as changing link color. Simply wrap the image tag inside of the link code like this:
  
  

  [url=link here][img]Image Link Here[/img][/url]

  
  You should get something like this:
  
  (Go on - click it and bow down to my awesomeness it should work perfectly.)

• Single-color text looks boring. How can I create a fading effect on the text?
  
  You can use the Text Color Fader to help you generate the codes to achieve the fading look. Here is an example:
  
  

  Coral and Skyblue
  [color=#ff7f50]C[/color][color=#f8845a]o[/color][color=#f08963]r[/color][color=#e98e6d]a[/color][color=#e19377]l[/color] [color=#d29d8a]a[/color][color=#cba294]n[/color][color=#c3a79e]d[/color] [color=#b4b0b1]S[/color][color=#adb5bb]k[/color][color=#a5bac4]y[/color][color=#9ebfce]b[/color][color=#96c4d8]l[/color][color=#8fc9e1]u[/color][color=#87ceeb]e[/color]

  
  Don't get overwhelmed by the code! All you need to do is to play around with the settings on the site (link already provided yo), then copy-pasta the generated code. It's that simple.

• How do you make all those fancy font headers that I've seen around the site?
  
  Different members may use different methods to achieve that effect, but the general gist is: this forum doesn't provide all those fanciful fonts. So... welp? No worries, Tsu is here to your rescue.
  
  Method 1: As direct stylized text from external generator sites
  
  
  As some of the members are already aware, @Buddha has already made this post with an archive of special symbols you can use by piecing them together to create your fancy titles. However, for those people who visit RPGuild using mobiles, you would notice that sometimes the symbols are represented by blank boxes, or they simply vanish into thin air.
  
  Personally I'd recommend using this generator site called Webestools, which is easy to use and has enough choices you can pick from. Also, most symbols should still be visible on mobile platforms - at least from what I've tested so far (see le subtext below mah name in the sidebar).
  
  Method 2: As image files before plugging them into your post
  
  
  I recommend 1001 Fonts for those who want a quick and easy way to create fancy word headers without having to go through Photoshop and other image editors. They have a pretty huge collection of different font types in various categories, ranging from medieval fantasy to sci-fi, and many more. You can copy-pasta the image link from the site itself, no need to save on your computer and then upload to cloud - simple and hassle-free.
  
  If you want more control over the design, you're better off abusing the layer effects on image editing softwares such as Photoshop. After which, upload the image file (in PNG format to preserve transparency for the background) to third-party sites such as Imgur, Photobucket, Tumblr etc, then use the [img][/img] code to embed your header into your posts.

• Is it possible to make direct text overlap images without having to use image editors?
  _{(special thanks to @Noxious)}
  
  Yes, it's possible. Here's an example to give you an idea how to do that:
  
  

  т _{s υ к υ η} ε

  

  
  [center][sub][h1][sub]Text[/sub][/h1][/sub][img]Image link[/img][/center]

  
  The overlapping only happens close to the edge of the image canvas, so if there are blank spaces between the image and the canvas border, the overlap won't work properly. Since this is rather advanced stuff, be prepared to do lots of trial and error to get your desired effect.
  
  If you wish to have more freedom and control over your design, you're better off using an image editor.

• Images. As the saying goes, "A picture can speak a thousand words."
• Headers, Horizontal Rules and Indents. This helps to separate the different sections with better clarity, so that players are able to digest the information better.
• Colors. Hey, try to add some life into the Check, instead of just whitewash against the dark background... Unless you're a monochrome fanatic, which I won't stop you.

• For Group, the design is modeled after a combination of standard blog templates (e.g. WordPress, Tumblr) and magazine article layout.
  
  
  Int Check | Group [+]

  ---

  ---

  Title

  OPTIONAL. Subtitle
  
  ^{OPTIONAL. If the RP is based on fandom, or inspired from existing works, you can indicate in one line here.}
  
  
  
  "OPTIONAL.
  Quotes can help to increase the players' feeling of immersion towards the roleplay."
  
  — Where the quote originates from, duh.
  
  

  Main Theme [+]

  OPTIONAL. Tone of the music you choose as theme can help to give players an overall feel of the roleplay you're going for.

  
  

  ---

  PREMISE

  < Introduction >
  

  ---

  
  
  A synopsis of the roleplay's story. It can be a short summary of the plot, or a catchy preview. Basically, this is similar to you'd see on the back of a DVD or Blu-Ray cover, or in video trailers.

  
  

  ---

  OVERVIEW

  < Information >

  ---

  
  
  The World
  

  A short write-up about the setting of the roleplay. Is it set in the past, present, or future? Is the location somewhere on Earth, or in a faraway galaxy? If it's based on fandom, is it a prequel/sequel, or an AU?

  
  
  The Characters
  

  What kind of cast are you expecting from the players - fantasy creatures, realistic humans, or alien races? What else must the players take note of to help them decide if their character is able to fit in with your roleplay world or not?

  
  
  The Theme
  

  What is the main focus of the roleplay - teen angst, school comedy, or something else/much more? It's also good to address stuff such as character death, exploration of darker and more mature topics, et cetera.

  
  
  The Style
  

  What's the level of writing: free, casual, or advanced? Linear or sandbox? First or third person? Strictly play by post or collaboration heavy? This is important to let the players know if they can still fit into the roleplay well in terms of their skills as a roleplayer, other than character creation.

  
  
  The Highlight
  

  OPTIONAL. Anything else you want to emphasize or bring up to convince the players why they would find your roleplay more interesting than the tons out there on the site.

  
  
  Inspirations & Influences
  

  • OPTIONAL. As the section title says.

  
  

  ---

  ---

• For 1x1, it's modeled after a combination of character sheets and general profile page write-ups.
  
  
  Int Check| 1x1 [+]

  ---

  ---

  [Your Name Here]'s 1x1 Interest Check

  (Or you can come up with some witty titles to call your Check thread, if you want.)

  
  

  ---

  
  

  About Me:

  • This section is where you give a short intro of yourself - not trivia about you, but things like your writing level, your online schedule, and other roleplay-related stuff.
  • You may also include links of your writing samples for better illustration.

  
  

  Looking For:

  • Here's where you state what you expect from your roleplay partners, such as writing level, online frequency, age rating, et cetera.

  
  

  Plot Bunnies:

  • Plot Title #1 [+]

    Information about the plot idea goes here - synopsis, pairing, the character you're playing, and the partner character you want for this particular idea.

  
  

  Fandom List:

  • As the header says.
  • Once taken, strike through.

  
  

  Pairing List:

  • Again, as the header says. Bold the character that you're playing if you must.
  • Twice taken, another strike through.

  
  
  (Any final words? Such as how the potential players can contact you - in the check thread or PM?)
  
  

  ---

  ---

• Enigma Final Fantasy | @tsukune
• Hollow Stone: Slaves of the Apocalypse | @Gowi
• Garden of Shadow | @Little Kitsune & @NuttsnBolts
• Frequencies | @MissCapnCrunch
  
  (If you wish to share your samples, just drop me a PM with the link. All credits will be given accordingly where appropriate.)

• One, it serves as an application form for potential players to submit the character they have in mind they want to pitch to the GM and get themselves killed in the IC later;
• Two, once your character is accepted, it becomes the official profile of your character. This is especially important in RPs with heavy lore or are heavily character-driven, where the GM and players would need to use the Char Sheet as reference point to maintain consistency In-Character.

Sample CS [+]

---

---

Character Name

OPTIONAL. Other names; i.e. nickname, codename, name written in some ancient tongue that nobody cares, etc.



"OPTIONAL. A quote here that can show an important aspect of your character. May be quotes by some famous scientific madmen, or something dirty quirky that came out of your character's mouth in IC, I dunno."
— Le owner of the epic one-liner, obviously.

---

---

NAME

Yes - your full name, please.

OTHER NAMES

For your embarrassing nicknames, badass alias, shady secret identities... or even lame-o online monikers.

GENDER

Sub-section: Sexuality. Dude or dudette? Or even hermaphrodite? Or you're just proud to be agender like a boss.

AGE

Sub-section: Birthdate. Can range from newborn babies, to decaying vampire ruined by Twilight's sparkling diamond statues.

RACE

Sub-section: Nationality. Racism is everywhere. Deal with it.

DISTRICT

Sub-sections: Birthplace, Hometown, etc. Better mark your territories fast, or you'll be homeless for Christmas. Wait, Christmas' already over. Oh well.

APPEARANCE

Sub-sections: Attire, Accessories. Sadly, first impression is everything, especially in today's society where looking like outrageous Barbie clones is better than being just a humane human.

PERSONALITY

The most important part about any characters, ever. This is where the GM will use to review your ability to play the character you're applying for well - or at least to whatever standards the GM has in mind.

HOBBIES

Other names: Likes & Dislikes. Optional since this can be weaved into the character's personality section, but some GMs like to have a separate category for this.

HISTORY

Other names: Backstory, Biography/Bio, etc. Another important section about your character, and also where the GM can use to determine if your character (1) suits their RP setting, and (2) if you truly grasp the GM's world you are about to hop into.

RELATIONSHIPS

Other names: Dynamics. May be part of one CS, or some GMs may prefer to split into a separate sheet.

ABILITIES

Sub-sections: Powers, Talents, etc. Especially important in RP settings where regulation of power level among the cast is essential. Also a place where the GM can whip your ass into shape if you think you can get away playing some shady omnipotent OP troll.

OTHERS

Sub-sections: Trivia, Theme Music, Quotes, etc. Basically this is the place where whatever extra nuggets of your Self-Insert about your character cannot fit into any of the conventional categories the GM has specified in their CS templates.

• The sample above is merely what it's meant to be: a sample. You are free to tweak around, (i.e. rearrange and regroup the categories, add or remove the sections...) Anything you want to do to make a CS template that fits your RP, or to make your CS look professional and neat (if you're a player).

• Adding to my previous point, I tried to keep the sample design as simple as possible without stepping down on the aesthetic appeal. I'd say this sample is how a basic CS should at least look like with some good use of coding art.

• The categories and sections as depicted in the sample are not comprehensive and only for viewing purpose only. After all, the main purpose of this article is to help you beautify your CS, not teach you how to write the meat of the CS.

• Some categories have things like 'sub-sections' and 'other names' - what do they mean? As I've said, this sample is a generic, basic structure you can use as a base reference. Different GMs, or depending on RP settings (sometimes even player preferences), may split the main header into further sub-categories, or use other terms to replace those conventional ones. I chose to group them together accordingly where appropriate to focus on the overall appeal, not the technical structure of what a CS should have.

• Tsukune Reservoir Chronicle
• Gowi's Character Log [2.0]
• NuttsnBolts: Characters of Interest