Guide: How to Use BBCode

★ ☆ Basic Guide to BBCode ☆ ★​

(Note: This thread was remade due to the last guide being incomplete and the creator being unreachable)​

BBCode (also known as Bulletin Board Code) is the name for code used to format posts on most forum websites, including our very own Lake Valor. In simple terms, it's the code used to make posts pretty! Want to color your text? Center it? Make it bigger? Put images, links, or videos in your post? This is where you'll learn to do all that, and more!

Here on Lake Valor, BBCode can be used in the following places:

• Your posts on the forums
• Your forum signature
• Your "About Me" on your profile
• Your blog

Most places you can use BBCode already have a lot of the formatting options at the top of the text box, but hopefully this will help you learn how to write it yourself, and use it on other websites that support it as well!

Important Notes about this guide:

• Although BBCode is pretty uniform anywhere you go, some coding will vary in some places. The codes I provide here are tested to work on Lake Valor, and they will work on most other sites that support BBCode.
  
  
  
• When typing with BBCode, always remember to close your tags!
• If you spot any mistakes or missing information in this guide, please PM me (or post in this thread) so I can fix it! I want this guide to be as (reasonably) complete and accurate as possible.
• If you need any help with using BBCode that isn't covered in this guide, or are having issues with it, please post in this topic, or PM me so I can do my best to help you out. (Or better yet, PM an Administrator.)

Alright, that's about it - let's get to learning!

How to use Basic BBCode:

BBCode is written by basically telling text what to do by surrounding it in the appropriate coding, also known as tags, which are actually just words/letters inside of brackets. You put the opening tag before the text, and the closing tag at the end of the text. The closing tag is similar to the opening tag, but has a slash (/) in it.

If done correctly, everything between the opening and closing tags will be effected. It probably sounds confusing (I'm awful at explaining things), but it's actually not at all! Once you get the hang of it, it's very simple, I promise. If none of this makes sense, just take a look at the examples below and you'll see what I mean.

★ Basic Formatting ★

☆ Bolding text ☆

If you want to bold your text, use b tags.
For example, typing the following...

This text will be bolded.
...will turn into:

This text will be bolded.

☆ Italicizing text ☆
If you want to italicize your text, use i tags.
For example, typing the following...

This text will be italicized.
...will turn into:

This text will be italicized.

☆ Underlining text ☆
If you want to underline your text, use u tags.
For example, typing the following...

This text will be underlined.
...will turn into:

This text will be underlined.

☆ Striking text ☆

If you want to have a strike through your text, to look like it was crossed out, use the s tags.
For example, typing the following...

This text is crossed out.
...will turn into:

This text is crossed out.

☆ Resizing text ☆

You can also make your text bigger or smaller! This gets a little more complicated, but still pretty straightforward.

All you need to do is type size=InsertSizeNumberHere (inside of brackets) with a closing size tag at the end. The size number is the amount of pixels the text will be.

For example, typing the following...

This text is huge!
...will turn into:

This text is huge!

Alternatively, typing a smaller number will make the text smaller. For example, typing the following...

This text is tiny!
...will turn into:

This text is tiny!

It's worth noting that the normal size of text is 14. A number smaller than that will make text smaller than normal, a number bigger than that will make text bigger than normal. But remember not to go overboard! Keep it tasteful and don't be obnoxious.

☆ Recoloring text ☆

Recoloring text works similar to Resizing text. Except, instead of typing a size number, you put the name of a color (without spaces), or a pound sign (#) and the color's 6-digit hexadecimal number (or just hex code). (see the next post for a list of supported color names and their hex codes! But keep in mind, any hex code you find should work.)

For example, typing the following...

This text is the color of my eyes!
...will turn into:

This text is the color of my eyes!

Or, typing a pound sign and a color's hex code, such as the following...

This text is the color of my sweater!
...will turn into:

This text is the color of my sweater!


☆ Using multiple codes at once ☆

Keep in mind, ALL formatting can be stacked/combined in any way you like and it will still all be applied. For example, if you want text that is red, bolded, and italicized, you'd want to type the following:

This text would stand out a lot!
Note how all the opening and closing tags are consistent (italicized is inside bolding, which is inside color). It generally doesn't matter what order the opening tags are in, as long as you keep the closing tags consistent with them. Putting them out of order will likely mess up the coding.


★ Positioning Your Text ★

☆ Text Alignment ☆

If you would like to center your text, or move it all the way to the right (or all the way to the left, even though that's the default) then simply use center, right, and left tags.

For example, to center your text, simply use the following tags...

This text is centered!​

...and it will display like this:

This text is centered!​

Or, to move your text all the way to the right, type the following...

This text is all the way to the right!​

...and it will show up all the way to the right of the page, like so:

This text is all the way to the right!​

☆ Indenting ☆

You can indent your text with indent tags. It works similar to size and color, except instead of a size number/color, you put the number of times you want it indented. For example, typing this:

This text is indented once.​

Will make that text indented once, like so:


This text is indented once.


Or, putting a "2" instead of a "1", like this:

This text is indented two times!​

would result in this:


This text is indented two times!


If you want multiple paragraphs to be indented, you'll have to code each one separately.

☆ Bullet Points ☆

Bullet points are a great way to make organized lists, but are a tad more complicated to use. Just follow the coding in the example below and you should have no problem making nice, neat lists!

• The more that you read,
• The more things you will know.
• The more that you learn,
• The more places you'll go.

Will turn into:

• The more that you read,
  
  
  
• The more things you will know.
  
  
  
• The more that you learn,
  
  
  
• The more places you'll go.

You can have as many or as little bullet points as you like. You can also have bullet points inside of bullet points! This is done by putting list tags inside of list tags. Like so:

• You can find magic
  • wherever you look.
• Sit back and relax,
  • all you need is a book.

This would turn into:

• You can find magic
  
  
  wherever you look.

[*]Sit back and relax,

• all you need is a book.

Just make sure to close all of your "List" tags!


★ Inserting Links, Images, and Videos ★

Next I will cover how to insert links, images, and videos into your posts.

☆ Links ☆

On Lake Valor, if you just post a link with no coding, it will automatically embed as a link that can be clicked. However, you can also use BBCode to post a link, by following the example below:

LINK
As an example, typing the following:

http://lakevalor.net/forums/
Will show up as a link, like this:

http://lakevalor.net/forums/

☆ Hotlinking ☆

Hotlinking means to have some text of your choice link to another page. It can be very useful when directing someone to another page, either on the same website, or another website entirely.

If you'd like to do this, follow the format below:

InsertTextHere
For example, typing the following...

The Lake Valor Forums are amazing!
...will turn into:

The Lake Valor Forums are amazing!

Note: Remember to take caution when sharing links, and follow all of Lake's Valor's rules. Do not post links to:

• Other Forums/Websites, purely to advertise
  
  
  
• Anything highly inappropriate
  
  
  
• Anything else against the rules of Lake Valor, or whatever site you are posting on.

☆ Posting Images ☆

To put an image in your post, just use img tags.


For example, having the following...


...will show up as the image that was linked, as so:



You can get the image's direct URL by right clicking on the image (once you have it up in your browser) and selecting "Copy Image URL".

Remember not to post images that are too inappropriate or graphic on Lake Valor. Additionally, remember that the max size of any image in your signature is 350 px tall and 500 px wide. The max number of images in your signature is one banner and two userbars.

☆ Hotlinking Images ☆

You can also Hotlink an image! In other words, have your image link somewhere. Just use the following code to do so:


For example, this text...


...will turn into this: (clicking it now takes you to the Lake Valor forums!)



☆ Posting Videos ☆

On Lake Valor, if you want to share a YouTube video, all you have to do is post the URL, and it will automatically embed (show up as an actual video). However, on some other websites, you will likely need to use BBCode to get it to embed. This is usually done by typing Media codes, like so:

[media]https://www.youtube.com/watch?v=Y6mW4DK-PB0[/media]
And it will embed. Here on Lake Valor, just post the URL and nothing else, like so:

https://www.youtube.com/watch?v=Y6mW4DK-PB0
And it will show up like this:

https://www.youtube.com/watch?v=Y6mW4DK-PB0

As with images, remember to not post videos that are too inappropriate, or break any other rules that Lake Valor has in place.


★ Quoting ★

Quoting is often used to respond to someone else on the forums. Usually, to quote someone's post, all you need to do is click the "Quote" button below their post. You can also, however, use BBCode tags, though it won't display the time in which the quote was said. I also don't believe it will give that user a notification this way (?).

To put text in a quote box, all you have to type is the following:

So for example, typing this...

...will turn out like this:

Additionally, if you want to indicate who said it, you can type the following:

So typing this...

...will turn into this:

Don't forget the quotation marks around the name!

★ Spoiler Tags ★

Spoiler tags allow you to hide content, to where you need to manually click on it to view it. This can be very helpful to warn others about Plot spoilers before they see it, or to put large images/walls of text into so they don't unnecessarily stretch the page. And fortunately, they're very easy to use! Just use simple spoiler tags, like so:

Spoiler

Everyone dies at the end!

This would turn into:

Spoiler

Everyone dies at the end!

★ Miscellaneous ★

Here are some extra features you can do with BBCode that either don't fit into any other category, or are just less commonly used (but there to use nonetheless!).

☆ Tagging ☆

A cool way to respond to a user, rather than quoting, is to tag their username! It will appear in the post just as it does on the forums, name/glow/icon and all. (I don't actually know if this technically counts as BBCode, but I'm putting it here anyway because it's cool information to know, so wynaut?)

Just use the following code:

@[member=Username]
For example, typing the following:

@[member=Satix]
Would turn into this:

@[member=Satix]

The user will also get a notification when you tag them in a post.

You can also tag users by double clicking on their post in a thread (until a small window pops up) and click "@Mention". This will bring up the proper coding in the Post Reply box. (this is kind of buggy though, and doesn't always work for me. It might work differently on different skins, as well.)

☆ Superscripts & Subscripts ☆

You can add superscripts or subscripts to something by using sup and sub tags, respectively.

For example, typing the following...

5[sup]3[/sup]
...will give superscripts, like this:

53

And typing this...

6[sub]2[/sub]
...will give subscripts, like this:

62

☆ Twitter ☆

You can tag your twitter account by using twitter tags, putting the username inbetween.

For example, the following text...

[twitter]lakevalorpkmn[/twitter]
...will turn into this:
[twitter]lakevalorpkmn[/twitter]

Try not to disruptively advertise, though!

★ Code Tags ★

If you would like to display raw BBCode on the forums without it turning into formatting (such as for demonstration purposes), just surround it with simple code tags. This is how I have displayed examples in this guide.

Code:

[color=red]This is how you make text red.[/color]

The text above will turn into this (with the white box around it and all):

Code:

color=red]This is how you make text red.[/color]

 

♦ ♢ Color Names & Hex Codes ♢♦​

Here is a list of supported color names and their 6-digit hex codes. All of these are tested to work when using BBCode on Lake Valor.

Reds:

IndianRed [#CD5C5C] ✦ LightCoral [#F08080] ✦ Salmon [#FA8072] ✦
DarkSalmon [#E9967A] ✦ LightSalmon [#FFA07A] ✦ Crimson [#DC143C] ✦
Red [#FF0000] ✦ FireBrick [#B22222] ✦ DarkRed [#8B0000]

Oranges:

Coral [#FF7F50] ✦ Tomato [#FF6347] ✦ OrangeRed [#FF4500] ✦
DarkOrange [#FF8C00] ✦ Orange [#FFA500]

Yellows:

Yellow [#FFFF00] ✦ Gold [#FFD700] ✦ LightYellow [#FFFFE0] ✦
LemonChiffon [#FFFACD] ✦ LightGoldenrodYellow [#FAFAD2] ✦ PapayaWhip [#FFEFD5] ✦
Moccasin [#FFE4B5] ✦ PeachPuff [#FFDAB9] ✦ PaleGoldenRod [#EEE8AA] ✦
Khaki [#F0E68C] ✦ DarkKhaki [#BDB76B]

Greens:

GreenYellow [#ADFF2F] ✦ Chartreuse [#7FFF00] ✦ LawnGreen [#7CFC00] ✦
Lime [#00FF00] ✦ LimeGreen [#32CD32] ✦ PaleGreen [#98FB98] ✦
LightGreen [#90EE90] ✦ MediumSpringGreen [#00FA9A] ✦ SpringGreen [#00FF7F] ✦
MediumSeaGreen [#3CB371] ✦ SeaGreen [#2E8B57] ✦ ForestGreen [#228B22] ✦
Green [#008000] ✦ DarkGreen [#006400] ✦ YellowGreen [#9ACD32] ✦
OliveDrab [#6B8E23] ✦ Olive [#808000] ✦ DarkOliveGreen [#556B2F] ✦
MediumAquamarine [#66CDAA] ✦ DarkSeaGreen [#8FBC8F] ✦ LightSeaGreen [#20B2AA] ✦
DarkCyan [#008B8B] ✦ Teal [#008080]

Blues:

Aqua [#00FFFF] ✦ Cyan [#00FFFF] ✦ LightCyan [#E0FFFF] ✦
PaleTurquoise [#AFEEEE] ✦ Aquamarine [#7FFFD4] ✦ Turquoise [#40E0D0] ✦
MediumTurquoise [#48D1CC] ✦ DarkTurquoise [#00CED1] ✦ CadetBlue [#5F9EA0] ✦
SteelBlue [#4682B4] ✦ LightSteelBlue [#B0C4DE] ✦ PowderBlue [#B0E0E6] ✦
LightBlue [#ADD8E6] ✦ SkyBlue [#87CEEB] ✦ LightSkyBlue [#87CEFA] ✦
DeepSkyBlue [#00BFFF] ✦ DodgerBlue [#1E90FF] ✦ CornflowerBlue [#6495ED] ✦
RoyalBlue [#4169E1] ✦ Blue [#0000FF] ✦ MediumBlue [#0000CD] ✦
DarkBlue [#00008B] ✦ Navy [#000080] ✦
MidnightBlue [#191970]

Purples:

MediumSlateBlue [#7B68EE] ✦ DarkSlateBlue [#483D8B] ✦ Indigo [#4B0082] ✦
Purple [#800080] ✦ DarkMagenta [#8B008B] ✦ DarkOrchid [#9932CC] ✦
DarkViolet [#9400D3] ✦ BlueViolet [#8A2BE2] ✦ MediumPurple [#9370DB] ✦
MediumOrchid [#BA55D3] ✦ Magenta [#FF00FF] ✦ Fuchsia [#FF00FF] ✦
Orchid [#DA70D6] ✦ Violet [#EE82EE] ✦ Plum [#DDA0DD] ✦
Thistle [#D8BFD8] ✦ Lavender [#E6E6FA]

Pinks:

Pink [#FFC0CB] ✦ LightPink [#FFB6C1] ✦ HotPink [#FF69B4] ✦
DeepPink [#FF1493] ✦ MediumVioletRed [#C71585] ✦ PaleVioletRed [#DB7093]

Browns:

Cornsilk [#FFF8DC] ✦ BlanchedAlmond [#FFEBCD] ✦ Bisque [#FFE4C4] ✦
NavajoWhite [#FFDEAD] ✦ Wheat [#F5DEB3] ✦ BurlyWood [#DEB887] ✦
Tan [#D2B48C] ✦ RosyBrown [#BC8F8F] ✦ SandyBrown [#F4A460] ✦
Goldenrod [#DAA520] ✦ DarkGoldenrod [#B8860B] ✦ Peru [#CD853F] ✦
Chocolate [#D2691E] ✦ SaddleBrown [#8B4513] ✦ Sienna [#A0522D] ✦
Brown [#A52A2A] ✦ Maroon [#800000]

Whites:

White [#FFFFFF] ✦ Snow [#FFFAFA] ✦ Honeydew [#F0FFF0] ✦
Mintcream [#F5FFFA] ✦ Azure [#F0FFFF] ✦ AliceBlue [#F0F8FF] ✦
GhostWhite [#F8F8FF] ✦ WhiteSmoke [#F5F5F5] ✦ Seashell [#FFF5EE] ✦
Beige [#F5F5DC] ✦ OldLace [#FDF5E6] ✦ FloralWhite [#FFFAF0] ✦
Ivory [#FFFFF0] ✦ AntiqueWhite [#FAEBD7] ✦ Linen [#FAF0E6] ✦
LavenderBlush [#FFF0F5]

Grays/Greys: (both spellings work)

Gainsboro [#DCDCDC] ✦ LightGray [#D3D3D3] ✦ Silver [#C0C0C0] ✦
DarkGray [#A9A9A9] ✦ Gray [#808080] ✦ DimGray [#696969] ✦
LightSlateGray [#778899] ✦ SlateGray [#708090] ✦ DarkSlateGray [#2F4F4F] ✦
Black [#EEE8AA]

 

This post is a reserve (since I have a feeling I'll need one)

More information could be added to this guide in the future! Have any input/feedback on this guide? Please message me or post in this thread! Thank you!​