Post by Dirkeon on Oct 22, 2013 9:34:31 GMT
Yo! This post will explain how to use BBCode. If you already know how BBCode works, then you don't have to read this. If you are not familiar with BBCode, then read on(you still don't have to read it, but ya...)!
What it is
BBCode stands for Bulletin Board Code, and it is very similar to things like Wikitext(code used on Wikia and Wikipedia) and HTML(basic language in how web pages are written). Since it is a markup language, there are opening and closing "tags", and almost all of these tags must be closed.
Unlike HTML, BBCode is almost only used for formatting.
BBCode has different things that you can make on nearly every forum. For instance, on some forums you can have boxes containing tags that you can expand with a click, but on this one, you cant. Note that admins can always change what can and what can not be made using BBCode, so this guide may not always be up to date.
If you cant learn everything in this post, don't worry. Above the text editor that you use when writing a post, there are a bunch of buttons that allow you to quickly insert premade BBCode. If you're not sure what which button does, hold your mouse over a button(don't press it) and a balloon will appear telling you what it does. :)
How to use
This section will show all tags you can currently use on the Legends of Johto board and what they do.
Bold text
Makes text more noticeable and thick.
How to write:
How it looks:
This text is bold!
Italic text
Don't worry, you don't have to learn the Italic language for this one. This one makes text a bit more noticable and skew.
How to write:
How it looks:
This text is italic!
Underlined text
This does exactly what it makes on the tin. It highlights text and makes it more noticeable. You may want to not use this one too often as people tend to mistake it for links to other pages, which is rather annoying. You can also use it in combo with the Crossed out text(below) to correct mistakes.
How to write:
How it looks:
This text is underlined!
Crossed out text
Again exactly does what its called, this text is crossed out. You can use this one to correct mistakes while keeping the original text, or forstupid trolls jokes.
How to write:
How it looks:
This text is crossed out!
Subscript and Superscript
These are often used for math. So you wont come across it too often on Legends of Johto :P
Superscript is used as "power of" in math. This means, for example, if I write:
And it will look like this:
53 equals 5x5x5
That, by the way, is 125.
Subscript is used when defining molecules. This means you will most likely never come across this on LoJ(Legends of Johto).
How to write:
How it looks:
H2O
That, by the way, is water.
Text alignment
If I want this sentence to be to the left, this one in the middle, and this one to the right, I do this:
And it will look like this:
You can also make a single sentence fill the whole line. This is done like this:
To get this result:
Tables
Sorry, no coffee tables. This is a little more complicated. There is complicated BBCode for this, but fortunately, the LoJ format we use is nice enough to help us a bit, so instead, I will cover that part instead of the code. Maybe I will add the code later, however...
Just press the button that looks like a game of Ticktacktoe. You will be asked what you want the table to look like. Sadly, it is not possible to directly add more space or remove space from the table, so you will either have to fill the whole thing in again or wait for me to the table BBCode part to this guide.
You will get this:
You can then fill in the premade text, but don't touch anything inside the [ and ]. You can for instance make it like this:
To achieve this:
Lists(and smilies)
Luckily, lists are not that complicated as tables
...pardon me. That was a smiley that I just had to put in. I will cover these really quick, because they are too simple to have their own section. Click the button with the face, and select a smiley. And you're done!
Now, for the lists. Lists can be made by pressing the button that vaguely looks like repeating Morse codes. Its next to the table button(the one that looks like a Tictactoe field!).
You will be asked how many list items you want, and the style. The style part is self-explaining when you click on it, so I will not cover it. There is some weird bug, however, that causes nothing to appear on the style field even if you click on it. Don't worry though, if you clicked properly, you really got it selected :)
You can do this:
To see this:
Horizontal lines
These are really simple. Just press the button next to the list button and you're done!
So you can do this:
To get this:
Notice that I did not close the horizontal line tag? That's because its one of these that you don't have to close
Links
There are 2 types of links. Page links and Email links. They look the same, but clicking them will do different things. Obviously, a page link will send you to a web page and an email link will open up your default email program, allowing you to send an email to the address it was linked to.
A page link looks like this in the code...
And it looks like this on the page...
This will send you to LoJ's Twitter!
An email link also looks the same in the code...
Notice the "mailto:" part before the email address. In computer language, that makes a link an email address.
It looks like this on the page...
This will have you send an email to LoJ!
Images
Images are just what they're called. Pictures. :P
Images fill the whole page to suit their size, so if you are posting a big image, please post them into a link tag rather than an image tag. That is because it will decrease page loading times a lot, and its easier to read if there is no big-Lickilicky image in the middle of the page that expands outside of the "border lines" of the page(the black lines that separate the page from the gray background).
And image looks like this in the code, very similar to a link...
And that will result in this:
If you try to mouse over the image(don't click it), you will see the text in the "alt="This text is mouse-over text!"" part of the tag.
You do not have to close it, by the way :P
Videos
Videos work similar to images, the difference being that videos move, and pictures do not :)
You can link directly to .wmv files, .avi files, .mpg files, .mov files and .mp4 files around the internet. You can also link to a video page from these popular video sites: College Humor, Daily Motion, Gametrailers.com, Justin.tv, Meta Cafe, MySpace videos, UStream, Veoh, Vimeo and YouTube.
A link to YouTube looks like this...
And it will magically turn into this awesome song!
User links
Yes, I know, I said there were only 2 types of links, but user links work a lot different. They are quite simple, really.
All you do is put a @ sign and then a username. It looks like this...
Clicking it will send you to Jirachi's profile. Like this:
Jirachi
Code fields
By now, you are probably crazy curious on how I got these things on the page where everything is smaller and doesnt turn into things that BBCode would have done. Its done like this:
And it will look like this(I know, you really have seen it, but whatever!) :
If you want to put code tags in these fields like above, you need to do this:
And I did put triple code tags in there, as well :)
Quotes
Quotes can be used to reply to a specific post rather than the last one. Lets say that I wanted to respond to Jirachi's post down below, I did this:
And it would look like this:
Don't worry about all that stuff in the code. All you need to do for this one is go to a thread, look at a post and then press the "Quote" button to the top-right of the post :)
Fonts
This section is kind of split in 2. The first one will cover the text sizes you may also be pretty dang curious about by now, and the second one will be about font "faces" that change how text looks.
Making a piece of text smaller works like this:
And it will look like this:
this is small.
Making it bigger works like this...
To achieve this:
THIS IS HUGE!
You can have anything in the "size=" part, as long as it is not under 1 and not above a certain amount which I keep forgetting. Its over 1600, though, and you probably will never use that because a dot using that size will fill up nearly the whole screen.
Font faces have a different effect. The default face is Trebuchet MS, so you are unlikely to ever say
in the code.
There are multiple faces, but I will only cover a few; Impact and Arial. If you click on the "Font Face" button above the text editor, you will see how they look right from the first glance.
Impact is thick and looks like this.
Arial is more like this.
Colors
The last thing I want to explain is text colors. There are over 16 million possible colors that you can use, so I wont cover them all. Instead, I will tell you some things that you will need to remember about it:
Press the button that looks like color disc, next to the "bold" button.
From here, you can select a color from the pipe, and then select a brightness/saturation from the box. If you know how HEX coloring works, you can also fill in the code in the small text field to the bottom-right.
Please do not use blue. On this forum, its really hard to read because it has a gray background.
You can use gray text. That would be for hidden messages :P
Congratulations, you have reached the end of the BBCode tutorial. Phew!
I hope this is helpful, it took me a while to make it x3
Bye!
What it is
BBCode stands for Bulletin Board Code, and it is very similar to things like Wikitext(code used on Wikia and Wikipedia) and HTML(basic language in how web pages are written). Since it is a markup language, there are opening and closing "tags", and almost all of these tags must be closed.
Unlike HTML, BBCode is almost only used for formatting.
BBCode has different things that you can make on nearly every forum. For instance, on some forums you can have boxes containing tags that you can expand with a click, but on this one, you cant. Note that admins can always change what can and what can not be made using BBCode, so this guide may not always be up to date.
If you cant learn everything in this post, don't worry. Above the text editor that you use when writing a post, there are a bunch of buttons that allow you to quickly insert premade BBCode. If you're not sure what which button does, hold your mouse over a button(don't press it) and a balloon will appear telling you what it does. :)
How to use
This section will show all tags you can currently use on the Legends of Johto board and what they do.
Bold text
Makes text more noticeable and thick.
How to write:
[b]This text is bold![/b]
How it looks:
This text is bold!
Italic text
Don't worry, you don't have to learn the Italic language for this one. This one makes text a bit more noticable and skew.
How to write:
[i]This text is italic![/i]
How it looks:
This text is italic!
Underlined text
This does exactly what it makes on the tin. It highlights text and makes it more noticeable. You may want to not use this one too often as people tend to mistake it for links to other pages, which is rather annoying. You can also use it in combo with the Crossed out text(below) to correct mistakes.
How to write:
[u]This text is underlined![/u]
How it looks:
This text is underlined!
Crossed out text
Again exactly does what its called, this text is crossed out. You can use this one to correct mistakes while keeping the original text, or for
How to write:
[s]This text is crossed out![/s]
How it looks:
Subscript and Superscript
These are often used for math. So you wont come across it too often on Legends of Johto :P
Superscript is used as "power of" in math. This means, for example, if I write:
5[sup]3[/sup] equals 5x5x5
And it will look like this:
53 equals 5x5x5
That, by the way, is 125.
Subscript is used when defining molecules. This means you will most likely never come across this on LoJ(Legends of Johto).
How to write:
H[sub]2[/sub]O
How it looks:
H2O
That, by the way, is water.
Text alignment
If I want this sentence to be to the left, this one in the middle, and this one to the right, I do this:
[div align="left"]This text is on the left...[/div]
[div align="center"]...this text in the middle...[/div]
[div align="right"]...and this text is to the right![/div]
And it will look like this:
This text is on the left...
...this text in the middle...
...and this text is to the right!
You can also make a single sentence fill the whole line. This is done like this:
[div align="justify"]This sentence is annoyingly filling the whole line![/div]
To get this result:
This sentence is annoyingly filling the whole line!
Tables
Sorry, no coffee tables. This is a little more complicated. There is complicated BBCode for this, but fortunately, the LoJ format we use is nice enough to help us a bit, so instead, I will cover that part instead of the code. Maybe I will add the code later, however...
Just press the button that looks like a game of Ticktacktoe. You will be asked what you want the table to look like. Sadly, it is not possible to directly add more space or remove space from the table, so you will either have to fill the whole thing in again or wait for me to the table BBCode part to this guide.
You will get this:
[table][tbody]
[tr]
[td style="padding: 3px;"]Row 1 column 1[/td]
[td style="padding: 3px;"]Row 1 column 2[/td]
[/tr]
[tr]
[td style="padding: 3px;"]Row 2 column 1[/td]
[td style="padding: 3px;"]Row 2 column 2[/td]
[/tr]
[/tbody][/table]
You can then fill in the premade text, but don't touch anything inside the [ and ]. You can for instance make it like this:
[table][tbody]
[tr]
[td style="padding: 3px;"]This...[/td]
[td style="padding: 3px;"]...is a...[/td]
[/tr]
[tr]
[td style="padding: 3px;"]...pointless...[/td]
[td style="padding: 3px;"]...table![/td]
[/tr]
[/tbody][/table]
To achieve this:
This... | ...is a... |
...pointless... | ...table! |
Lists(and smilies)
Luckily, lists are not that complicated as tables
...pardon me. That was a smiley that I just had to put in. I will cover these really quick, because they are too simple to have their own section. Click the button with the face, and select a smiley. And you're done!
Now, for the lists. Lists can be made by pressing the button that vaguely looks like repeating Morse codes. Its next to the table button(the one that looks like a Tictactoe field!).
You will be asked how many list items you want, and the style. The style part is self-explaining when you click on it, so I will not cover it. There is some weird bug, however, that causes nothing to appear on the style field even if you click on it. Don't worry though, if you clicked properly, you really got it selected :)
You can do this:
[ul type="circle"]
[li]To[/li]
[li]Get[/li]
[li]this![/li]
[/ul]
To see this:
- To
- Get
- this!
Horizontal lines
These are really simple. Just press the button next to the list button and you're done!
So you can do this:
[hr]
To get this:
Notice that I did not close the horizontal line tag? That's because its one of these that you don't have to close
Links
There are 2 types of links. Page links and Email links. They look the same, but clicking them will do different things. Obviously, a page link will send you to a web page and an email link will open up your default email program, allowing you to send an email to the address it was linked to.
A page link looks like this in the code...
[a href="https://twitter.com/LegendsOfJohto"]This will send you to LoJ's Twitter![/a]
And it looks like this on the page...
This will send you to LoJ's Twitter!
An email link also looks the same in the code...
[a href="mailto:legendsofjohto@hotmail.co.uk"]This will have you send an email to LoJ![/a]
Notice the "mailto:" part before the email address. In computer language, that makes a link an email address.
It looks like this on the page...
This will have you send an email to LoJ!
Images
Images are just what they're called. Pictures. :P
Images fill the whole page to suit their size, so if you are posting a big image, please post them into a link tag rather than an image tag. That is because it will decrease page loading times a lot, and its easier to read if there is no big-Lickilicky image in the middle of the page that expands outside of the "border lines" of the page(the black lines that separate the page from the gray background).
And image looks like this in the code, very similar to a link...
[img src="https://pbs.twimg.com/profile_images/378800000625840404/8231abdde8842c181e99ebd84ce22141.jpeg" alt="This text is mouse-over text!"]
And that will result in this:
If you try to mouse over the image(don't click it), you will see the text in the "alt="This text is mouse-over text!"" part of the tag.
You do not have to close it, by the way :P
Videos
Videos work similar to images, the difference being that videos move, and pictures do not :)
You can link directly to .wmv files, .avi files, .mpg files, .mov files and .mp4 files around the internet. You can also link to a video page from these popular video sites: College Humor, Daily Motion, Gametrailers.com, Justin.tv, Meta Cafe, MySpace videos, UStream, Veoh, Vimeo and YouTube.
A link to YouTube looks like this...
[video]http://www.youtube.com/watch?v=JuYeHPFR3f0[/video]
And it will magically turn into this awesome song!
User links
Yes, I know, I said there were only 2 types of links, but user links work a lot different. They are quite simple, really.
All you do is put a @ sign and then a username. It looks like this...
@Jirachi
Clicking it will send you to Jirachi's profile. Like this:
Jirachi
Code fields
By now, you are probably crazy curious on how I got these things on the page where everything is smaller and doesnt turn into things that BBCode would have done. Its done like this:
[code]echo "I love you"
[/code]And it will look like this(I know, you really have seen it, but whatever!) :
echo "I love you"
If you want to put code tags in these fields like above, you need to do this:
[code][code]Code goes here!
[/code][/code]And I did put triple code tags in there, as well :)
Quotes
Quotes can be used to reply to a specific post rather than the last one. Lets say that I wanted to respond to Jirachi's post down below, I did this:
[quote author="@Jirachi" source="/post/24/thread" timestamp="1382500821"]Testing something real quick...[/quote]
And it would look like this:
Testing something real quick...
Don't worry about all that stuff in the code. All you need to do for this one is go to a thread, look at a post and then press the "Quote" button to the top-right of the post :)
Fonts
This section is kind of split in 2. The first one will cover the text sizes you may also be pretty dang curious about by now, and the second one will be about font "faces" that change how text looks.
Making a piece of text smaller works like this:
[font size="1"]this is small.[/font]
And it will look like this:
this is small.
Making it bigger works like this...
[font size="7"]THIS IS HUGE![/font]
To achieve this:
THIS IS HUGE!
You can have anything in the "size=" part, as long as it is not under 1 and not above a certain amount which I keep forgetting. Its over 1600, though, and you probably will never use that because a dot using that size will fill up nearly the whole screen.
Font faces have a different effect. The default face is Trebuchet MS, so you are unlikely to ever say
[font face="trebuchet ms"]Trebuchet MS[/font]
in the code.
There are multiple faces, but I will only cover a few; Impact and Arial. If you click on the "Font Face" button above the text editor, you will see how they look right from the first glance.
Impact is thick and looks like this.
Arial is more like this.
Colors
The last thing I want to explain is text colors. There are over 16 million possible colors that you can use, so I wont cover them all. Instead, I will tell you some things that you will need to remember about it:
Press the button that looks like color disc, next to the "bold" button.
From here, you can select a color from the pipe, and then select a brightness/saturation from the box. If you know how HEX coloring works, you can also fill in the code in the small text field to the bottom-right.
Please do not use blue. On this forum, its really hard to read because it has a gray background.
You can use gray text. That would be for hidden messages :P
Congratulations, you have reached the end of the BBCode tutorial. Phew!
I hope this is helpful, it took me a while to make it x3
Bye!