Author Topic: A Beginner's Guide To BBcode  (Read 1898 times)

Offline liamnight

  • Electropede
  • *****
  • Posts: 23,438
  • Karma: +773/-0
  • Have a question? PM me!
    • View Profile
A Beginner's Guide To BBcode
« on: July 31, 2012, 05:12 pm »
The Beginner's Guide To BBcode

Are you new to BBcode? This is the right thread, even though there is a bar in each comment box that help you with BBcode, there is much more you need to know.

There are a couple of rules that you should know first before you apply BBcode in this forums:

  • Do not spam BBcode, this can apply to common sense and it's obvious this won't be tolerated
  • Do not add too much BBcode in signatues, it can become too distracting
  • Test BBcode in discussion that are your own and in the Private Messages category.

Sicnce the old forums used Html, and you are used to Html, it might be quite easier to learn BBcode than a user with no experience with Html. BBcode and Html is different but yet similar, for example, bolding:

Html: < b > bold text < /b >
BBC:  [ b ] bold text [ /b ]
Outcome: bold text
*When code is used, the spaces are taken away

Another example, for images:

Html: < img=image link >< /img >
BBC:  [ img ] image link [ /img ]
Outcome:
*When code is used, the spaces are taken away



Bold, Italics, Underlines, Strike-throughs

Bold, Italics, Underlines, and Strike-throughs are the first things you should learn about. They are the easiest.

Bolding, Italicing, and Underlining:

In the text box, the button on the help-bar will appear with the capital letter "B". When you click on it, the code [ b ][ /b ] will come out. Bolded text will appear fatter in width than a normal piece of text. The button for Italic will appear as a capital sideways "I" next to the bold and underlining button. When click on, the code [ i ][ /i ] will come out. Italic text will appear more of a sideways look than normal text. Underlined text can be brought in by clicking the button with letter of capital "U" with an underlin, where if clicked on the text [ u ][ /u ] will come out. Underlined words is self-excalamatory, it will appear underlined. Bolding, Italics, Underlines could be used for:

  • Showing important words or pointing out important subjects or sentences
  • Creating Subtitles or Titles
  • Anything else to make text look different from the other common text.

Example:

Spam will not be tolerated with no exceptions. Spamming will result in disciplinary action and that isn't fun.

Strike-throughs:

Strike-throughs could be brought in by clicking the button "S" with a line through it on the bar above every text box. The button will appear next to the underline button. When clicked on, the code [ s ][ /s ] will come out. When a strike-through is applied to text, the text will a line across the middle. Strike-throughs could be used for:

  • Identifying removed text
  • Showing that the text is not needed anymore
  • Showing something that is completed on a to-do list (not referring to Geoff's To-Do list)

Example:

My list of bug fixes on "Epic Game Olympics":
  • Fix collision issue
  • Fix hazards not being hazardous
  • Background disappearing



Alignments

In BBcode, there are 4 types of alignments you can do with the code: Preformatted Text, Left Align, Center Align, and Right Align

The buttons for all 4 alignments can be found next to the strikethrough and the font face button. Left, right, and center is obvious. Left alignment keeps the text on the left side, the center keeps the text on the center, and the right keeps the text on the right. Alignments could be used for:

  • Decoration of text
  • (For pre-formatted text) Organizing text

These are what the left alignments, right alignments, and center alignments look like:

Code:
[ left ] Left [ /left ]
[ center ] Cener [ /center ]
[ right ] Right [ /right ]


Outcome:
Left
Center
Right

Pre-formatted text will keep all the spacing. Without it, if you double space, the double space will be deleted and will be a single space. If the pre-formatted text is inserted in, there will be the double space. The text uses the [ pre ] [ /pre ] tags.

For example:

Text:

          Fire and water are natural enemies.                Water will burn out fire.


Code:

[ pre ]
          Fire and water are natural enemies.                Water will burn out fire.
[ /pre ]

Outcome, with the code:

          Fire and water are natural enemies.                Water will burn out fire.


Outcome, wihtout the code:

          Fire and water are natural enemies.                Water will burn out fire.



Superscript, Subscript, and Teletype

Superscript and Subscript

The buttons for superscript and subscript can be found below the 'font face' button. If you take a letter and cut it in half, there are two sides, the top side and the bottom side. If you make the text go superscript, the text will only cover the top half side. If the text goes Subscript, the text will take the bottom half.

For example:

Code:
[ sup ]Up[ /sup ][ sub ]Down[ /sub ][ sup ]Up[ /sup ][ sub ]Down[ /sub ][ sup ]Up[ /sup ][ sub ]Down[ /sub ]

Outcome:
UpDownUpDownUpDown

Teletype:

The teletype feature is useful for short code snips, not worth a separate code tag. The simple code is [ tt ][ / tt] with text between it.

For example:

Code:
[ tt ] Teletype [ /tt ] not teletype

Outcome:
Teletype not teletype





Inserting Images

Inserting images is a bit tricky, so listen closely on how to do it. Remember, do not add freakishly large images just for fun, it counts as BBcode abuse.

Image Links

Be sure the image link you put is correct. An example is:

www.fakewebsite.com/images/09/blabla/omg.png

You see, the link is valid because at the end, there is an extension with a .png . A .png file is an image file. Other image files are .jpeg, .jpg, .gif, .tif, and .raw. Extensions that are not an image code will not appear. Links ending with .swf, .html, .php, or .htm will definately not appear.
 
Regular Image Code

The regular image code is [ img ] Image link [ /img ]. For example, let's take this image. We would put it as [ img ] http://www.bbcode.org/images/lubeck_small.jpg  [ /img ]. The outcome will come out as:




Making the Image Clickable

The code to mke the image clickable has the following code: [ url=url link ][ img ]img link[ /img ][ /url ]

Example:

Code:

[ url=http://www.bbcode.org/images/lubeck.jpg ][ img ]http://www.bbcode.org/images/lubeck_small.jpg[ /img ][ /url ]

Outcome:



For the example above, it was made it so that if clicked on, it would go to the image source.



Inserting Flash, Hyperlinks, Emails, and FTP links

Inserting Flash

The flash code allows simple games or programs to be embedded onto the site. The code is [ flash =width,height][ /flash ] To use the code, insert the flash link (such as a .swf file) between it and insert the desired width and height. This is useful to embed Sploder games.

Hyperlinks

A hyperlink is a piece of text that if clicked on, it would bring you to a page. In this forums, hyperlinks are viewed as orange. There are 3 ways you can make a hyperlink.

1) Just the link

By inserting just the link in a text box, the forum will automaticly create a hyperlink for you. Here is an example, an link without any code that brings you to the sploder mainsite:

www.sploder.com

2) Simple code

You can insert hyperlinks alternatively by using simple BBcode. The code for using BBcode to provide a hyperlink is:

 
Code: [Select]
[url] URL LINK [/url]
Try it out. Replace "URL LINK" with the web page link you want the hyperlink to link to.

3) Desired Text

The 3rd way to make a hyperlink is by going a bit farther than number 2. Doing number 3 will give an option on the text that comes out. The code is:

Code: [Select]
[url=url link] URL TEXT [/url]
Replace "URL LINK" with the link you want the hyperlink to link to, then replace "URL TEXT" on what you want the text to come out as. For example:

Code: [Select]
[url=sploder.com] Link To Sploder [/url]
Would come out as:

Link To Sploder

Inserting email and FTP links

These 2 codes are probably one of the uncommonly used codes but I'll show you. The email code, which links to an email uses this code:

Code: [Select]
[email] EMAIL [/email]
Replace "EMAIL" with the actual email you want it to link to. When used and clicked on, Microsoft Outlook will pop up and let you send an email to the email you clicked on.

Ftp links should be only used if you are only linking to an FTP site. Though, it works almost the way as a regular hyperlink. The difference is that hyperlinks will go to links that start with http://. FTP links will go to sites that start with ftp://. The code for the FTP link is:

Code: [Select]
[ftp] FTP LINK [/ftp]
Most likely the Ftp link code will be the most un-used code.



Lists

Lists come out with 2 styles. Unordered lists and ordered lists. Unordered lists will list without numbers, with shapes if I'm correct. Ordered lists will list with numbers.

Unordered Lists

Unordered lists can be writen in 2 ways. The regular way, or the shortcut way. The regular way uses the following code:

Code: [Select]
[list]
[li]LIST ITEM[/li]
[li]LIST ITEM[/li]
[/list]

Replace "LIST ITEM" with the desired text you want to be in the list. The shortcut way has the following code:

Code: [Select]
[list]
[*]LIST ITEM
[*]LIST ITEM
[/list]

So, if the code was written like:

Code: [Select]
[list]
[li]Lemons[/li]
[li]Peanuts[/li]
[/list]

[list]
[*]Shortcut
[*]Shortcut 2
[/list]

Then, it would come out was:

  • Lemons
  • Peanuts

  • Shortcut
  • Shortcut 2

<--------- Still working on Guide ---------->
« Last Edit: August 02, 2012, 01:18 am by liamnight »


Accomplishments:
  - Set up the Informer
  - Set up a Gameshow (Trials)
  - Create and upload an addon at the previous forums (warnings)

Promotions:

  Sr: December 2011
  Lt: August 20th 2012
  Gn: Feb 16th 2013
 

Offline liamnight

  • Electropede
  • *****
  • Posts: 23,438
  • Karma: +773/-0
  • Have a question? PM me!
    • View Profile
Re: A Beginner's Guide To BBcode
« Reply #1 on: July 31, 2012, 09:49 pm »
Reserved


Accomplishments:
  - Set up the Informer
  - Set up a Gameshow (Trials)
  - Create and upload an addon at the previous forums (warnings)

Promotions:

  Sr: December 2011
  Lt: August 20th 2012
  Gn: Feb 16th 2013
 

Offline cmdbxx

  • Launcher
  • ***
  • Posts: 1,608
  • Karma: +207/-0
  • Sit down, relax. You're welcome.
    • View Profile
    • donforumz
Re: A Beginner's Guide To BBcode
« Reply #2 on: August 01, 2012, 10:03 am »
BBcode is like html, right?
╔╗╔═╦╗
║╚╣║║╚╗
╚═╩═╩═╝
 

Offline EpicBlastGaming

  • Disruptor
  • ****
  • Posts: 7,050
  • Karma: +19/-0
  • That's what she said.
    • View Profile
Re: A Beginner's Guide To BBcode
« Reply #3 on: August 01, 2012, 12:39 pm »
You should lock this so no spam comes in.
I'm back!
 

Offline liamnight

  • Electropede
  • *****
  • Posts: 23,438
  • Karma: +773/-0
  • Have a question? PM me!
    • View Profile
Re: A Beginner's Guide To BBcode
« Reply #4 on: August 01, 2012, 03:41 pm »


Accomplishments:
  - Set up the Informer
  - Set up a Gameshow (Trials)
  - Create and upload an addon at the previous forums (warnings)

Promotions:

  Sr: December 2011
  Lt: August 20th 2012
  Gn: Feb 16th 2013
 

Offline liamnight

  • Electropede
  • *****
  • Posts: 23,438
  • Karma: +773/-0
  • Have a question? PM me!
    • View Profile
Re: A Beginner's Guide To BBcode
« Reply #5 on: August 01, 2012, 03:42 pm »
You should lock this so no spam comes in.

There isn't any reason to close/lock this thread since this thread is open for any questions regarding BBcode. Unless spam starts to come in, and then yes I'll lock it.


Accomplishments:
  - Set up the Informer
  - Set up a Gameshow (Trials)
  - Create and upload an addon at the previous forums (warnings)

Promotions:

  Sr: December 2011
  Lt: August 20th 2012
  Gn: Feb 16th 2013
 

Offline AlexJT1

  • Turret
  • Posts: 25
  • Karma: +0/-0
    • View Profile
Re: A Beginner's Guide To BBcode
« Reply #6 on: August 01, 2012, 04:22 pm »
It really wasn't useful, I hated it !
Thanks for the help, I really needed it ! ;D
Peace and Love gives Life

 

Offline liamnight

  • Electropede
  • *****
  • Posts: 23,438
  • Karma: +773/-0
  • Have a question? PM me!
    • View Profile
Re: A Beginner's Guide To BBcode
« Reply #7 on: August 01, 2012, 04:28 pm »
It really wasn't useful, I hated it !
Thanks for the help, I really needed it ! ;D

I'm still working on the guide... but your welcome!  :D


Accomplishments:
  - Set up the Informer
  - Set up a Gameshow (Trials)
  - Create and upload an addon at the previous forums (warnings)

Promotions:

  Sr: December 2011
  Lt: August 20th 2012
  Gn: Feb 16th 2013
 

Offline moolatycoon

  • The Golden King
  • Bugmeister
  • ******
  • Posts: 25,812
  • Karma: +882/-0
  • Self Esteem Points: 95
    • View Profile
Re: A Beginner's Guide To BBcode
« Reply #8 on: August 01, 2012, 06:02 pm »
Just need to know how to do hyperlinks, lol.
 

Offline liamnight

  • Electropede
  • *****
  • Posts: 23,438
  • Karma: +773/-0
  • Have a question? PM me!
    • View Profile
Re: A Beginner's Guide To BBcode
« Reply #9 on: August 01, 2012, 06:51 pm »
Just need to know how to do hyperlinks, lol.

I'll be able to finish the hyperlink section today.


Accomplishments:
  - Set up the Informer
  - Set up a Gameshow (Trials)
  - Create and upload an addon at the previous forums (warnings)

Promotions:

  Sr: December 2011
  Lt: August 20th 2012
  Gn: Feb 16th 2013
 

Offline liamnight

  • Electropede
  • *****
  • Posts: 23,438
  • Karma: +773/-0
  • Have a question? PM me!
    • View Profile
Re: A Beginner's Guide To BBcode
« Reply #10 on: August 02, 2012, 01:10 am »
Updated the guide.


Accomplishments:
  - Set up the Informer
  - Set up a Gameshow (Trials)
  - Create and upload an addon at the previous forums (warnings)

Promotions:

  Sr: December 2011
  Lt: August 20th 2012
  Gn: Feb 16th 2013
 

Offline AlexJT1

  • Turret
  • Posts: 25
  • Karma: +0/-0
    • View Profile
Re: A Beginner's Guide To BBcode
« Reply #11 on: August 02, 2012, 05:18 am »
Isn't the hyperlink code something like this: [ url="http://www.sploder.com/" ]Your text here[ /url ] ?

Example:
Sploder main site
Peace and Love gives Life

 

Offline AlexJT1

  • Turret
  • Posts: 25
  • Karma: +0/-0
    • View Profile
Re: A Beginner's Guide To BBcode
« Reply #12 on: August 02, 2012, 05:26 am »
Teletype is a funny type of writing !
Peace and Love gives Life

 

Offline AlexJT1

  • Turret
  • Posts: 25
  • Karma: +0/-0
    • View Profile
Re: A Beginner's Guide To BBcode
« Reply #13 on: August 02, 2012, 05:33 am »
Quote
I think I found out how to make a quote !

If my messages are bothering you, you can delete them.
Peace and Love gives Life

 

Offline liamnight

  • Electropede
  • *****
  • Posts: 23,438
  • Karma: +773/-0
  • Have a question? PM me!
    • View Profile
Re: A Beginner's Guide To BBcode
« Reply #14 on: August 02, 2012, 10:35 am »
Isn't the hyperlink code something like this: [ url="http://www.sploder.com/" ]Your text here[ /url ] ?

Example:
Sploder main site

Yeah, that's a hyperlink code.


Accomplishments:
  - Set up the Informer
  - Set up a Gameshow (Trials)
  - Create and upload an addon at the previous forums (warnings)

Promotions:

  Sr: December 2011
  Lt: August 20th 2012
  Gn: Feb 16th 2013
 

Offline segasilver99

  • Mortar
  • ***
  • Posts: 2,789
  • Karma: +47/-0
  • I'm EthGamma. Mindflippin' ftw.
    • View Profile
Re: A Beginner's Guide To BBcode
« Reply #15 on: August 03, 2012, 05:46 am »
mp3 file maybe?
LEFT
CENTRE
RIGHT
CENTRE
LEFT
CENTRE
RIGHT
CENTRE
LEFT
CENTRE
RIGHT
 

Offline liamnight

  • Electropede
  • *****
  • Posts: 23,438
  • Karma: +773/-0
  • Have a question? PM me!
    • View Profile
Re: A Beginner's Guide To BBcode
« Reply #16 on: August 09, 2012, 12:38 pm »
I shall update this when I have the time.


Accomplishments:
  - Set up the Informer
  - Set up a Gameshow (Trials)
  - Create and upload an addon at the previous forums (warnings)

Promotions:

  Sr: December 2011
  Lt: August 20th 2012
  Gn: Feb 16th 2013
 

Offline Rubber Ducky

  • Disruptor
  • ****
  • Posts: 9,337
  • Karma: +896/-0
  • Boredgame's & Woodchuck's cupcake. & BFB's
    • View Profile
Re: A Beginner's Guide To BBcode
« Reply #17 on: August 09, 2012, 01:07 pm »
Thanks Liam, I needed this. :D
 

Offline AlexJT1

  • Turret
  • Posts: 25
  • Karma: +0/-0
    • View Profile
Re: A Beginner's Guide To BBcode
« Reply #18 on: August 09, 2012, 09:13 pm »
This is the best tutorial of BBcode I've seen.
Peace and Love gives Life

 

Offline Sree

  • Mortar
  • ***
  • Posts: 2,394
  • Karma: +186/-0
  • The Adventure begins as the Adventure Reveals.
    • View Profile
    • My Blog
Re: A Beginner's Guide To BBcode
« Reply #19 on: August 10, 2012, 03:02 am »
This is the best tutorial of BBcode I've seen.
Huh? I don't think so
11 Bronze
1 Luna Stone
2 Silver

 

Offline liamnight

  • Electropede
  • *****
  • Posts: 23,438
  • Karma: +773/-0
  • Have a question? PM me!
    • View Profile
Re: A Beginner's Guide To BBcode
« Reply #20 on: August 10, 2012, 01:57 pm »
Bump.


Accomplishments:
  - Set up the Informer
  - Set up a Gameshow (Trials)
  - Create and upload an addon at the previous forums (warnings)

Promotions:

  Sr: December 2011
  Lt: August 20th 2012
  Gn: Feb 16th 2013
 

Offline Tbremise

  • ~The Artisan~
  • Disruptor
  • ****
  • Posts: 6,236
  • Karma: +738/-0
  • Sit down, Relax, You're Welcome
    • View Profile
    • soundcloud
Re: A Beginner's Guide To BBcode
« Reply #21 on: August 14, 2012, 06:54 pm »
The info for the image was helpful, thanks!
Features: 4 (Newest one) LOZ Search for the Sword
Check out all my songs and more to come here: http://www.youtube.com/user/ToBeMissed?feature=mhee
=D
 

Offline liamnight

  • Electropede
  • *****
  • Posts: 23,438
  • Karma: +773/-0
  • Have a question? PM me!
    • View Profile
Re: A Beginner's Guide To BBcode
« Reply #22 on: August 14, 2012, 10:29 pm »
The info for the image was helpful, thanks!

Your welcome!


Accomplishments:
  - Set up the Informer
  - Set up a Gameshow (Trials)
  - Create and upload an addon at the previous forums (warnings)

Promotions:

  Sr: December 2011
  Lt: August 20th 2012
  Gn: Feb 16th 2013
 

Offline anoang

  • Speeder
  • Posts: 163
  • Karma: +23/-0
  • Drowning- ~~~~lol~~~~
    • View Profile
Re: A Beginner's Guide To BBcode
« Reply #23 on: August 25, 2012, 08:29 am »
I have a question.  What if you're trying to post an image that you have on your computer that hasn't been uploaded to anything yet.
If U and I were in the alphabet...actually they are so this pick up line is neither clever nor funny.
 

Offline liamnight

  • Electropede
  • *****
  • Posts: 23,438
  • Karma: +773/-0
  • Have a question? PM me!
    • View Profile
Re: A Beginner's Guide To BBcode
« Reply #24 on: August 25, 2012, 12:29 pm »
I have a question.  What if you're trying to post an image that you have on your computer that hasn't been uploaded to anything yet.

Then it wouldn't work.


Accomplishments:
  - Set up the Informer
  - Set up a Gameshow (Trials)
  - Create and upload an addon at the previous forums (warnings)

Promotions:

  Sr: December 2011
  Lt: August 20th 2012
  Gn: Feb 16th 2013
 

Offline Tbremise

  • ~The Artisan~
  • Disruptor
  • ****
  • Posts: 6,236
  • Karma: +738/-0
  • Sit down, Relax, You're Welcome
    • View Profile
    • soundcloud
Re: A Beginner's Guide To BBcode
« Reply #25 on: August 25, 2012, 02:02 pm »
I have a question.  What if you're trying to post an image that you have on your computer that hasn't been uploaded to anything yet.
There are many sites that allow you to upload your image with only making an account... but you have to be careful which one you use.
Features: 4 (Newest one) LOZ Search for the Sword
Check out all my songs and more to come here: http://www.youtube.com/user/ToBeMissed?feature=mhee
=D
 

Offline anoang

  • Speeder
  • Posts: 163
  • Karma: +23/-0
  • Drowning- ~~~~lol~~~~
    • View Profile
Re: A Beginner's Guide To BBcode
« Reply #26 on: August 25, 2012, 03:18 pm »
Thank you for the advice. Do you have any suggestions for the website that I should go to?
If U and I were in the alphabet...actually they are so this pick up line is neither clever nor funny.
 

Offline Tbremise

  • ~The Artisan~
  • Disruptor
  • ****
  • Posts: 6,236
  • Karma: +738/-0
  • Sit down, Relax, You're Welcome
    • View Profile
    • soundcloud
Re: A Beginner's Guide To BBcode
« Reply #27 on: August 25, 2012, 08:06 pm »
I don't know if people would suggest this, but I use imgur.com, a site for free where anyone can upload there images off the computer onto the internet...you only need to make an account. That is what I use anyways. :)
Features: 4 (Newest one) LOZ Search for the Sword
Check out all my songs and more to come here: http://www.youtube.com/user/ToBeMissed?feature=mhee
=D
 

Offline Neutralization

  • Disruptor
  • ****
  • Posts: 7,633
  • Karma: +3/-0
  • Inactive. Got a grip of better games.
    • View Profile
    • FrozenViili Studios
Re: A Beginner's Guide To BBcode
« Reply #28 on: August 26, 2012, 03:47 pm »
You forgot this and also
Code: [Select]
int typingCode() {
 printf("The code tags in BBCode are quite practical, too.");
 return 0;
}
.

Mainsite: | Forums: Send a PM to me!
 

Offline Halo

  • Mortar
  • ***
  • Posts: 3,210
  • Karma: +195/-0
  • Australia here. =)
    • View Profile
    • storums
Re: A Beginner's Guide To BBcode
« Reply #29 on: August 28, 2012, 06:38 am »
[ b ] Test. [ /b ]

[ img ] http://www.sploder.com/friends/avatars/a/u/australia_96.png [ /img ]

I want to test this BBCode. Sorry, I'm horrible at this stuff.