1. Home
  2. Articles & Guides

The Art & Beauty of BBcoding [COMPLETE]

Hidden 8 yrs ago → 8 yrs ago Post by tsukune
Raw —
OP
Avatar of tsukune

tsukune In Parodyse

Member Seen 6 yrs ago
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.

TL; DR
< Basic Etiquette & Author's Note >


  • 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.)


BULLETIN
< Updates & Other Notices >


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


9x Like Like 11x Thank Thank
Hidden 8 yrs ago → 8 yrs ago Post by tsukune
Raw —
OP
Avatar of tsukune

tsukune In Parodyse

Member Seen 6 yrs ago
The Basics
< a.k.a. Formatting Cheatsheet Revision >


Exactly as the title says. I'll be brief, and just quickly run through the most fundamental and commonly-used codes (which can be found in the cheatsheet all the way at the bottom of every forum page):

1. Font Styles & Decorations

Bold
[b]Bold[/b]

Italic
[i]Italic[/i]

Underline
[u]Underline[/u]

Strikethrough
[s]Strikethrough[/s]

WordSuperscript
[sup]Superscript[/sup]

WordSubscript
[sub]Subscript[/sub]


2. Headers

Heading 1
[h1]Heading 1[/h1]

Heading 2
[h2]Heading 2[/h2]

Heading 3
[h3]Heading 3[/h3]


3. Paragraph Alignments

Left
(Default alignment)

Indent
[indent]Indent[/indent]

Dead Center
[center]Dead Center[/center]

All Right
[right]All Right[/right]


4. Lists

  • 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]


5. Colors

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.)


6. Quotes & Mentions

Unmentioned quote
[quote]Unmentioned quote[/quote]

Quote w/o Notification
Name
[quote=Name]Quote w/o Notification[/quote]

Quote w/ Notification
[quote=@Username]Quote w/ Notification[/quote]

7. Hiders

[hider]DA HIDER[/hider]

[hider=]NO TITLE[/hider]

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


8. Media

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]


9. Monospace, Noparse, & Other Shenanigans

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

123
456
[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]


Bonus Material
< Extra Tips & Tricks >



  • 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.




Coming Next:
Interest Check, a.k.a. legalized advertising for your RP on a RP site.
(That sounds kinda redundant, but who cares.)
5x Like Like 6x Thank Thank
Hidden 8 yrs ago → 7 yrs ago Post by tsukune
Raw —
OP
Avatar of tsukune

tsukune In Parodyse

Member Seen 6 yrs ago
Interest Check
< a.k.a. Le RP Ad >



Interest Check (iCheck) isn't a necessity, but it's useful to help the GM to assemble enough players before starting the roleplay proper. You can say that iCheck is something like an advertisement to tickle the curious members lurking around the site to get out of their holes and just join in the fun.

Anyway.

There are already some guides on how to make iChecks, so I won't elaborate too much on that, and focus on the how to present the iCheck in a more visually appealing way. Just ask yourself: would you rather read something with walls of plain, boring text, or something else less strenuous to the human eyes that feels more lively and intriguing?

Here are the basic components to make an attractive Int Check:
  • 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.

The specific sections and info required for Group and 1x1 Checks are different, hence two separate samples. Both are kept as simple as possible without degrading visual appeal so that even coding noobs can achieve similar effect. They are also designed to be mobile-friendly.

(A gentle reminder to do your revision on this post before throwing retarded tantrums at me about why your codes ain't working.)

The samples are in hiders for organization purpose of this guide only - you don't need to put them in hiders for yourself, yeah. To see the coding, simply click on "View Raw" at the top-right corner of this post. Feel free to tweak around to suit your Int Check better.

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


  • For 1x1, it's modeled after a combination of character sheets and general profile page write-ups.



Bonus Material
< Going Further >



These samples are more advanced, but just listing them here for those who might be interested:





Coming Next:
Character Sheets, a.k.a. legalized Mary Sues okay nothing wrong with self-inserts unless you're so good at coming up with excuses to make yourself look flawless, that everyone starts thinking up a million ways to dissect your character... atom by atom.
1x Like Like 6x Thank Thank
Hidden 8 yrs ago → 7 yrs ago Post by tsukune
Raw —
OP
Avatar of tsukune

tsukune In Parodyse

Member Seen 6 yrs ago
Character Sheets
< a.k.a. Le Mary Sue You in the RP World >



Oh yes, everyone's favorite section is here to gorge your eyes-- okay, not really. Lame jokes aside, I'm pretty sure most of you can agree that it doesn't matter if you're a prideful GM who would rather to make your own rules than following other people around, or a lazy, laid-back player (like me!) who can't be bothered with the hassle and just want to have fun away from real life... Character Sheet (Char Sheet, or CS) is the one thing that every single roleplayer has to go through, usually before you can officially be a part of the wonderful cast in the many RPs out there.

Again, like the previous chapter on Interest Checks, I will not go into boring lectures on the technical details about the categories in a Character Sheet (I believe it has already been covered by other members before), but focus on the visual appeal aspect.

While the purpose of an Int Check is similar to advertising, a Char Sheet has a much bigger role to play in any RPs:
  • 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.

Similar to Int Check, the use of images, colors and proper separations between categories and paragraphs (headers, indents and horizontal lines) are useful to give a sleek, clean look that is not just pleasing, but comfortable to the eyes. After all, the GM will be squinting at your Char Sheet, and later all the other players are going to read it too.

Here be a simple, mobile-friendly layout I've put together to give you a gist of how coding is an essential factor in the readability of your CS:

Notes:
  • 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.


Bonus Material
< Going Further >



Here's a list of more advanced samples for reference for those who want inspirations to make more complicated layouts:


(If you'd like your stylized CS to be featured in this list, drop me a PM with the link. Credits will be given accordingly where appropriate.)


You can also refer to this post by @NuttsnBolts for more tips on Char Sheet coding.



Coming Next:
Huh, you still want more?
6x Thank Thank
Hidden 6 yrs ago Post by Mae
Raw —
Avatar of Mae

Mae Crayola

Member Online
[bump]
2x Like Like 1x Laugh Laugh
↑ Top
© 2007-2024
BBCode Cheatsheet