BBCode Tutorial!

Right. I've decided to make this for obvious reasons.

People have been complaining about it a bit.
I see a lot of stuff with broken links or bad coding.
You might be able to find out something you didn't already know =D

TEXT FORMATTING
This is good if you want to make something stand out in a post.
TEXT

Code: Select all

[B]TEXT[/b]

Another method can be italics.
TEXT

Code: Select all

[i]TEXT[/i]

Or underlining works great too.
TEXT

Code: Select all

[u]TEXT[/u]

A new feature added by the staff recently is the strike-out BBCode.
TEXT

Code: Select all

[s]TEXT[/s]

And another custom code added by the staff is the center BBCode.

Code: Select all

[center]TEXT[/center]

You could use different sizes.
TEXT

Code: Select all

[size=18]TEXT[/size]

Or different colors too.
TEXT TEXT2

Code: Select all

[color=red]TEXT[/color] [color=#005555]TEXT2[/color]

Any color can be used but it just depends if you can get the color code for it.

Code: Select all

color=#91410D]*TEXT*[/color]

TEXT


URL LINKING

http://forums.darkdemon.org/viewtopic.php?t=10263
That works without the url tags. although there are situations where the tags are needed.

Code: Select all

[url]*LINK*[/url]

http://forums.darkdemon.org/viewtopic.php?t=10263
That's the simple code. That is best if you don't want to put too much effort into it or you are in a rush.

POSTING PICTURES

Code: Select all

[img]*PICTURE LINK*[/img]

For pictures I would recomend using ImageShack and copy the [img] tagged option.

Code: Select all

[url=*LINK*]*TEXT*[/url]

My Animations
That is with simple text in a code. This is good for signatures because it makes it tidy and more professional.

Code: Select all

[url=*LINK*][img]*PICTURE LINK*[/img][/url]

Get fancy by putting a picture or animation into the link.

TEXT GRADIENT - Supplied by Dark_Cloud + Smashdood
A Paradox of Biblical Proportions

Code: Select all

[size=28][color=#004444]A[/color] [color=#044400]P[/color][color=#084408]a[/color]
[color=#0C4410]r[/color][color=#104418]a[/color]
[color=#144420]d[/color][color=#184428]o[/color]
[color=#1C4430]x[/color] [color=#204438]o[/color]
[color=#244440]f[/color][color=#284448]B[/color]
[color=#2C4450]i[/color][color=#304458]b[/color]
[color=#344460]l[/color][color=#384468]i[/color]
[color=#3C4470]c[/color][color=#404478]a[/color]
[color=#444480]l[/color][color=#484488]P[/color]
[color=#4C4490]r[/color][color=#504498]o[/color]
[color=#5444A0]p[/color][color=#5844A8]o[/color]
[color=#5C44B0]r[/color][color=#6044B8]t[/color]
[color=#6444C0]i[/color][color=#6844C8]o[/color]
[color=#6C44D0]n[/color][color=#7044D8]s[/color][/size]

This is a long and difficult process if you want to do it. I would strongly reccomend you don't do it but use this program instead of doing it yourself.
http://www.tektek.org/color/

QUOTING

Quoting is easy if you get it right.
Simply using the tags around someone's quote is easy, or using the quote button works too, but you can do it yourself.

Quoted Text

Code: Select all

[quote]Quoted Text[/quote]

And to personalise it, including the name above the quote, add the name as the quote's value.

Bolt wrote:Quoted Text

Code: Select all

[quote="Bolt"]Quoted Text[/quote]

LISTS

Lists can be a good code to add in, making information easier to read and to better organise your posts.

Option 1
Option 2

Code: Select all

[list]
Option 1
Option 2
[/list]

As you can see this is a simple list, simply indenting the information and placing it on new lines neatly.

To create an ordered list with bullet points add [*] before each line. eg.

• Option 1
• Option 2

Code: Select all

[list]
[*]Option 1
[*]Option 2
[/list]

You can also have numbered lists like so:

1. Option 1
2. Option 2

Code: Select all

[list=1]
[*]Option 1
[*]Option 2
[/list]

And finally, alphabetically organised:

1. Option 1
2. Option 2

Code: Select all

[list=a]
[*]Option 1
[*]Option 2
[/list]

For more information on BBcode or this information set out differently go to:
http://www.darkdemon.org/forums/faq.php?mode=bbcode

cool i needed the text thing for my siggy

yes finally someone can teach people how to use BBcode : D this should be announed

Indeed. Bolt, you're on a roll. :P

Haha, this will help alot of people : D

Glad that you're helping out people and stuff : ) you're really on the roll : P

Oh my god... Another one... Seriously... this rocks =D

Thanks Bolt that helped me out, before I didn't know how to put the link in my sig. But now I do! I probably won't use it though, but it's nice to know.
Also I would like to request a code. Do you know how to make the text a gradient or do you just make it in another program and put [img] tags?

If you are reffering to the ones like The Title On This Page I'm quite sure he separately colored each letter.

Code: Select all

r[size=28][color=#004444]A[/color] [color=#044400]P[/color][color=#084408]a[/color]
[color=#0C4410]r[/color][color=#104418]a[/color]
[color=#144420]d[/color][color=#184428]o[/color]
[color=#1C4430]x[/color] [color=#204438]o[/color]
[color=#244440]f[/color][color=#284448]B[/color]
[color=#2C4450]i[/color][color=#304458]b[/color]
[color=#344460]l[/color][color=#384468]i[/color]
[color=#3C4470]c[/color][color=#404478]a[/color]
[color=#444480]l[/color][color=#484488]P[/color]
[color=#4C4490]r[/color][color=#504498]o[/color]
[colo=#5444A0]p[/color][color=#5844A8]o[/color]
[color=#5C44B0]r[/color][color=#6044B8]t[/color]
[color=#6444C0]i[/color][color=#6844C8]o[/color]
[color=#6C44D0]n[/color][color=#7044D8]s[/color][/size

thats basicly how to do gradients
add to top page?

A Paradox of Biblical Proportions

Code: Select all

[size=28][color=#004444]A[/color]
[color=#044400]P[/color][color=#084408]a[/color]
[color=#0C4410]r[/color][color=#104418]a[/color]
[color=#144420]d[/color][color=#184428]o[/color]
[color=#1C4430]x[/color] [color=#204438]o[/color]
[color=#244440]f[/color][color=#284448]B[/color]
[color=#2C4450]i[/color][color=#304458]b[/color]
[color=#344460]l[/color][color=#384468]i[/color]
[color=#3C4470]c[/color][color=#404478]a[/color]
[color=#444480]l[/color][color=#484488]P[/color]
[color=#4C4490]r[/color][color=#504498]o[/color]
[color=#5444A0]p[/color][color=#5844A8]o[/color]
[color=#5C44B0]r[/color][color=#6044B8]t[/color]
[color=#6444C0]i[/color][color=#6844C8]o[/color]
[color=#6C44D0]n[/color][color=#7044D8]s[/color][/size]

I wouldn't recommend it. Also I was going to ask a mod or something to get the code from the POBP page but you just did it so well done.

Very helpfull...But the Code ruined the whole page.. I love the Paradox one.

Eh? How did it do that?

This thing helped me out alot, do more!

Bolt wrote:Eh? How did it do that?

too much spaces after the code in the code tags. I think...

Edited all the codes to make the layout lovely again.
You don't have to thank me : )