This is a quick tutorial on how to use BBCode.
Before the tutorial, keep this in mind:
Click here to view the full image
As the tip says, if you highlight text, then click on of those buttons, then it will automatically place the tags around the selected text.
----------------------------------------------
Bold
Now, some people like bold text. But when they want the text in their signature to be bold....they're kinda stuck. But when you're making a reply or a thread, its easier to just hit the big bold B underneath the subject box.
The BBCode used to make text bold, is [b(bracket).
The 'b' stands for bold, obviously.
In BBCode, the closer always has a slash (/) in it.
The closer for bold is [/ b] but without the space.
You can also press alt+b to make it bold, idk if this works in signatures though.
Here is a simple code example:
If you typed that, you would get this:
The bird at that Zoo in Indiana went on a cursing spree!
The BBCode used to make text bold, is [b(bracket).
The 'b' stands for bold, obviously.
In BBCode, the closer always has a slash (/) in it.
The closer for bold is [/ b] but without the space.
You can also press alt+b to make it bold, idk if this works in signatures though.
Here is a simple code example:
- Code: Select all
[b]The bird at that Zoo in Indiana went on a cursing spree![/b]
If you typed that, you would get this:
The bird at that Zoo in Indiana went on a cursing spree!
Italic
The letter used for italic letters, is I.
alt+i is also a quick shortcut.
The closer for italic letters, is [/ i] without the space.
If you follow that, you should end up with text like this!
Here is a code example:
final product:
This is an example!
alt+i is also a quick shortcut.
The closer for italic letters, is [/ i] without the space.
If you follow that, you should end up with text like this!
Here is a code example:
- Code: Select all
[i]This is an example![/i]
final product:
This is an example!
Underline
The letter used to underline your text is U.
alt+u is a shortcut to get the same effect
The closer is [/ u] but without the space.
Here is an example:
final product:
Timmy went to the park yesterday and was bitten by a rabid chipmunk
alt+u is a shortcut to get the same effect
The closer is [/ u] but without the space.
Here is an example:
- Code: Select all
[u] Timmy went to the park yesterday and was bitten by a rabid chipmunk[/u]
final product:
Timmy went to the park yesterday and was bitten by a rabid chipmunk
How to Quote
A lot of newbies ask a common question:
How do you properly quote someone?
Well, they dont ask exactly that, but this is the solution to that question!
To start off a quote, you start qith [quote(bracket).
But, if you want to properly quote someone, you would type this:
Here is an example:
final result:
How do you properly quote someone?
Well, they dont ask exactly that, but this is the solution to that question!
To start off a quote, you start qith [quote(bracket).
But, if you want to properly quote someone, you would type this:
personyou'requoting wrote:The closer for a quote is [/ quote] but without the space.
Here is an example:
- Code: Select all
[quote="Magical Swammy"]don't bump old topics, check the dates, bump warning[/quote]
final result:
Magical Swammy wrote:don't bump old topics, check the dates, bump warning
Codes
Ive been using codes once in each of these short tutorials.
To start a code, you use [code(bracket).
Then, you type a code...or just type something.
You close it with [/ code] but without the space.
Example:
[c ode] This is an example[/code]
type that and u get this:
To start a code, you use [code(bracket).
Then, you type a code...or just type something.
You close it with [/ code] but without the space.
Example:
[c ode] This is an example[/code]
type that and u get this:
- Code: Select all
This is an example
Lists
- Fraz
- Was
- Here
To start a list, type [list(bracket). The closer is [/ list]
Then, you can just type stuff. Names, numbers, etc.
Here is an example:
- Code: Select all
[list]
[*]Thjs
[*]Is
[*]How[list][*](how test showing)[/list]
[*]I
[*]Do
[*]It
[/list]
Here is what it should look like!
- Thjs
- Is
- How
- (how test showing)
- I
- Do
- It
ADDON
I forgot to put this part from Fraz's quick help:
- Instead of boring old lists with the same old black dot like the one before this text, you can try things like this:
- Code: Select all
[list=1]
[*]One
[*]Two
[*]Three
[/list]
That code would give you this:
- One
- Two
- Three
Or you can also do this:
- Code: Select all
[list=a]
[*]One
[*]Two
[*]Three
[/list]
That would give you something like this:
- One
- Two
- Three
ANOTHER ADDON
You can also color the list!
- Code: Select all
[list=a]
[*][color=red]One[/color]
[*][color=blue]Two[/color]
[*][color=green]Three[/color]
[/list]
You get this:
- One
- Two
- Three
You MUST color every line. If you do this:
- Code: Select all
[list=a]
[*][color=red]One
[*]Three
[*]Three[/color]
[/list]
It should result in epic fail like this:
- One
- Three
- Three
Images
Dylan wrote:
If you got a sig from a shop or want a picture of any kind, just right click, properties, and look at the URL that is already there, so you don't have to whine that it's not hosted for you.
Images are probably the most commonly confused of the codes...expecially with the new folk.
Now, to start, you need to type [img(bracket).
Next, you need to type a URL address, preferrably from tinypic,imageshack,photobucket, or filecram.
The closer is [/ img] without the space.
Here is an example:
- Code: Select all
[img]http://i33.tinypic.com/2coihxg.jpg[/img]
end result:
URLs
The URL option is simple. IF you have a URL address following dots or dashes, you will have to put [url(bracket) and [/ url] (without spaces) around the address. Like so:
Before:
---http://i33.tinypic.com/2coihxg.jpg
After:
---http://i33.tinypic.com/2coihxg.jpg
BUT! If you want to embed a URL address inside text, you will need to follow this code:
If you remove the space, you get something like this:
--you can put whatever you want here--
Before:
---http://i33.tinypic.com/2coihxg.jpg
After:
---http://i33.tinypic.com/2coihxg.jpg
BUT! If you want to embed a URL address inside text, you will need to follow this code:
- Code: Select all
[url=your URL address here]your title here![/url]
If you remove the space, you get something like this:
--you can put whatever you want here--
BBCode in BBCode
EXAMPLE:
You can make the title for your URL address bold!
If you do that, you should get something like this:
---put whatever here---
You can make the title for your URL address bold!
- Code: Select all
[url=http://i33.tinypic.com/2coihxg.jpg][b]---put whatever here---[/ b][/url]
If you do that, you should get something like this:
---put whatever here---
Coloring Links
Changing the colors of your links!
Well, I was requesting for a userbar when I remembered...you can change the colors of your links so that you dont always have the boring blue links.
Well...this can be used to make small puzzles. Like so:
Find the Link!
Loco Roco
If you hovered the mouse over each letter....you would find the link embedded in the C. I will show you the code for that later. But now, here is the code to change the colors of links:
If you type something like that, you should get this!:
Hello Image
Now, if you wanted to make a game of it, you could type a code like this:
and if you typed that outside a code box, you would get this:
Hello
Well, I was requesting for a userbar when I remembered...you can change the colors of your links so that you dont always have the boring blue links.
Well...this can be used to make small puzzles. Like so:
Find the Link!
Loco Roco
If you hovered the mouse over each letter....you would find the link embedded in the C. I will show you the code for that later. But now, here is the code to change the colors of links:
- Code: Select all
[url=http://i33.tinypic.com/2coihxg.jpg][color=green]Hello Image[/color][/url]
If you type something like that, you should get this!:
Hello Image
Now, if you wanted to make a game of it, you could type a code like this:
- Code: Select all
[color=green][b]He[/b][/color][url=http://i33.tinypic.com/2coihxg.jpg][color=green][b]l[/b][/color][/url][color=green][b]lo[/b][/color]
and if you typed that outside a code box, you would get this:
Hello
Coloring Text (Alternative)
Instead of doing this to change the colors of your letters:
But, you can also do this:
And you get the same effect:
Red Text
Text
---
#FF0000 is the codename for red...each codename consists of a # sign, and 6 letters/numbers.
But, it is impossible to memorize all the codenames, so you can got to Microsoft Paint for help! (double click on one of the colors and use the mixer for the codenames!)
You can make rainbows out of this too! like so:
That code would get you this:
Gradient
Now it doesn't take all that long, but it does tend to get irritating if you do it a lot.
- Code: Select all
[color=red]Text[/color]
But, you can also do this:
- Code: Select all
[color=#FF0000]Red Text[/color]
And you get the same effect:
Red Text
Text
---
#FF0000 is the codename for red...each codename consists of a # sign, and 6 letters/numbers.
But, it is impossible to memorize all the codenames, so you can got to Microsoft Paint for help! (double click on one of the colors and use the mixer for the codenames!)
You can make rainbows out of this too! like so:
- Code: Select all
[size=18][color=#000ee4]G[/color][color=#005ee4]r[/color][color=#0079e4]a[/color][color=#0099e4]d[/color][color=#00c4e4]i[/color][color=#00e4e4]e[/color][color=#00e4cf]n[/color][color=#00e4af]t[/color][/size]
That code would get you this:
Gradient
Now it doesn't take all that long, but it does tend to get irritating if you do it a lot.
Smileys
Yes, you read it, smileys are, in fact, BBCode...but only if you write them in any of these three formats:
All 3 ways to type it are considered BBCode by Wikipedia.
Now the bottom of those 3 is the only type that work on Droidz. But I do belive that the bottom type works on DarkDemon (without asterix).
The top one is rarely seen, but it is used.
Proof that 2 of them dont work:
[:)]
:smile:
---
A shortcut instead of typing would be clicking the smiley on the right side of the text-box, in-between Very Happy, and Sad.
- Code: Select all
[:)]
or
:smile:
or
*:)*
All 3 ways to type it are considered BBCode by Wikipedia.
Now the bottom of those 3 is the only type that work on Droidz. But I do belive that the bottom type works on DarkDemon (without asterix).
The top one is rarely seen, but it is used.
Proof that 2 of them dont work:
[:)]
:smile:
---
A shortcut instead of typing
would be clicking the smiley on the right side of the text-box, in-between Very Happy, and Sad.
Text Size
I can't imagine that I forgot to add a tutorial here for changing the size of your text
Now, I belove that Droidz only has 5 font sizes to choose from:
24,18,12,9,and 7.
But you can make the sizes whatever you want, as long as the size in in-between 7 and 24. Here is an example of how to make your own font sizes:
That would look like this:
Font Sized 15 Looks like this!
Remember, it can be any size, as long as it is greater than 50, and less than 200.
Now, I belove that Droidz only has 5 font sizes to choose from:
24,18,12,9,and 7.
But you can make the sizes whatever you want, as long as the size in in-between 7 and 24. Here is an example of how to make your own font sizes:
- Code: Select all
[size=15] Font Sized 15 Looks like this![/size]
That would look like this:
Font Sized 15 Looks like this!
Remember, it can be any size, as long as it is greater than 50, and less than 200.
Spaces in URLs
NOTE: This method is not BBCode, its just a helpful hint, although it shouldn't be used too often.
This tip should mainly be used if you are stuck, and need to use a space in a directory name.
Exmaple would be the best way to explain, MF, if you want to edit this and make this part better, Ill give you credz like I gave Fraz.
Exmaple:
If you wanted to look in your Music(im only giving partial):
Its really simple. but this part of the tutorial isnt very helpful...so I guess Ill just add more.
credz 2 MF for idea
This tip should mainly be used if you are stuck, and need to use a space in a directory name.
Exmaple would be the best way to explain, MF, if you want to edit this and make this part better, Ill give you credz like I gave Fraz.
Exmaple:
If you wanted to look in your Music(im only giving partial):
- Code: Select all
...My%20Music...
Its really simple. but this part of the tutorial isnt very helpful...so I guess Ill just add more.
credz 2 MF for idea
Linking Images
Thanks to Kaspoogle, I now have added a tut on how tot add hyperlinks to your signatures/images.
Now, you understand the [img] and [url] coding...well, you should, if you dont, then dont even bother with this.
First, take an image.
HERE
Now, you take that, and put it into [img] codes.
http://i33.tinypic.com/2coihxg.jpg
Now, you need to take the [url] tags and add this to it:
That should give you this, and if you click on the image, itll take you to the root of the image.
NOTE: This can work with any valid URL address. Exmaple (darkdemon)
Hope this helped!
Now, you understand the [img] and [url] coding...well, you should, if you dont, then dont even bother with this.
First, take an image.
HERE
Now, you take that, and put it into [img] codes.
- Code: Select all
[img]http://i33.tinypic.com/2coihxg.jpg[/img]
http://i33.tinypic.com/2coihxg.jpg
Now, you need to take the [url] tags and add this to it:
- Code: Select all
[url=http://i33.tinypic.com/2coihxg.jpg][img]http://i33.tinypic.com/2coihxg.jpg[/img][/url]
That should give you this, and if you click on the image, itll take you to the root of the image.
NOTE: This can work with any valid URL address. Exmaple (darkdemon)
- Code: Select all
[url=http://www.darkdemon.org][img]http://i33.tinypic.com/2coihxg.jpg[/img][/url]
Hope this helped!
Centering
Centering something basically takes it from being left alligned, and centers it.
Not Centered
Centered
To center text, just highlight the text you want centered, and click the center button at the far right end of the toolbox thingy. Or if you don't want to, just type in [ center] (without space) put your text next, and close it with [/ center] (without space).
And you get this -------------->
INSERT TEXT HERE
Same basic principle goes for images. Just take the center tags and place them around an image link or an image with the [img] tags around it.
Example:
To get:
Not Centered
To center text, just highlight the text you want centered, and click the center button at the far right end of the toolbox thingy. Or if you don't want to, just type in [ center] (without space) put your text next, and close it with [/ center] (without space).
- Code: Select all
[center]INSERT TEXT HERE[/center]
And you get this -------------->
Same basic principle goes for images. Just take the center tags and place them around an image link or an image with the [img] tags around it.
Example:
- Code: Select all
[center][img]http://i33.tinypic.com/2coihxg.jpg[/img][/center]
To get:
Droidz Stk's
Many of you in the Animation and Stickfigure section like this new feature, it allows you to link and show a .stk from the site's collection.
To do so, just enter the following code:
You can find the stk's code by clicking the little green up arrow next to the link. This bring you straight to an easy link to embed the stk to the forum.
Example:
To do so, just enter the following code:
- Code: Select all
[droidz-stk]STK # HERE[/droidz-stk]
You can find the stk's code by clicking the little green up arrow next to the link. This bring you straight to an easy link to embed the stk to the forum.
Example:
- Code: Select all
[droidz-stk]15393[/droidz-stk]
Hiding Text
Hidden text is a lot like what other forums use for spoilers, but this helps keep large threads organised. In fact, this thread is organised by it. You're welcome
Example:
- Code: Select all
[hide]This text is hidden lol[/hide]
You should get this:
This text is hidden lol
Spoilers
What a corny title, it almost ruins this section, but I digress.
Spoilers hide text, and when the spoiler is highlighted with the mouse, the text is revealed. It is usually intended on forums for movie/game spoilers so that certain things wont be ruined for others.
But here, it is almost never used as that.
Example:
And you should get this:
If you see this text after highlighting it, good job!
Spoilers hide text, and when the spoiler is highlighted with the mouse, the text is revealed. It is usually intended on forums for movie/game spoilers so that certain things wont be ruined for others.
But here, it is almost never used as that.
Example:
- Code: Select all
[spoiler]If you see this text after highlighting it, good job![/spoiler]
And you should get this:
If you see this text after highlighting it, good job!
Strikethrough
This usually means that you take something back or are crossing it off of a list.
Here is an example:
You get:
This text has been sliced in half, OMG!
Here is an example:
- Code: Select all
[strike]This text has been sliced in half, OMG![/strike]
You get:
YouTube Vids
Embed YouTube videos into your post, I think that's pretty straight forward. Here's how it's done:
You should get this (lolfunny):
- Code: Select all
[youtube]http://www.youtube.com/watch?v=_QyYaPWasos[/youtube]
You should get this (lolfunny):
------------------------------------------------------------------------------
Only Admins can add more BBCode.
What I have taught here is all of the basic BBCode examples, and how to use them. But this isnt everything, Administrators can make their own BBCode and give it their own meaning of it. But this is everything that can be done without an Admin making more. I hope this helped!!!
------------------------------------------------------------------------------
The end, if you feel I missed something, please tell me. I would be more than happy to add it to the thread.
------------------------------------------------------------------------------
Thats the end of my tutorial. Please vote on the poll and comment!
------------------------------------------------------------------------------
