Would you like to react to this message? Create an account in a few clicks or log in to continue.

[TUT] The BBcode Guide

4 posters

Go down

[TUT] The BBcode Guide Empty [TUT] The BBcode Guide

Post by roanxxx Thu Mar 07, 2013 8:07 am

BBcode

What is BBcode?

BBCode is a special implementation of HTML. Whether you can actually use BBCode in your posts on the forum is determined by the administrator. In addition, you can disable BBCode on a per post basis via the posting form. BBCode itself is similar in style to HTML: tags are enclosed in square brackets [ and ] rather than < and > and it offers greater control over what and how something is displayed. Depending on the template you are using you may find adding BBCode to your posts is made much easier through a clickable interface above the message area on the posting form. Even with this you may find the following guide useful.

Text Formatting

BBCode includes tags to allow you to quickly change the basic style of your text. This is achieved in the following ways:

To make a piece of text bold enclose it in:
Code:
[b]Hello[/b]
Result: Hello

For underlining use:
Code:
[u]Hello[/u]
Result: Hello

To italicize text use:
Code:
[i]Great![/i]
Result: Great!

To strike some text:
Code:
[strike]Test[/strike]
Result: test

How to change the text colour or size

To alter the color or size of your text the following tags can be used. (Keep in mind that how the output appears will depend on the viewers browser and system):

To change your text color, you can specify a known color (ex: red, blue, yellow, etc.), or an hexadecimal color code (ex: #FFFFFF, #000000):
Code:
[color=red]Red color (red)[/color] or [color=#FF0000]Red color (#FF0000)[/color]
Result: Red color (red) or Red color (#FF0000)

To change your text size, you must specify the text size in pixel, from 1 (so small you won't see it) to 29 (very huge):
Code:
[size=9]SMALL[/size] or [size=24]HUGE[/size]
Result: SMALL or HUGE

To change the font, you must specify a recognized font (ex: Verdana, Arial) if the user hasn't got the font, a default one will be displayed :
Code:
[font=Arial]Arial font[/font] or [font=Comic Sans Ms]Comic sans MS font[/font]
Result: Arial font or Comic sans MS font

Can I combine formatting tags?

Yes, of course you can; for example to get someones attention you may write:

Code:
[size=18][color=red][b]LOOK AT ME ![/b][/color][/size]
will give: LOOK AT ME !
Although, we recommend you not to use much text as above ! Remember that it's your task to correctly shut the tags. The following example is incorrect:
Code:
[b][u]This is incorrect[/b][/u]
The correct form is :
Code:
[b][u]This is correct[/u][/b]

Quoting and outputting fixed-width text

Quoting text in replies

There are two ways you can quote text: with a reference or without.
The reference example, to quote a post wrote by Mr. Blobby, you must enter:
Code:
[quote="Mr. Blobby"]The text wrote by Mr. Blobby must be placed here[/quote]
Result :
Mr. Blobby wrote:The text wrote by Mr. Blobby must be placed here
Remember that you must include the quotation marks "" around the name you are quoting -- they are not optional.

The second method allows you to blindly quote something. To use it :
Code:
[quote]Blind quote[/quote]
Result:
Blind quote

Outputting code or fixed width data

If you want to output a piece of code (HTML or other) or in fact anything that requires a fixed width with a Courier-type font, you must use the following BBCode :
Code:
[code]echo "This is some code";[/code]
Result:
Code:
echo "This is some code";
This is exactly what we use in this FAQ to show you all the BBCodes you can use.

Generating lists
Creating an Un-ordered list

An un-ordered list produces a list which entries are one underneath the others and indented with a bullet character.

Creating an Ordered list

The second list type gives you the control on what will be displayed before each entry. To create an ordered list, you've got two possibilites :

A numbered list :
Code:
[list=1][*]Do shopping[*]Buy a new computer[*]Yell to its computer when it crashes[/list]
Result :
  1. Do shopping
  2. Buy a new computer
  3. Yell to its computer when it crashes


An alphabetical list :
Code:
[list=a][*]First possible answer[*]Second possible answer[*]Third possible answer[/list]
Result:
  1. First possible answer
  2. Second possible answer
  3. Third possible answer


Creating Links

Linking to another site

The BBcode supports several methods to create links, most commonly known under URLs.

First method, to create for an example a link to forumotion.com you must use :
Code:
[url=http://www.forumotion.com/]Visit forumotion.com ![/url]
Result: Visit forumotion.com !

Second method, if you want the link to display directly the URL :
Code:
[url]http://www.forumotion.com/[/url]
Result: https://www.forumotion.com/

Third method, this forum owns a functionality called 'Magic Links', that will convert automatically an URL into a clickable link, without needing to insert a BBCode tag nor http://. For an example, by typing
Code:
www.forumotion.com
in your message, it will be automatically converted into a link : www.forumotion.com.

Showing images in posts

Adding an image to a post

The BBCode incorporates a tag for including images in your posts. Two very important things to remember when using this tag are: many users do not appreciate lots of images being shown in posts and second, the image you display must already be available on the Internet (it cannot exist only on your computer, for example, unless you run a webserver!). You can upload for free your images on internet by an image hosting such as www.servimg.com. To display an image, you need to proceed as following :

Code:
[img]http://i77.servimg.com/u/f77/18/11/57/84/images11.jpg[/img]
Result:
[TUT] The BBcode Guide Images11

You can place an image into a link if you wish (by insuring yourself that the opening and closure tags are correct), for an example :
Code:
[url=https://www.facebook.com/Eisu.chan/][img]http://i77.servimg.com/u/f77/18/11/57/84/images11.jpg[/img][/url]
Result:
[TUT] The BBcode Guide Images11

Text positioning

Four positions possibilities are proposed :

Left alignment
Code:
[left]text aligned to the left[/left]
Result:
text aligned to the left

The centering :
Code:
[center]Text centered[/center]
Result:
Text centered

Right alignment :
Code:
[right]Text aligned to the right[/right]
Result:
Text aligned to the right

The justification :
Code:
[justify]Otaku is derived from a Japanese term for another's house or family (お宅, otaku). This word is often used metaphorically, as an honorific second-person pronoun. In this usage, its literal translation is "you". For example, in the anime Macross, first aired in 1982, Lynn Minmay uses the term this way.[/justify]
Result:
Otaku is derived from a Japanese term for another's house or family (お宅, otaku). This word is often used metaphorically, as an honorific second-person pronoun. In this usage, its literal translation is "you". For example, in the anime Macross, first aired in 1982, Lynn Minmay uses the term this way.

Scrolling text

Make a message scroll horizontally

If you wish to make a text scroll horizontally, you need to use the following BBcode :
Code:
[scroll]My message[/scroll]
Result:
My message

The second way to make a text scroll is vertically, with the following BBcode :
Code:
[updown]My message[/updown]
Result:
My message

--END

(c)BBcode Tutorial from Forumotion.
roanxxx
roanxxx
Otaku Girlfriend
Otaku Girlfriend

Uploader
[TUT] The BBcode Guide Empty
Best Forum Mod Award
[TUT] The BBcode Guide Empty
Female Comments : 561
<b>Credits</b> Credits : 64570
<b>Kudos Received</b> Kudos Received : 90
<b>Location</b> Location : Under you Covers ~
<b>Join date</b> Join date : 2013-03-06
My Pet : Gaia Cat


http://aibtcofficial.forumtl.com/

Back to top Go down

[TUT] The BBcode Guide Empty Re: [TUT] The BBcode Guide

Post by Kirito Thu Mar 07, 2013 7:48 pm

xD 75% of this is a copy in another forum xD!!!
Kirito
Kirito
APH Level 13
APH Level 13

Chatbox Moderator
Uploader
[TUT] The BBcode Guide Empty
Male Comments : 1243
<b>Credits</b> Credits : 70458
<b>Kudos Received</b> Kudos Received : 50
<b>Location</b> Location : Aincrad
<b>Join date</b> Join date : 2013-03-05

Back to top Go down

[TUT] The BBcode Guide Empty Re: [TUT] The BBcode Guide

Post by MrOrange Thu Mar 07, 2013 7:57 pm

Thanks for these man Smile
MrOrange
MrOrange
APH Level 5
APH Level 5

Uploader
[TUT] The BBcode Guide Empty
Male Comments : 499
<b>Credits</b> Credits : 49383
<b>Kudos Received</b> Kudos Received : 5
<b>Location</b> Location : Sa Puso Natin
<b>Join date</b> Join date : 2013-03-05
My Pet : Remilia Scarlet


https://www.facebook.com/Keisuke.mangafanatic

Back to top Go down

[TUT] The BBcode Guide Empty Re: [TUT] The BBcode Guide

Post by roanxxx Fri Mar 08, 2013 5:38 pm

Kirito-kun07 wrote:xD 75% of this is a copy in another forum xD!!!

Actually I copied it to the forumotion Smile (the original ones who created the tutorial) Didn't you see the copyright credits in the end? XD

c)BBcode Tutorial from Forumotion.

from forumotion: http://help.forumotion.com/forum
roanxxx
roanxxx
Otaku Girlfriend
Otaku Girlfriend

Uploader
[TUT] The BBcode Guide Empty
Best Forum Mod Award
[TUT] The BBcode Guide Empty
Female Comments : 561
<b>Credits</b> Credits : 64570
<b>Kudos Received</b> Kudos Received : 90
<b>Location</b> Location : Under you Covers ~
<b>Join date</b> Join date : 2013-03-06
My Pet : Gaia Cat


http://aibtcofficial.forumtl.com/

Back to top Go down

[TUT] The BBcode Guide Empty Re: [TUT] The BBcode Guide

Post by roanxxx Fri Mar 08, 2013 5:40 pm

MrOrange wrote:Thanks for these man Smile

No problem. XD I just copied it to the owners. Lol
roanxxx
roanxxx
Otaku Girlfriend
Otaku Girlfriend

Uploader
[TUT] The BBcode Guide Empty
Best Forum Mod Award
[TUT] The BBcode Guide Empty
Female Comments : 561
<b>Credits</b> Credits : 64570
<b>Kudos Received</b> Kudos Received : 90
<b>Location</b> Location : Under you Covers ~
<b>Join date</b> Join date : 2013-03-06
My Pet : Gaia Cat


http://aibtcofficial.forumtl.com/

Back to top Go down

[TUT] The BBcode Guide Empty Re: [TUT] The BBcode Guide

Post by Kirito Fri Mar 08, 2013 6:51 pm

hahahaha awesome nice Very Happy
Kirito
Kirito
APH Level 13
APH Level 13

Chatbox Moderator
Uploader
[TUT] The BBcode Guide Empty
Male Comments : 1243
<b>Credits</b> Credits : 70458
<b>Kudos Received</b> Kudos Received : 50
<b>Location</b> Location : Aincrad
<b>Join date</b> Join date : 2013-03-05

Back to top Go down

[TUT] The BBcode Guide Empty Re: [TUT] The BBcode Guide

Post by *MikuNeko Sat Mar 23, 2013 8:38 am

Hahhaha Thanks para dito! nakalimutan ko na kasi ung iba eh XD
*MikuNeko
*MikuNeko
Anime PH Neko Goddess
Anime PH Neko Goddess

Chatbox Moderator
Promoter
Most Helpful Member Award
+PLUS Member
Female Comments : 1183
<b>Credits</b> Credits : 57844
<b>Kudos Received</b> Kudos Received : 42
<b>Location</b> Location : World of LOLIS~
<b>Join date</b> Join date : 2013-03-05
My Pet : Green Cat

<b>My Badges</b>
[TUT] The BBcode Guide Philippines-icon
[TUT] The BBcode Guide U7ag

List of Badges

Back to top Go down

[TUT] The BBcode Guide Empty Re: [TUT] The BBcode Guide

Post by roanxxx Sat Mar 23, 2013 8:42 am

*MikuNeko wrote:Hahhaha Thanks para dito! nakalimutan ko na kasi ung iba eh XD

No prob! XD Hahaha. Tumitingin din ako dito lagi eh.
roanxxx
roanxxx
Otaku Girlfriend
Otaku Girlfriend

Uploader
[TUT] The BBcode Guide Empty
Best Forum Mod Award
[TUT] The BBcode Guide Empty
Female Comments : 561
<b>Credits</b> Credits : 64570
<b>Kudos Received</b> Kudos Received : 90
<b>Location</b> Location : Under you Covers ~
<b>Join date</b> Join date : 2013-03-06
My Pet : Gaia Cat


http://aibtcofficial.forumtl.com/

Back to top Go down

[TUT] The BBcode Guide Empty Re: [TUT] The BBcode Guide

Post by Sponsored content


Sponsored content


Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum