1. The Basics
   
   Spoiler (Click to View)

   In every code, there are two bracket sets. One opening bracket set and a closing one. You need both to have a code that works. The opening bracket will follow this format:
   
   [****]
   
   It has no "slashes". The closing bracket however will look like this:
   
   [/****]
   
   It will have a slash at the front. In many cases, both brackets will contain the same word. The opening bracket causes everything after it to be affected. The closing bracket causes everything before it to be affected. They both work together to preform a formatting task (ie: bolding). WITHOUT ONE, THE CODE IS BROKEN. And your text will NOT be affected by the code. So when posting, keep in mind that they both have to be in the right spots to work!
2. Spoilers
   
   Spoiler (Click to View)

   To make a spoiler, all you have to do is enclose the text in spoiler brackets. Simply see the code below:
   
   

   Code:

   [spoiler] Put your text here [/spoiler]

   
   As you can see, both opening and closing brackets are present. Now, if we repeat the code on a normal post, it will appear like this:
   
   

   Spoiler (Click to View)

   Put your text here

   
   Alternatively (THANK YOU KAI-V), you can now use the new spoiler button!
   
3. Naming Spoilers
   
   Spoiler (Click to View)

   The "Spoiler" text may be a bit boring for some. So you can actually rename the "spoiler" part of the text. For example, you wanted to tell a secret. All you have to do is re-write the spoiler brakcets, but add in an "equal sign" followed by your desired text.
   
   

   Code:

   [spoiler=Secret] Kai-V is awesome [/spoiler]

   
   Instead of:

   Spoiler (Click to View)

   Kai-V is awesome

   it will show as:

   Secret (Click to View)

   Kai-V is awesome
4. Image Links
   
   Spoiler (Click to View)

   If you would like to link an image to a site, all you have to do is highlight the image URL and the code brackets and then click on the little [Image: hyperlinkIcon.gif] icon in the tool bar that should appear when you are posting something. After it prompts you to enter a URL, enter the URL of the site you wish to link your image to. This is of course the more "simple" way to do it. If you learn the code for doing this, it can be quicker (in my opinion).
   
   Say you would like to link this image to the WBO.
   
   [Image: smiley.jpg]
   
   You can do it with the buttons, like explained above. Once again, we have our image URL:
   
   http://www.themelab.com/wp-content/uploads/smiley.jpg
   
   And then we highliight the WHOLE URL AND CODE BRACKETS and click the button. After the prompt, enter the site URL.
   
   http://worldbeyblade.org/
   
   After that is all done, you will have an image link!
   
   [Image: smiley.jpg]
   
   The code can be used instead of that lengthy process. See below:
   
   

   Code:

   [url=worldbeyblade.org][img]http://www.themelab.com/wp-content/uploads/smiley.jpg[/img][/url]

   
   Basically, you have to enclose the [img] brackets between the [url] brackets. But remeber to add in the little "equal sign" and the URL INSIDE the first bracket.
   
5. Quotes
   
   Spoiler (Click to View)

   A quote from the WBO will appear like this:
   
   

   (Jul. 20, 2012  3:45 AM)Hazel Wrote: Somehow, this is even more goofy.

   
   The " pid='995136' " is the green arrow. It will link you to the quote in its respective thread.
   
   The "dateline='1342752347' " is the time and date line in the top right-hand corner of the quote box.
   
   The main part is this:
   

   Code:

   [quote='Hazel']

   It is the opening bracket. It displays the username. The ending bracket for any quote is still:

   Code:

   [/quote]

   
   Basically, when quoting something MAKE SURE TO HAVE BOTH OPENING AND CLOSING BRACKETS ENCLOSING THE SPEAKER'S WORDS.
   
   
   *Do not quote large pieces of text. If you are only going to comment regarding one part of the reply, please delete the other text. It makes it easier to find what you are referring to. But make sure to not delete the ending or opening brackets.
6. Lists
   
   Spoiler (Click to View)

   To make a list, it is fairly simple. Like usual, you have the opening bracket:
   
   

   Code:

   [list]

   
   and then, every "point" in the list will be written underneath that bracket set. Preceded by a "star bracket"
   

   Code:

   [*]

   
   Every "star bracket" is another "bullet" in the list.
   
   Add as many "star bracket" sets as you'd like underneath the opening bracket. At the end of the list, close it off with

   Code:

   [/list]

   
   Example List:
   
   Things to Do:

   • Write this guide
     
   • Post the thread
     
   • Update the guide
     

   
   The code for that simple list:
   
   

   Code:

   [list]
[*]Write this guide
[*]Post the thread
[*]Update the guide
[/list]

   
   As you can see, all my "to-do's" were listed under the

   Code:

   [list]

   bracket but were followed by the

   Code:

   [*]

   brackets. Do not forget to close off your list!
7. Numbered List
   
   Spoiler (Click to View)

   Say I wanted to be more professional and prioritize my list. Or simply add numbers in it. All you have to do is one tiny change in the opening bracket. Add in a little "equal sign" and a "1" in the opening bracket to make everything in the list preceded by a number. The numbers go down in chronological order.
   
   

   1. Write this guide
      
   2. Post the thread
      
   3. Update the guide
      

   Code:
   

   Code:

   [list=1]
[*]Write this guide
[*]Post the thread
[*]Update the guide
[/list]

   
   Again, to make it an alphabetical list, replace the "1" with an "a".
8. Re-sizing Images
   
   Spoiler (Click to View)

   To make sure an image doesn't stretch the page, make sure to make it small enough to fit (or put it in spoiler brackets). To make an image smaller, enter the size in the opening bracket preceded by an "equal sign".
   

   Code:

   [img=20x20]http://www.themelab.com/wp-content/uploads/smiley.jpg[/img]

   From
   [Image: smiley.jpg]
   to
   [Image: smiley.jpg]
9. Using the toolbar
   
   Spoiler (Click to View)

   The simplest way to enhance your text is by making use of the toolbar. It appears during every post you make (except for quick replies).
   
   [Image: bZR6p.png]
   
   Now, briefly, I will explain the functions of each button.

   • Font :Highlight your text and then click on the box. From the drop down menu, choose your desired font.
     [Image: rVcH9.png]
     
     
   • Text Size: Highlight your text and click on the box. From the drop down menu, choose your desired size.
     [Image: NhY6b.png]
     
     
   • Text Color: Highlight your text and click on the icon. It will open up a small box with a variety of colors to choose from.
     [Image: UE4bA.png]
     
     
   • Spoiler Button Higlight your text and click on the spoiler button to make everything "spoiled". This wonderful button was added to make life easier!
     [Image: h6Okk.png]
     
     
   • The Trio:
     Highlight your text and then click on one of the three(or more than one) letter. It will make your text bolded, italicized or underlined. This is probably the most basic function in the whole tool box :\
     [Image: fzzdW.png]
     
     
   • Alignment:
     Highlight your text and then click on one of the options. It will align your text accordingly.
     [Image: 3fDJl.png]
     
     
   • Lists (the "easy" way):
     
     I personally prefer the coded way, but basically all this does is ask you to list items one by one via small prompts.
     [Image: THPhY.png]
     
     
   • Hyperlinks:
     Really simple to use (and usefull). Click on the icon, it will then prompt you to enter a URL. Put in the URL. Then after, it will ask you if you would like to rename the URL. For example, you wanted to link the WBO.
     
     We have the WBO URL:
     http://worldbeyblade.org/
     
     By following the steps, you can have the link to the WBO actually "say" something else. Example:
     
     Click Me!
     
     Simple via buttons. For those hardcore coders though, here is what you have to do:
     
     Code:

     [url=http://worldbeyblade.org/index.php]Click Me![/url]
     Simply change the opening bracket and add in the "equal sign"+URL. And then before the ending bracket, add in your desired text. Simple, but still ... the buttons are useful in this case XD
     [Image: hyperlinkIcon.gif]
     
   • Insert Image:
     Click on the button, and then when prompted, insert the URL of the image you would like to insert.
     Notice: Make sure to have something other than an image in your post. Or else it constitutes as an image macro, which can result in a warning. Also, keep in mind to make sure that the image doesn't stretch the page. If it does, re-size it or put it in spoiler brackets.
     [Image: A2ETY.png]
     
     
   • Email:
     Click on the button. When prompted, insert the desired email adress. You can also optionally rename the email link. Clicking on it will cause a Windows Live email page.
     http://i.imgur.com/dlt94.png
     [Image: xjgzz.png]
     
     
   • Quote Button:
     Highlight the text and it will put in between quote brackets. So it will look like ...
     

     Quote:this

     [Image: yTVdx.png]
     
     
   • Code:
     Hah, ironic name. But anyways, highlighting your text and clicking on this button will cause everything highlighted to NOT become affected by MyCode. Good for telling people how to use MyCode without having your own tutorial affected XD
     [Image: 17CIn.png]
     
     
   • Videos:
     Clicking on the TV button will create a drop-down menu. From there, select your video source and then enter the video URL. It will directly embed the video in the post.
     Notice: Video embedding does not work in your signatures!
     [Image: 61pkg.png]
10. Close Tags:
    
    Spoiler (Click to View)

    If you do not highlight text to be affected by code, there will be a message that appears. It will look like this [Image: SVtEJ.png]
    Basically, it creates an opening tag. Put in text after and close the tags by pressing the format option again and then it will close the tags.
11. Strikeout
    
    Spoiler (Click to View)

    Put your desired text between strikeout brackets and a line will appear through it.
    

    Code:

    [s] Text Here [/s]
12. Getting image URLs
    
    Spoiler (Click to View)

    Since the option for uploading was removed, you must now link images from image hosting sites such as Photobucket, imgur or ImageShack.
    [Image: Dx5YX.png]
    
    
13. Tagging People
    
    Spoiler (Click to View)

    To tag someone in a post, so that they receive a private message informing them that they've been mentioned, use the following simple code:
    
    

    Code:

    @[INSERT USERNAME HERE]

    
    Remember that the tagging feature does not work with only the "@" symbol, like twitter. You must use the square brackets.
    
    NOTE: If constantly being tagged is a nuisance for you, go to your USER CONTROL PANEL and drop down to the "MISCELLANEOUS" section. There you will see a link titled "TAGS". From there, you can change your options.

(Jul. 20, 2012  12:48 PM)Ginga Blader#1 Wrote: Nice guide! I hope it covers some things that the MyCode doesn't.

(Jul. 20, 2012  5:12 PM)gameboysuperman Wrote: nice thread Imsomnia!the only code i knew was hoe to put stuff in spoilers nothing else thanks to your thread its really easy to uderstand the coding stuff... thanks again xD

(Jul. 20, 2012  7:44 PM)Crab Commando Wrote: Well done, Insomniac! Waiting for the next update...

(Jul. 20, 2012  10:44 PM)Sparta Wrote: This guide is really well written! I actually didn't know about the lists, so you taught me something, haha. Hope this helps new members. If there's a way to make sure new members have easy access to this thread, that'd be great (Maybe include a link in the welcome PM?).

(Jul. 20, 2012  11:12 PM)Tech Wrote: Look at you, writin' extensive tutorials and such

(Jul. 20, 2012  11:20 PM)TriSix Wrote: What? awesome? Are you joking?...

(Jul. 22, 2012  3:42 AM)KnightIfraid15 Wrote: LOL, Insomiac gimme code.

(Jul. 20, 2012  12:51 PM)Insomniac Wrote:

(Jul. 20, 2012  12:48 PM)Ginga Blader#1 Wrote: Nice guide! I hope it covers some things that the MyCode doesn't.

Eh, mainly just elaboration. The two main things were the "image linking" and the "custom spoiler text" part.

(Aug. 11, 2012  12:29 PM)麦わらルフィ Wrote: I Never Knew You Could Resize Things Through MyBB Anyway, Great Guide!