Guide To BBCode

[Nguyen Trung Hoa]

Guide to BBCode in phpBB2.0

This was made by Kjorf^_^.

It covers tags of BBCode in phpBB2.0
This guide was created to minimize the questions such as
"How do I post images?"
"How do I link to other sites"
and more.

Contents

1. How to Change the Appearance of the Text.
   
2. How to Quote
   
3. How to Display Coding
   
4. How to Use Lists
   
5. How to Create Hyper-links (links to other websites)
   
6. How to Post Images
   

How to Change the Appearance of the Text

There are three elements able to be used to change the appearance of the text.

Element 1

Element 1 allows you to make the text bold, in italics, or underlined. Or even all three.


How to make text bold

In this guide, I will show you how to make the word Hello become bold.

Code:


This is done by typing
[b][/b] around the word.
[b]Hello[/b]


By doing this, you get the result

Hello

How to make text in italics

In this part of the guide, I will show you how to make the word Hello in italics.

Code:


This is done by typing [i][/i] around the word.
[i]Hello[/i]


Results in Hello


How to make text underlined

In this part of the guide, I will show you how to make the word Hello underlined.

Code:


This is done by wrapping [u][/u] around the word.
[u]Hello[/u]


Results in Hello


Is it possible to combine them? Yes.

Code:


[b][i]Hello[/i][/b]
[i][u]Hello[/u][/i]
[b][i][u]Hello[/u][/i][/b]


Results in

Hello
Hello
Hello


This completes Element 1.



Element 2

Element 2 allows you to change the colour of the font.

The different colours phpBB2.0 allows you to change the font to is listed below.

• Black
  
• Blue
  
• Brown
  
• Cyan
  
• Dark Blue
  
• Dark Red
  
• Green
  
• Indigo
  
• Olive
  
• Orange
  
• Red
  
• Violet
  
• White
  
• Yellow
  

How to do this?
It is quite simple, it is done by the following

Code:


[color=black]Black[/color]
[color=blue]Blue[/color]
[color=brown]Brown[/color]
[color=cyan]Cyan[/color]
[color=darkblue]Dark Blue[/color]
[color=darkred]Dark Red[/color]
[color=green]Green[/color]
[color=indigo]Indigo[/color]
[color=olive]Olive[/color]
[color=orange]Orange[/color]
[color=red]Red[/color]
[color=violet]Violet[/color]
[color=white]White[/color]
[color=yellow]Yellow[/color]


By doing the above, you will result in:

Black
Blue
Brown
Cyan
Dark Blue
Dark Red
Green
Indigo
Olive
Orange
Red
Violet
White
Yellow

Can you combine colours? No.
Can you combine colours with Element 1? Yes

Code:


[b][color=red]Red text in bold[/color][/b]
[i][color=blue]Blue text in italics[/color][/i]
[u][color]=green]Green text underlined[/color][/u]


The above results in:

Red text in bold
Blue text in italics
Green text underlined

NOTE: Do not change the word color to colour. The tag will no longer work.

Element 3

Element 3 allows you to change the size of the text.

There are 29 sizes (not including 0). The appearance of these sizes ranges from very small to very large.

Below I will list how to change the size of the text and what they will look like.
How to:

Code:


To do this, you wrap the text with [size=X][/size]
(While 0 < X < 30 and X is an integer)

[size=4]Hello, I am Kjorf^_^[/size]
[size=5]Hello, I am Kjorf^_^[/size]
[size=6]Hello, I am Kjorf^_^[/size]
[size=7]Hello, I am Kjorf^_^[/size]
[size=8]Hello, I am Kjorf^_^[/size]
[size=9]Hello, I am Kjorf^_^[/size]
[size=10]Hello, I am Kjorf^_^[/size]
[size=11]Hello, I am Kjorf^_^[/size]
[size=12]Hello, I am Kjorf^_^[/size]
[size=13]Hello, I am Kjorf^_^[/size]
[size=14]Hello, I am Kjorf^_^[/size]
[size=15]Hello, I am Kjorf^_^[/size]
[size=16]Hello, I am Kjorf^_^[/size]
[size=17]Hello, I am Kjorf^_^[/size]
[size=18]Hello, I am Kjorf^_^[/size]
[size=19]Hello, I am Kjorf^_^[/size]
[size=20]Hello, I am Kjorf^_^[/size]
[size=21]Hello, I am Kjorf^_^[/size]
[size=22]Hello, I am Kjorf^_^[/size]
[size=23]Hello, I am Kjorf^_^[/size]
[size=24]Hello, I am Kjorf^_^[/size]
[size=25]Hello, I am Kjorf^_^[/size]
[size=26]Hello, I am Kjorf^_^[/size]
[size=27]Hello, I am Kjorf^_^[/size]
[size=28]Hello, I am Kjorf^_^[/size]
[size=29]Hello, I am Kjorf^_^[/size]


The above will result in this:

Hello, I am Kjorf^_^
Hello, I am Kjorf^_^
Hello, I am Kjorf^_^
Hello, I am Kjorf^_^
Hello, I am Kjorf^_^
Hello, I am Kjorf^_^
Hello, I am Kjorf^_^
Hello, I am Kjorf^_^
Hello, I am Kjorf^_^
Hello, I am Kjorf^_^
Hello, I am Kjorf^_^
Hello, I am Kjorf^_^
Hello, I am Kjorf^_^
Hello, I am Kjorf^_^
Hello, I am Kjorf^_^
Hello, I am Kjorf^_^
Hello, I am Kjorf^_^
Hello, I am Kjorf^_^
Hello, I am Kjorf^_^
Hello, I am Kjorf^_^
Hello, I am Kjorf^_^
Hello, I am Kjorf^_^
Hello, I am Kjorf^_^
Hello, I am Kjorf^_^
Hello, I am Kjorf^_^
Hello, I am Kjorf^_^

Can you combine Element 3 with other Elements? Yes.

Code:


[size=18][b][color=red]Size 18 text, bold and in the colour red[/color][/b][/size]


Results in:

Size 18 text, bold and in the colour red


This comes to the end of 'How to Change the Appearance of the Text'


On to the next section.
How to Quote

Quoting is used most often while replying to other's posts. You can quote by

1. Clicking the quote button at the top right of the persons post, or
   
2. Quoting manually
   

How to Quote Manually

Quoting manually is quite easy.
It is done by wrapping

Code:


[quote="(persons name)"][/quote]


around the text.

For example,

Code:


[quote="Kjorf^_^]Quoting manually is quite easy.[/quote]


Results in:

Quoting manually is quite easy.

Can you combine other elements into quotes? Yes.

Code:


[quote="Kjorf^_^"][b][u][size=16]How to Quote Manually[/size][/u][/b][/quote]


Would give you this:

How to Quote Manually

Frequency is popular with quotes, because he changes what people say. For example:

This is a BBCode Guide

Yes it is

Agreed

Is it possible to have a quote in a quote? Yes. This is demonstrated above.
For the example above, it is done by:

Code:


[quote]
[quote="Kjorf^_^"]This is a BBCode Guide[/quote]
[quote="Person"][quote="Person#2"]Yes it is[/quote]Agreed[/quote]
[/quote]


NOTE: Remember to place quotes (" ") around the name of whom you are quoting. You do not have to specify a name, if you do not, do not include the equals sign (=)

Newly Added:
Spoiler Tags

There is no actual spoiler tag, however it can be done by using Quote and Colour

Code:


[quote][color=white]Spoiler[/color][/quote]


The readers then need to highlight the Quote to read the text - "Spoiler"
Observe.

Spoiler

This comes to the end of How to Quote.


How to Display Coding

I have done this a lot of times during this guide. Displaying coding is a lot like quoting, however you cannot combine this tag with any other with one exception. You can quote somebody else's code.
An example of this exception is below.

Code:


[quote][code]You can quote somebody else's code.[/code][/quote]


Results in:

Code:

You can quote somebody else's code.

To display coding, it is done by the following.

Code:


[code]This is a section of code[/code]


This results in:

Code:

This is a section of code

The reason for why you cannot combine the code tag with any other, is because when you do, you see the tag, not the result.
For example,

If I wanted to show bold text inside a code tag, I couldn't. Instead, it would look like this.

Code:

The following is [b]bold text[/b]

This is why the code tag can be useful. It allows you to show how to do certain things, such as this guide, I have used the code tag to show you how to use BBCode.


This comes to the end of How to Display Code.


How to use Lists

Using lists is uncommon, and you can barely see anyone using them.

During this guide, I have used lists often. They are one of the more complex BBCodes.

There are 2 types of lists. Ordered and Unordered.

There are three parts of the list tag. The open tag

Code:


[list]

, the close tag

Code:


[/list]

, and the indicator tag

Code:


[*]

.

The open tag sets the type of list and indicates that you are about to create a list. The close tag closes the list, and the indicator tag indicates that the next set of lines is one part of the list (i.e. How to Quote is one part of the Contents list)

Unordered Lists

Unordered lists are the same as bullet points.
An example of an unordered list is below.

Code:


Colours of the rainbow in order.
[list]
[*]Red
[*]Orange
[*]Yellow
[*]Green
[*]Blue
[*]Indigo
[*]Violet
[/list]


This results in the following:

Colours of the rainbow in order.

• Red
  
• Orange
  
• Yellow
  
• Green
  
• Blue
  
• Indigo
  
• Violet
  

Ordered Lists

Ordered lists have numbers or letters instead of bullet points.
The section of code below explains how a number ordered list is done.

Code:


[list=1]
[*] 1 + 1 = 2
[*] 2 + 2 = 4
[*] 3 + 3 = 6
[*] 4 + 4 = 8
[/list]


This results in:

1. 1 + 1 = 2
   
2. 2 + 2 = 4
   
3. 3 + 3 = 6
   
4. 4 + 4 = 8
   

A lettered ordered list can be done by the following.

Code:


[list=A]
[*] Firewalls
[*] Antivirus
[*] Antispyware
[*] Antispam
[/list]


This results as the following:

1. Firewalls
   
2. Antivirus
   
3. Antispyware
   
4. Antispam
   

Can you combine the list function with other tags except coding? Yes.

Observe the other lists I have made in this guide. A good example is the list of available colours.


This comes to the end of How to use Lists.

How to Create Hyper-links

Hyper-links are a useful tool to show people other websites that you enjoy, are relevant to the topic etc.

There are two ways of creating a hyper-link in BBCode.
The first way to create a hyper-link in BBCode, it is done by the following.

Code:


[url]www.google.com.au[/url]


Doing so allows people to go to Google Search, Australia by clicking on the link which would look like this -

Code:

[url]www.google.com.au[/url] (Coded for Various Reasons  :D )

The second way of creating a hyper-link in BBCode, is done by the following.

Code:


[url=www.google.com.au]Google Search, Australia[/url]


Doing this allows people to not see the URL of the hyper-link, it makes the hyperlink the specified text, in this case which would be:

Code:

[url=www.google.com.au]Google Search, Australia.[/url] (Coded for Various Reasons  :D )

Can you combine other tags into the url? Yes
For example,

Code:


[url=www.google.com.au][b][color=red]Google Search, Australia[/color][/b][/url]


Results in:

Code:

[url=www.google.com.au][b][color=red]Google Search, Australia[/color][/b][/url] (Coded for Various Reasons  :D )

It is common courtesy, while using the second example, to not trick the person into going to another site which is not advertised. For example, clicking this link

Code:

[url=www.yahoo.com.au]www.google.com.au[/url] (Coded for Various Reasons  :D )

, would not go to Google, however it will go to Yahoo.


This comes to the end of How to Create Hyper-links with BBCode.

Last but not least,

How to Post Images

Images are easy to post, however uploading the image can be a different story. In this section of the guide, I will inform you of how to do both.

To post an image, do the following:

Code:


[img](imageurl)[/img]
For an example,
[img]http://i39.tinypic.com/2le0vhv.jpg[/img]
would display the picture below,


That is how to post an image.

Now how to upload an image.

A good site to do this is

Code:

www.tinypic.com

They provide a free image uploading service.


This comes to the end of my guide. I hope it helps you with phpBB2.0 BBCode.

Please help me find any errors in this guide, any malfunctions of the code etc.

Good luck, farewell.

Replies please.

I would love feedback.