tsukune

Men vs. Women Race to 1000

447

Shuffle your music player and post the first 10 songs

1. Butter-Fly ~tri.Version~ — Koji Wada — Digimon Adventure Tri. OP
2. over the clouds — alan — God Eater Burst OP
3. 99 — MOB CHOIR — Mob Psycho 100 OP
4. Legend — Mitsuto Suzuki — Mobius Final Fantasy Original Soundtrack
5. I'm A Believer — SPYAIR — Haikyuu!! Second Season OP01
6. Dearly Beloved — Yoko Shimomura — Kingdom Hearts II Original Sountrack
7. Flavor of Life (ballad version) — Hikaru Utada — HEART STATION
8. Memory Fragments (DMW) — Takeharu Ishimoto — Crisis Core: Final Fantasy VII Original Soundtrack
9. Summer Rain — Kobukuro — Cross Game OP
10. Type-0 — Takeharu Ishimoto — Final Fantasy Type-0 Original Sountrack

---

Le me and my painfully limited taste in music shut up

Ban the Person above you

Banned for banning nerds because nerd is the new awesome ( ͡° ͜ʖ ͡°)

Men vs. Women Race to 1000

445

Fonts and Sizes?

@Shoryu Magami@SinfulSkills

Not much at the moment because of my internet woes (could only get the basic stuff up before my net crashed), but here goes da guide.

The Art & Beauty of BBcoding [COMPLETE]

---

---

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]

Word^Superscript
[sup]Superscript[/sup]

Word_Subscript
[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

@tsukune

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

7. Hiders

Hider

DA HIDER

[hider]DA HIDER[/hider]

[+]

NO TITLE

[hider=]NO TITLE[/hider]

Clicky

BOO!

[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

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]

---

---

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

The Art & Beauty of BBcoding [COMPLETE]

---

---

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.

---

Men vs. Women Race to 1000

416

One Sentance Story

Next to him sat another him - he was the splitting image of Barnaby himself, down to the clothes he was wearing now... except for one thing: when Barnaby tried to touch the clone, his hand simply went through him!

Let's make a story !

, "Ye