Plot Teams

Teams To Follow
Site-wide storyline

• Lumiose Team •
• HQ Team •
• Mahogany Team •
• Fallarbor Team •
• Silver Team •
• Meeting I Team •
• Meeting II Team •

Staff

Founding Admin

Founding Admin

Profile Admin

Harb Mgt. Admin

Harb & Shop Mgt. Admin
Background art was made by Fox. The Banner was made by Silverishness. Show them some love, yeah?

Pokemon © Nintendo
EpidemicJohto © 2011
All names, characters, plotline and artwork are under copyright protection of Epidemic Johto and their respective owners.
No distribution or reproduction without express permission is permitted.

Support our staff!

2 posters

BBCode Tutorial

Jirachi

Jirachi: Posts : 580

Post n°1

BBCode Tutorial

by Jirachi Mon Oct 10, 2011 1:03 pm

BBCode Tutorial

The BBCode Tutorial
Brought to you by your lovely moderators, Jirachi and Uxie! 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 Jirachi's profile: Jirachi's Profile! For that, the [URL=URLHERE]TEXT HERE[/URL] format was replaced with [url=https://www.epidemicjohto.com/t370-legendary-jirachi]Jirachi'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 Jirachi's sprite picture as an example. This is a picture's url: http://cdn.bulbagarden.net/media/upload/a/a7/Spr_5b_385.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 Jirachi'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. For example, the Rules Thread for EJ uses spoilers, because without them, they would look a lot longer and probably more boring. 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 [Jirachi: This is my personal favourite~ <3] Green Olive Cyan Blue Darkblue Indigo Violet 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.

The BBCode Tutorial

Brought to you by your lovely moderators, Jirachi and Uxie! 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 Jirachi's profile: Jirachi's Profile!

For that, the [URL=URLHERE]TEXT HERE[/URL] format was replaced with [*url=https://www.epidemicjohto.com/t370-legendary-jirachi]Jirachi'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 Jirachi's sprite picture as an example.
This is a picture's url: http://cdn.bulbagarden.net/media/upload/a/a7/Spr_5b_385.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 Jirachi'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. For example, the Rules Thread for EJ uses spoilers, because without them, they would look a lot longer and probably more boring.
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 [Jirachi: This is my personal favourite~ <3]
Green
Olive
Cyan
Blue
Darkblue
Indigo
Violet
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.

Last edited by Jirachi on Mon Oct 10, 2011 2:04 pm; edited 2 times in total

Suicune

Suicune: Administrator; Age : 37
Posts : 4642

Post n°2

Re: BBCode Tutorial

by Suicune Mon Oct 10, 2011 2:02 pm

Thank you Jirachi, for making this.
I would like to note, however, that colored text is limited...if it's hard to read, don't use it.
Dark blue, indigo, dark red and black shouldn't really be used, as you have to strain your eyes to read it.

_________________