⭐️BB Coding Guide⭐️

-PA_KaramelApples-

Well-Known Member
Note: This thread has not yet been updated since the new forums, but I'll try to work on it asap! (Also rip I added this note and now the pictures disappeared 🙃 I'll fix it soon)

URL]


Updated Info: Images/gifs, invisible text, underlining, 2 more colors added (LightBlue and Azure), new links to accommodate Android users

Shortcut/Cheat Sheet Guide Here

BB Coding Guide


  1. Text Formatting
    • Bold/Underlined
    • Italicized/Strikethrough/Etc.
    • Size
  2. Color
    • Basic Colors
    • Hexadecimal Colors
    • Rainbow/Customized Color Text
  3. Images/Pictures/Gifs
  4. Lists
    • Specialized Bullet Points
    • Sub-Lists
  5. Emojis
    • Forum Emojis
    • Phone Emojis
  6. Quotes
  7. URLs and Links
  8. Miscellaneous
    • Titles
    • Stat Code
    • Code (Code)
    • Invisible Text
    • Etc.
  9. Did You Know…?
  10. Tips, Info, Overview
To Start: No matter which code you’re using, you’ll always follow this format:
Code:
[code]text/link here
[/code]And remember not to use spaces in the brackets because the code won’t work if you do!

Important Note: Forums appears differently for iOS, Android, and tablet/Kindle users, so I’ll try to point out all the differences, and what each person is able to do or not do in forums.

Text Formatting


As said before, you’ll be using brackets to start the code. Inside the brackets, you’ll write whichever code you’re using. For example:
Code:
[b]Text here will be bolded![/b]

[i]Italicized text here![/i]

[u]Underlined text![/u]

[s]Strikethrough text![/s]

[center]Text here will be centered![/center]
Here are examples of those above codes in forums (how it will look when posted):

You can make a whole chunk of text stand out or you can make just a single word bolded.

Or, if you’d rather, make it italicized!

Underlined text is also an option!

Strikethrough text isn’t as common, but it’s still fun, though a bit hard to read at times...

Centered text will always make a post look pretty.

Time to Learn About Size!

Size is really fun to play around with, but keep in mind that there are restrictions. The smallest text can be is 1 and the biggest is 400.

Device Note: For Androids and tablet/Kindle users, although you can size text to be as small as 1, it will not appear smaller than 50 on your screen. Examples will be shown later.

Here’s the size code:
Code:
[size=250]Text size is 250![/size]
To give you an idea of how big (or small) text can be, here are some examples:

Size 400 <— the biggest it can get
Size 300 text
Size 200 text

Size 100 text (default size)
Size 50 text <— Text size will not appear smaller than this for Android and tablet/Kindle users
Size 40 text
Size 30 text
Size 20 text
<— This is size 20
Size 10 text <— This is size 10
Size 5 text <— This is size 5
Size 1 text <— This is size 1, the smallest it can be

Note: Since sizes below 50 appear differently on each device, I’ll show a picture of how it’s displayed on iOS (so that Android and Kindle/tablet users can see how it looks)

URL]

Note: The size code also works for emojis!
?️
Great! So now you’ve learned all these formatting codes, but did you know that you can combine them too? For example:

This looks terrible but it shows you the possibilities.

^ you can also combine the title and color codes (we’ll get to those later)

So how do you do this? Exactly how you would normally. For example, if you want something to be bolded and italicized:
Code:
[b][i]Bolded and italicized![/i][/b]
Important Note: Keep in mind that the order in which you list the codes matters, especially if you’re using multiple at once. For example, this code (which is out of order):
Code:
[b][i][color=blue][center]Looks ok[/color][/b][/center][/i]
^ although the first piece of text will appear how you want, text after it will be coded as well:
URL]

To avoid the headache of trying to figure out where you went wrong, or trying to rewrite everything, check first to see if you have the code order correct.

To make it simpler, imagine each code being a number. At the start, you begin with 12345, and to end it, 54321. Or in a coded version:
Code:
[i][u][center][color=red]This is perfect![/color][/center][/u][/i]
Tip: An awesome little bit of info that Kefo brought up was if you wanted your underlined text to be included in the coloring. For example: you can have something that looks like this, or something that looks like this.

Once again, this is where order comes into play. Regarding the first example (in light pink) the color code comes first and then the underline code, whereas in the second example (in light blue), the underline code is first.

Color


There are 2 ways to do colors: the easy way (which is just typing the color name) and using hexadecimal color codes. I’ll be showing you the easy way, and I’ll leave a link to another thread that explains hex colors.


As with all codes, you’ll need to use the brackets, and similar to the size code you’ll be using the equal (“=“) symbol to specify which color. For example:
Code:
[color=red]Text here will be red![/color]
Now here’s a giant list of colors that work in forums!

Wheat
Tan
BurlyWood
DarkKhaki
RosyBrown
SandyBrown
Peru
Chocolate
Sienna
SaddleBrown
Maroon
Brown
Indigo
DarkSlateBlue
SlateBlue
DarkMagenta
Purple
BlueViolet
DarkOrchid
DarkViolet
MediumOrchid
MediumPurple
MediumSlateBlue
Orchid
Violet
Plum
Thistle
PaleVioletRed
MediumVioletRed
Magenta
Fuchsia
HotPink
DeepPink
Pink
LightPink
DarkSalmon
LightSalmon
PeachPuff
Salmon
Tomato
Coral
IndianRed
FireBrick
Red
Crimson
DarkRed
OrangeRed
DarkOrange
Orange
DarkGoldenRod
GoldenRod
Gold
Yellow
Khaki
PaleGoldenRod
GreenYellow
LawnGreen
Chartreuse
Lime
LimeGreen
PaleGreen
LightGreen
SpringGreen
MediumSpringGreen
MediumSeaGreen
SeaGreen
ForestGreen
Green
DarkGreen
DarkOliveGreen
DarkSeaGreen
Olive
OliveDrab
YellowGreen
Aquamarine
Aqua
Cyan
DeepSkyBlue
DodgerBlue
CornFlowerBlue
SteelBlue
RoyalBlue
Blue
MediumBlue
DarkBlue
Navy
MidnightBlue
DarkCyan
Teal
CadetBlue
MediumAquamarine
DarkTurquoise
MediumTurquoise
Turquoise
SkyBlue
LightSkyBlue
LightSteelBlue
LightBlue
PowderBlue
PaleTurquoise
LightGray
Silver
DarkGray
Gray
LightSlateGray
SlateGray
DarkSlateGray
Black


Note: The following colors are super bright/light and they’re hard to read normally, but if you pair them with the title code, they’re easier to see:

Azure (Azure)
MintCream (MintCream)
MistyRose (MistyRose)
Lavender (Lavender)
Bisque (Bisque]
BlanchedAlmond (BlanchedAlmond)
AntiqueWhite (AntiqueWhite)
PapayaWhip (PapayaWhip)
Beige (Beige)
Linen (Linen)
SeaShell (SeaShell)
OldLace (OldLace)
CornSilk (CornSilk)
LightGoldenRodYellow (LightGoldenRodYellow)
LemonChiffon (LemonChiffon)
LightYellow (LightYellow)
Ivory (Ivory)

Note: No spaces, even between the words! If you use spaces, the code won’t work.

Images/Pictures/Gifs


URL]


This is the code that a lot of people have trouble with, whether it’s the sizing or getting the image url link. Anyway, this is what to do:
  1. Post the image to Imgur, Tinypic, or any of the other image apps/sites
  2. Copy the direct image url link (not the album link)
    • Usually you can hold down on the image and it will give you options, one of which is to copy the link
    • If not, there’s probably a button somewhere for the link
  3. After getting the image link, put it into this code:
    Code:
    [img]Image URL here[/img]
You can also use this code, but your picture may turn out way too big/small:
Code:
[img]Image URL here[/img]
Note: Make sure the link ends in “.jpg” or “.png” If it doesn’t, it won’t show up in forums and/or might be the wrong link! Another common mistake is when people copy the entire album link, but you don’t want that, just the individual image link!

Posting Gifs:

It’s basically the same as posting pictures/images (as explained above); however, when you copy the gif link, it will end in “.gif”

Note: Keep in mind that sometimes when you post a gif in forums, you’ll have to change the “.gif” to “.jpg” and yes, don’t worry, it will show up as a gif (and not a still image)

You’ll still be using this code, even for gifs:
Code:
[img]gif URL here[/img]
URL]


Tip: If you use an image or gif from google, you can entirely skip the app upload process and simply copy (and use) Google’s link instead.

Reminder: Make sure your pictures and gifs follow the Forum Code of Conduct.

Lists


Lists can be really useful and they look nice. Here’s how to code them:
Code:
[list]
[*]Point 1
[*]Point 2
[/list]
To start a (default) list, write “list” inside of brackets. After that, you’ll need to make a bullet point, which is another set of brackets with an asterisk “*” inside. When you want another bullet point, just make another set of brackets with an asterisk. And to end it, type a forward slash, then “list” inside of brackets.

This is how it will look in forums:
  • Point 1
  • Point 2
The default bullet point is a solid black circle, but you can make different bullet points as well. For example, by using this code, the bullet points will be squares:
Code:
[list=square][*]Point 1
[*]Point 2
[/list]
Note: Notice how in this list code, you’ll include an equal sign “=“ and a keyword to change the bullet points.

It will look like this in forums:
  • Point 1
  • Point 2
Here are some other examples of bullet points you can make:
  • ”Circle”
  • Looks pretty cool
—————————————————
  • ”a”
  • (must be lowercase)
—————————————————
  • ”A”
  • (must be uppercase)
—————————————————
  • ”i”
  • (must be lowercase)
—————————————————
  • ”I”
  • (must be uppercase)
—————————————————
  1. ”1”
  2. Numbered list!

^ the first bullet point, what I put in quotation marks, is what you’ll put after the “=“ in the first bracket for the list code (aka, the keyword to change the bullet point).

Note: Even for the numbered and Roman numeral bullet lists, the bullet point code (which is just an asterisk inside brackets) will stay the same. So basically you don’t have to put 1, 2, 3, or I, II, III, since the code will automatically do it for you.

List-Ception

Need sub-lists, or bullet points for your bullet points? Here’s what it looks like, and here’s how to do it:
  • List 1
    • List within a list
    • Looks cool right
      • Another list!
      • Wow
Code:
[list][*]List 1
[list][*]List within a list
[*]Looks cool
[list][*]Another list!
[*]Wowie
[/list][/list][/list]
In the above example, the lists within lists just keep going (as in it never goes back). If you don’t understand, just think back to this thread’s table of contents. I used the first set of bullet points, made sub-lists, then went back to the first set (of bullet points). It’s important to keep in mind if you’ll be using lists that go back, or just a list that goes on and on, like this:
  • List 1
    • List 2
      • List 3
        • List 4
It’s important because, once again, order! If your sub-lists just keep going and going without ever backtracking, then you’re fine to end the code all at once, like this:
Code:
[list][*]List 1
[list][*]List 2
[list][*]List 3
[list][*]List 4
[/list][/list][/list][/list]
See how the ending list brackets are all in a row at the very end? This is ok to do if your list don’t backtrack. However, if they do backtrack, then you’ll have to end the list after you’re done with it. For example (like how I did with the table of contents):
  • First set of bullet points
  • 2nd main point
    • Sub-list interruption
    • Sub-List continues
  • Main points restart
    • New sub-list
      • Additional sub-list
      • Making things complicated
  • Final main point
^ that is how it looks formatted and listed in forums. See how the code is (ordered) different than the non-backtracking lists:

URL]


^ I made it color-coded so you can see where each list starts/finishes (and why order matters)

Whew, now all this can get really complicated (or at the very least a little more difficult to keep track of). So just keep practicing, and adding more once you have one step figured out.

Anyway, going back to good ‘ol non-backtracking lists and sub-lists, you can make as many lists within a list as you want, but I don’t suggest going beyond 5 or 6.

It’s pretty easy to get the hang of, just don’t forget how many lists you have going on at once!

Emojis


Pretty self explanatory, so here’s a list of the forum emojis and what to type to post them:

[:) = :)
[:D = :D
[;) = ;)
[:p = :p
[:| = :|
[:eek: = :eek:
[:( = :(
[:x or[:mad: = :x
[:roll: = :roll:
[:oops: = :oops:
[:? = :?
[:cool: = :cool:
[:shock: = :shock:
[:cry: = :cry:
[:lol: = :lol:
[:geek: = :geek:
[:ugeek: = :ugeek:
[:mrgreen: = :mrgreen:
[:evil: = :evil:
[:twisted: = :twisted:
[:!: = :!:
[:?: = :?:
[:idea: = :idea:
[:arrow: = :arrow:

Of course, you’re also able to use the emojis on your keyboard, however some emojis won’t show up on Android/iOS, so what might look cool to you could possibly be a blank box to someone else. Here is a guide by Kefo that lists all emojis that work in forums.

Quotes


Quotes are really easy to do now, especially with the quote button on forums, but here’s how to do it manually:
Code:
[quote]Text here will be in a quote box![/quote]
^ this code will do a just a regular quote box, but you can also do personal quotes. Here’s how:
Code:
[quote=“Person’s Name”]Text here[/quote]
Note: You are able to have up to 3 embedded quotes.

For example:
Code:
[quote]Quote 1
[quote]Quote 2
[quote]3[/quote][/quote][/quote]
And it would look like this in forums:

URLs and Links


As you guys might have noticed, I’ve already used a few links. This section will teach you how. Here’s the code:
Code:
[url=URL here]Word/picture link[/url]
There’s a couple of parts to this, so bear with me. The first part, as always, is the brackets. After your first bracket and the “=“ you’ll have to put in the URL. Keep in mind that this URL may have to be shortened (I’ll give more details in just a moment, but let’s keep going for now). After you end the first bracket set, you’ll make the button link (basically the words, or image, that someone will click on to go to the link). Then, just finish the code with the 2nd pair of brackets and you’re done!

Now getting back to shortening the link. Once you have the original link, use a url shortener (I use Bitly) to shorten it. When it’s shortened, use that new URL in the code and voilà, you’ve now made a link.

The links I’ve used so far have all been to other forum threads, but you can also give links to people’s profiles and to websites. Make sure the websites have relevance to the thread and follow the rules.

Device Note: Kindle/tablet users are unable to get thread and profile links from holding down on a thread. Sorry guys. However you can still get links from online!

Here’s a link to my profile. Pretty cool right? In order to link someone’s profile:
  1. Go to that person’s post on forums
  2. Hold down on their name
  3. Select “copy”
  4. Shorten the url (if needed)
  5. Post (with the url code) in forums
And now to link threads: just like with a profile, instead of just regularly clicking on the thread you want to link, hold down on it. (Once again, don’t forget to shorten it if needed!)

In case you were wondering how to make an image the link, here’s the code:
Code:
[url=URL here][img]image url here[/img][/url]

Miscellaneous


We’ve gotten (close) to the end! Here are a few more things that you can use in forums:

See how “Miscellaneous” is bolded and in big letters, surrounded by gray? That’s a title. Here’s how to do it:
Code:
[title]Big bolded letters surrounded by gray[/title]
If you’ve ever looked at the Stories Tiers and Rewards Thread, you’d see that the next code is used quite often, the stats code:
Code:
[stats]abcd/1234[/stats]
As always, begin it with a set of brackets and “stats”. The first string of letters (or numbers, since both will work within this code) is what will show up in red. After the forward slash, whatever follows will be in blue. Then just end the code just how the others are ended, with the 2nd pair of brackets.

Here’s how it looks:
[stats]abcd/1234[/stats]
So the code I’ve been using throughout this guide to show you what to type in forums is the “code” code. Here it is:
Code:
[code]All other codes and text here will not be affected (aka the code output is not shown)
[/code]invisible text is fun, just use the color code and for a “color”, use “transparent”

Did You Know…?


  • You can create image links (aka you can click on a picture/image as a link)
  • You can make profile links as well
  • The size code works on emojis too, so you can create giant emojis
  • The center code will affect text used in the code code

Tips, Info, Overview


Yay! You made it to the end! Hopefully you learned some new stuff or at least refreshed your memory on BB coding. Anyway, here are some reminders and recaps:
  • No spaces in the brackets!
  • Text size ranges from 1 to 400
    • Size 100 is the default (how it usually looks without coding)
  • Combine codes!
  • Images and gifs should end in “.jpg” or “.png” (or “.gif”)
  • Some emojis can’t be seen on certain devices
  • Order is important!
  • Shorten your URLs
  • Some devices can’t do things
  • Practice practice practice! Have fun!
Speaking of fun...theres a code to make text invisible (not just a super light color, but actually invisible). I’ve hidden it on my thread, so try to find it!

FYI, these are the original BB Code threads, by _MooCow. They can be found in the Guide Section and the Questions/Feedback Section. Or tap the images to see them:




Please feel free to practice your coding on this thread or on the Test Thread I made (found in Fan Creations). The test thread is useful because it won’t be bumped to Active Topics (therefore no spam).

Let me know if something is wrong/incorrect, if you want me to add anything, or if you just need clarification on how to do something (I’d be happy to help!) ?
 
Last edited:
Re: BB Coding Guide

The only thing i learned here was the stats code. Great job on the thread. Hope new players will learn from it.
 
Re: BB Coding Guide

My favourite subtle feature of BB codes was always the ability to decide whether you want your underlines to be coloured or not
You should link my emojis in forums thread tho ?
 
Back
Top