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) 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 Text Formatting Bold/Underlined Italicized/Strikethrough/Etc. Size Color Basic Colors Hexadecimal Colors Rainbow/Customized Color Text Images/Pictures/Gifs Lists Specialized Bullet Points Sub-Lists Emojis Forum Emojis Phone Emojis Quotes URLs and Links Miscellaneous Titles Stat Code Code (Code) Invisible Text Etc. Did You Know…? 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) 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: 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. Hexadecimal Color Guide 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 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: Post the image to Imgur, Tinypic, or any of the other image apps/sites 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 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] 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” 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: ^ 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: [ = [ = [ = [ = [:| = :| [ = [ = [:x or[ = :x [:roll: = :roll: [ = [:? = :? [ = [: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: Go to that person’s post on forums Hold down on their name Select “copy” Shorten the url (if needed) 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!) ?
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 ?