BBCode Tutorial

by **Reshiram** Mon Dec 25, 2017 12:57 am

The BBCode Tutorial

Please refer here if you have some coding problems, and if there are more questions that aren't already answered here, then feel free to ask!

1. Linking to Other Sources in Text/Image

The code used for linking is [*URL=URLHERE]TEXT HERE[/URL], but without the * at the beginning.

You replace the "URLHERE" with the particular url that you want to link to.

The "TEXT HERE" should be replaced with a picture or other text.

An example of this code used to link to Reshiram's profile: Reshiram's Profile!

For that, the TEXT HERE format was replaced with [*url=https://outbreakrp.forumotion.com/t2-reshiram-the-truthful-wip#2]Reshiram's Profile[/url], but without the *. Any unnecessary symbols like that can easily cause the bbcoding to break, so be careful!

2. Showing Pictures

The code used to link pictures is [*IMG]IMAGE URL HERE[/IMG], but again, without the * at the beginning.
Simply replace the "IMAGE URL HERE" with the url of the desired picture. For now, we will use Reshiram's sprite picture as an example.
This is a picture's url: https://cdn.bulbagarden.net/upload/1/12/Spr_5b_643.png . To get the url for an image, right click it and select 'Copy Image URL', or open it in a window/tab and copy and paste the link shown in the Search Bar at the top of the browser window.
Afterwards, add the url in the correct spot and post! the picture should work then.

NOTE: All urls for images that generally work on this site end with .jpg/.jpeg (high quality image; generally no transparency. One of the most common), .png (high quality transparency, and highly recommended for profile pictures as it supports transparent backgrounds. Also one of the most common), .bmp (not very common, nor as good as .jpg/.jpeg/.png), and .gif (supports high-quality animation). If they do not end with those, then the image will probably not show up.

Here's an example, using Reshiram's sprite image...

3. Spoilers

The coding for Spoiler tags is [*SPOILER]CONTENT HERE[/SPOILER], but without the *.
Spoiler tags are handy for hiding parts of your posts, so that the page doesn't stretch on for too long or make it look ugly.
As an added bonus, you can use the code [*SPOILER=TITLE HERE]TEXT HERE[/SPOILER] to give the spoiler tag a title, and preferably a hint on the information it contains.
Here's an example of the use of a spoiler tag, here:

Example:

NOTE: You can put just about ANYTHING in the spoiler tag, from links to pictures to videos and colored text (which you will learn about next!).

4. Coloured Text

It's like flavored text, ha ha.

Colored text is really easy to do, since the code is pretty self-explanatory. This is it: [*COLOR=COLORNAME/HEX CODE HERE]TEXT HERE[*/COLOR] (without the *).

The color names available to put in the appropriate field are the following:

Darkred
Red
Orange
Brown
Yellow
Green
Olive
Cyan
Blue
Darkblue
Indigo
Violet
Grey
White
Black

As an alternative, hexadecimal codes may be used to indicate a colour instead. Hexadecimal codes are those that begin with a #, followed by six, certain numbers or letters in a certain pattern. Using hexadecimal coding allows for colours that are not as limited as in the case of using colour names to indicate a colour instead.
An example would be Giratina's text colour, #C29F36. In coding, it would be written as [*COLOR=#C29F36]TEXT HERE[*/COLOR], but without the *, as always.

NOTE: Please note that colours such as Dark Red, Dark Blue, Indigo, Black, and similarly dark colours should NOT be used in the forums or chat, due to the fact that they are very hard to read and cause strain on the reader's eyes. This also applies to bold colours, such as pure white, bright red, or neon colours.

5. Common BBCodes

...And by common, I mean the very basics; bold, italics, underlined, and ~~strikethrough.~~

Here are the following codes for these texts, and you know the routine: remove the * and replace the text with whatever you want!

[*B]This is bold.[/B]
[*I]Italics~[/I]
[*U]Underlined...[/U]
[*STRIKE]...And last but not least, strikethrough![/STRIKE]

6. Uncommon BBCodes

Now, we start going into the not-so-common BBCodes that are available on Epidemic Johto's forum threads. Most of these are those that are NOT recommended/allowed in the RP or Chatbox, and are usually displayed in Freedom Corner or other areas. These uncommon BBCodes include little fancy assortments such as Alignment, Text Font, and Text Size.

ALIGNMENT:

Alignment is when you change the alignment of your text, meaning, where it leans towards and treats as its sort of 'axis'. Normally, the forum is naturally left-oriented, as that is how we read English. However, like shown above, by using alignment codes, you can shift its 'axis' so that it sticks to the left, right, center, or as they do in books, justify, where it stretches out the spaces between the text to make it more evened out. The coding for the alignment codes is extremely simple and self-explanatory.

Center alignment: [*CENTER]TEXT HERE[*/CENTER]
Right Alignment: [*RIGHT]TEXT HERE[*/RIGHT]
Justified Alignment: [*JUSTIFY]TEXT HERE[*/JUSTIFY]

TEXT FONT:

This one is very self-explanatory. It alters the text that you type in! The coding is also extremely simple for this particular command. It is [*FONT=FONT NAME HERE]TEXT HERE[*/FONT].
As an example, I am currently using the MS Comic Sans font.
Not all fonts will work with this command. Generally, the ones that work in this format are the very basic type of fonts that pretty much come with every system, including Times New Roman, Comic Sans MS, Gabriola, Trebuchet MS, Verdana, et cetera.

TEXT SIZE:

Another rather self-explanatory one. This command alters the size of the text you type in.
The code is also very self explanatory: [*SIZE=##]TEXT HERE[/SIZE].

Examples of Text Size:

Note that the forum threads do not allow text sizes over 29.

...And that's all for now! If this thread does not cover all of your questions about BBCoding, then feel free to submit a question or send a PM. This thread currently lists all the codes that pertain or are potentially useful for the rp.