The Official BBCode Guide

[Admin]

• 
  
  
  GUIDE TO BBCODE .
  .
  
  Hello everyone! This thread is designed to be a how-to guide on all things BBCode. Don't know what that is? That's okay! We will explain everything and hopefully answer any questions you may have. If you still find you have questions after reading this, don't fret! Simply pm teddy or Kami and they will be able to answer any unresolved questions for you.

[Admin]

• WHAT IS BBCODE? .
  BBCode ("Bulletin Board Code") is a collection of formatting tags that are used to format users' posts, typically on Internet Forums, such as the one you are on right now! BBCode is incredibly similar to other types of code, such as HTML or CSS. BBCode is essentially used for aesthetic purposes of a user's post, including (but not limited to,) pictures, links, and colored text.

• HOW DOES IT WORK? .
  Similar to CSS or HTML, BBCode uses left and right facing brackets " [ ] " to indicate said content is bbcode before it is translated into HTML and becomes the coding you see on the website. Due to the nature of the coding instantly translating when the brackets are present, we will be using parenthesis " ( ) " in its place in this guide, so that you will be able to view the strings of code and what they become. Just know that when you wish to replicate this in your own posts, you will need to use the brackets " [ ] " because parenthesis will not work.
  
  Just like HTML, each piece of code has an opening and a closing tag. Your opening tag will always look like "[WHATEVER CODE HERE]" and your closing tag will always look like "[/WHATEVER CODE HERE]" There are no exceptions to this! Do not forget the forward slash for your closing tag! It is imperitive for BBCode. Without this closing tag, SQ will not translate and convey your code properly, making it look "broken" or not how you intended.

[Admin]

• BBCODE BASICS .
  
  
  Currently, all of the different types of BBCode that SQ offers are shown above. In this guide, we will go through each aspect of code, starting from left to right, what they mean, what they do, and how to use them properly. It should be noted that, in this picture, all of these buttons are clickable and will produce the proper opening and closing code tags that you need. You do not need to type them in manually, but, you may if you so please. In some cases, you will need to edit these tags after you have clicked each button, but, we will get into that in the post below:
  
  ─ "Bold" ─ As the name suggests, this will bold your text. You may use "b" in your brackets here. For example:
  (b)Hey guys! I'm new here!(/b)
  
  This will turn into:
  
  Hey guys! I'm new here!
  
  ─ "Italics" ─ This will italicize your text. You may use "i" in your brackets. For example:
  (i)Hey guys! I'm new here!(/i)
  
  This will turn into:
  
  Hey guys! I'm new here!
  
  ─ "Underline" ─ This will underline your text. You may use "u" in your brackets. For example:
  (u)Hey guys! I'm new here!(/i)
  
  This will turn into:
  
  Hey guys! I'm new here!
  
  ─ "Quotebox" ─ This will place your text in a box. ─ You may use "quote" in your brackets.
  
  It should be mentioned that this is done by default if you select the "reply with quote" option. If you are unfamiliar with that button, it is the one circled in red:
  
  
  
  It will quote the user's post above yours. For example, this is what your reply box would look like if you were to quote a post from this guide:
  
  
  Here, you can see that it is quoting the above post. You will also be able to add your own reply outside of the box if you wish. This is what a snippet of that post will look like (most of the text has been removed from the quotebox so that it will be easier to see):
  
  
  
  To use the quotebox manually, there are two ways of doing this, one quoting a poster, and one not quoting a poster. Quoting a poster WITH the default reply to poster option will send them a notification that you have quoted their post (if their notifications are on!) Typing in a username (like the example below) will not result in any sort of notification whatsoever. For example:
  
  (quote=Admin)Hey guys, I'm new here!(/quote)
  
  Will result in:
  

  Hey guys, I'm new here!

  (quote)Hey guys, I'm new here!(/quote)
  
  Will result in:
  

  Hey guys, I'm new here!

  
  
  Not typing in a quoter will result in a totally clear box that can be used for a variety of purposes, such as roleplay or writing tags, etc! Get creative with it.
  
  ─ "Codebox" ─ This will put your text in a box with a copy feature. If you have strings of code in this box, it will not immediately translate it, instead leaving it in its bracket form, making it easy to share code with other users and allowing them to copy and paste the text inside said box. ─ You may use "code" in your brackets here. For example:
  
  (code)Hey guys, I'm new here!(/code)
  
  Will turn into:
  

  Code: Select all

  Hey guys, I'm new here!
  
  See how [b]doesn't[/b] automatically translate? This makes sharing code easy!

  The "select all" feature at the top of the box will select everything in the codebox, making it easy to copy the contents of the entire box.
  
  ─ "List(s)" ─ These three buttons will allow you to indent your text and make lists, similar to those of microsoft word or google docs. ─ You may use "list" in your brackets here.
  
  We will be starting with the first button in these three. It will ONLY indent your text, it will not add an. For a good example example, this whole post is indented with "list" in brackets. You may use the "list" feature several times to indent your text as much as the board will allow it. This next example will technically be indentend TWICE but since the entire post is indented, you may not notice it:
  
  (list)Hey guys, I'm new here!(/list)

• • Hey guys, I'm new here!

• Technically, the example below will now have been indented THREE times. Keep that in mind if you are using the list feature for aesthetic purposes:
  (list)(list)Hey guys, I'm new here!(/list)(/list)

• • • Hey guys, I'm new here!

• The middle button in this list is an ORDERED list. You will have two options: Numerical lists (1), or Alphabetical Lists (A). You will have to specify what type of list you would like to use AFTER the equal sign (=) in your code. After you start your list, this is where the third button comes in, the bullet points. Each bullet point will need a separate bracket with an asterisk (*) in it. A bullet point does NOT need a closing bracket.
  
  For example, we will combine both types of lists with bullet points.:
  
  (list=1)(*)Hey guys, I'm new here!
  (*)This is a Numerical List!(/list)

1. Hey guys, I'm new here!
2. This is a Numerical List!

• (list=a)(*)Hey guys, I'm new here!
  (*)This is an Alphabetical List!(/list)

1. Hey guys, I'm new here!
2. This is an Alphabetical List!

• ─ "Insert Image" ─ This will allow you to insert an image into your post. ─ You may use "img" in your brackets here.
  
  If you wish to reference or display an image in your post, you may do so with this code. A great example of this is showing off a faceclaim. It should be noted that IMG only works with URLs from websites such as tumblr, imgur, or anywhere else you may find an image on the web. You cannot use one from your computer. If you wish to use something saved to your computer, we recommend uploading it to imgur first and then using the link.
  
  For this example, we will be using image of a crow that was found on tumblr, resized to fit a smaller scale, and then been uploaded to imgur:
  
  (img)https://i.imgur.com/tXu13Fw.jpg(/img)
  
  Will turn into:
  
  
  
  It should be noted that gifs work in the exact same format, no need to use anything special. Img accept gifs, jpgs, pngs, etc.
  
  
  ─ "Insert URL" ─ This will allow you to insert a url into your text, making it clickable. ─ You may use "url" in your brackets here.
  
  Much like the ordered list feature, you must add to this code. After the equal sign (=) you must paste whatever URL you wish to link back to. For example:
  
  (url=viewtopic.php?f=4&t=24)Hey guys, I'm new here! Check out this really cool link!(/url)
  
  Will turn into:
  
  Hey guys, I'm new here! Check out this really cool link!
  
  ─ "Color" ─ This will allow you to change the color of your text. ─ You may use "color" in your brackets here.
  
  Like the ordered list and url feature, you must add to this code. After "color" in your brackets, you will need an equal sign (=) and the hex code of the color you wish to change your text to, including the pound symbol/hashtag (#). If you are unfamiliar with hex codes, clicking on the color symbol will display a box of multiple colors to choose from, as seen below.
  
  
  
  If you do not like any of these colors, you may use virtually any hex code/color you want. HTML Color Codes is a great website and resource for this. "transparent" is also an option.
  
  Now that you have a color picked out, this is what your code will/should look like:
  
  (color=#FF5733)Hey guys, I'm new here!(/color)
  
  This will turn into:
  
  Hey guys, I'm new here!
  
  ─ "Font Size" ─ This will allow you to change the size of your text. ─ You may use "size" in your brackets.
  
  The dropdown menu features 5 different options, which we will delve into below. However, any number ranging from 1-200 will work for this code. Just play around with it and figure out what size works for your post!
  
  Size Tiny will default to:
  
  (size=50)Hey guys, I'm new here!(/size)
  
  and will look like:
  
  Hey guys, I'm new here!
  
  Size Small will default to:
  
  (size=85)Hey guys, I'm new here!(/size)
  
  and will look like:
  
  Hey guys, I'm new here!
  
  Size Normal Will default to whatever the default text size is on the forum, which is usually around ~90 or so.
  
  (size=normal)Hey guys, I'm new here!(/size)
  
  And that will look like:
  
  Hey guys, I'm new here!
  
  Size Large will default to:
  
  (size=150)Hey guys, I'm new here!(/size)
  
  And will look like:
  
  Hey guys, I'm new here!
  
  And, finally, Size Huge will default to:
  
  (size=200)Hey guys, I'm new here!(/size)
  
  And will look like:
  
  Hey guys, I'm new here!
  
  ─ "Alignment Tags" ─ We're skipping around a little bit, but, for the sake of ease, these three are being lumped together. They allow you to align text or images, similar to microsoft word or google docs. ─ You may use "center", "left", and "right" in your brackets, respectively. For example:
  
  (center)Hey guys, I'm new here! And in the center!(/center)
  
  Will become: Hey guys, I'm new here! And in the center!
  (left)Hey guys! I'm new here! And to the left!(/left)
  
  Will become:
  

  Hey guys, I'm new here! And to the left!

  .
  
  And, finally,
  .
  
  (right)Hey guys, I'm new here! And to the right!(/right)
  
  Will become:

  Hey guys, I'm new here! And to the right!

  
  x
  It should be noted that you can combine these. For example, if you want text that is ALIGNED to the left but also centered, you may do so if you keep the center tag INSIDE of the left or right tag. It will not work if center is on the outside.
  
  For a demonstration of the proper way to do this, I will be using "left" and "center":
  
  (left)(center)Hey guys! I'm new here!
  But, I'm also to the left!
  And centered!(/center)(/left)
  
  This will become:
  

  Hey guys! I'm new here!
  But, I'm also to the left!
  And centered!

  xxxx
  x
  xx
  xxxxx
  ─ "Font" ─ This allows you to change your text's font. ─ You may use "font" in your brackets here.
  
  Now, you may have noticed that the examples of translated code are in a totally different font than the rest of the post. That's intentional! The translated code is in the forum's default font, while the rest of this post is in Times New Roman. This code is also just like "url" and "color". In order for it to work, you need an equal sign (=) and whatever font you would like to change your text after "font".
  
  For example:
  
  (font=georgia)Hey guys, I'm new here!(/font)
  
  Will become:
  
  Hey guys, I'm new here!
  
  Currently, these are all of the fonts known to work on Stained Quills. If we find more, we will update this guide as needed:
  
  Arial
  Arial Black
  Arial Narrow
  Book Antiqua
  Century Gothic
  Comic Sans MS
  Constantia
  Courier New
  Franklin Gothic Medium
  Garamond
  Georgia
  Impact
  Lucida Console
  Lucida Sans Unicode
  Microsoft Sans Serif
  Palatino Linotype
  Tahoma
  Times New Roman
  Trebuchet MS
  Verdana
  
  ─ "Justify" ─ This allows you to justify your text. ─ You may use "justify" in your brackets here.
  
  To use justify properly, you must know that it MUST be the furthest outside tag. It can be mixed with other bbcode tags, but it must always be the one on the outside to work properly, so long as the tags inside it are text modifiers as well. List is the only tag that does not need to be in the inside of justify, so far. This entire post is using the justify alignment (see how the text all lines up nicely on the right side?) So there will be no proper example for using this properly.
  
  (justify)Hey guys, I'm new here!(/justify)
  
  ─ "Left and Right Box" ─ This allows you to align your text, just like "center" "left" and "right", but with specified dimensions, basically putting your text in a box. ─ You may use "leftbox" and "rightbox" in your brackets here.
  
  In order to use these tags properly, you will need an equal sign (=) and specified dimensions (in pixels) after "leftbox" or "rightbox"
  
  For example:
  
  (leftbox=100x100)Hey guys! Look at me! I'm in a box! And I'm also new here!(/leftbox)
  
  Will become:
  

  Hey guys! Look at me! I'm in a box! And I'm also new here!

  xx
  xx
  xx
  xx
  xx
  
  And,
  
  (rightbox=100x100)Hey guys! Look at me! I'm also new here! And also in a box!(/rightbox)
  
  Will become:
  

  Hey guys! Look at me! I'm also new here! And also in a box!

  xx
  xx
  xx
  xx
  xx
  
  ─ "Strikethrough" ─ This allows you to strike through or cross out your text. ─ You may use "strike" in your brackets here.
  
  For example:
  
  (strike)Hey guys! I'm new here!(/strike)
  
  Will become:
  
  Hey guys! I'm new here!
  
  Now that you know how to use the basics of BBCode, feel free to get creative! Play around with it! Mix together any tags and find out what you like, or don't like!

Happy Coding! Have fun with it!

[Admin]

• MISC RESOURCES .
  Now that you know the basics of BBCode, we would like to share some resources that go hand in hand with it! This is a collection of resources that are particularly handy for coding character posts, roleplay threads, character forms, etc! This is not a definitive, end-all-be-all list! We encourage you to find your own favorite websites and even share them so that we can add them to this list!
  
  Onto the lists:

• IMAGE RESOURCES .
  Tumblr ─ Very handy for finding faceclaims, collections of gifs ("gif hunts"), and character references. Also great for Faceclaim Directories (which are excellent for picking out a face for your character!):
  ↪ Hero Rps
  ↪ Peppermint Stranger
  ↪ Echo des Plaines ─ Good for Historical characters.
  ↪ Angeldustmt
  ↪ Rory Rps
  ↪ RpHelper
  ↪ SonamHelps ─ Good for Historical characters.
  Pinterest ─ Good for finding faceclaims, character references, and miscellaneous aesthetic pictures for moodboards, etc.
  Imgur ─ Good for uploading images, gifs that you can save in albums, etc, and use their url to post them on a forum.
  Ezgif ─ Good online image and gif editor with lots of options, no downloads are necessary
  Fontmeme ─ Online text-to-image generator that allows you to create pngs of words, character names, etc in a variety of fonts and colors

• SYMBOL & TEXT RESOURCES .
  HTML Color Codes ─ A vast collection of computer-safe hex codes.
  Symbol Copy ─ An easy way to copy and paste different symbols and emojis
  Fsymbols ─ An easy way to copy and paste different symbols, emojis, and has a text-based font generator.