BB Forum Code Guide [Revised]

Please note, this guide is not fully finished, but will have the main codes done. It will also include various sites for things such as colors, fonts, and image hosting sites.

If you do not wish to type the code out, simply push the tag button at the top of the posting reply box and it will post the tags for you and all you need to do is the rest.

So let us begin!


Index:
  • Font Color
  • Font Size
  • Bold/Italics/Underlining
  • Centering / Moving Right / Moving Left Text
  • Links/URLS
  • Images
  • Lists
  • Code Box



Font Color

Font Color Is fun to use and lets you see things in a different color when posting and helps give a more creative feel to the post. It is also a good way to point something out. There are a couple of ways to do this.

The easiest way to do it with bb code is the following example; using the color's name.

Example:
[noparse][color=red]Text[/color][/noparse]
Result:
Text

The other way is using the color codes instead of color names. So if you know the code of a certain color, instead of inserting the color name, you put the color code with #before it.

So It would look like this:

Example:
[noparse][color=#FF0000]Text[/color][/noparse]
Result:
Text

If a color or code is not recognized the forum will usually automatically change your text to the default color of the forums.

Looking for colors? Check here or here.




Font Size

To change your font you simply put the number of the size.

Example:
[noparse][size=170]Text[/size][/noparse]
Result:
Text



Bold/Italics/Underlining

This is fairly simple. To do this Just put the first letter of whatever you want to your text in the code.

Example:
[noparse]Bold = [b]Text[/b] 
Italic= [i]Text[/i]
Underline= [u]Text[/u][/noparse]
Result:
Example Example Example

You can also use more then one code at once, such as:

Example:
[noparse] [b][u][i]Text[/b][/u][/i][/noparse]
Text




Centering/Right/Left

This is very easy. Just put the word of what you want to do to the text in the brackets with the text between the start and end code.

Example:
[noparse][right]Text[/right] [center]Text[/center] [left]Text[/left] [/noparse]
Results:
Text
Text
Text



Links and URLS

Simply putting a url will make it turn into the link, but you can do more with links.

Example:
[noparse][url]http://www.google.com[/url][/noparse]
Result:
http://www.google.com

Now another way so you can make a link, but make the text whatever you want, and the clicking the words bring you to the link you had put in the bb code.

Example:
[noparse][url=http://www.google.com]GOOGLE[/url] [/noparse]
Result:
GOOGLE




Normal and Click-able Images

This is a big one on many forums, people love posting images, as long as they are clean and appropriate.

So it'd look like this:

Example:
[noparse][img]http://www.google.com/intl/en_ALL/images/srpr/logo1w.png[/img][/noparse]
Result:
logo1w.png

If you are looking for some free image hosting sites, check sites such as: Tinypic, ImageShack, or even Photobucket


Now to combine the link with the picture you do the second way of linking that you learned in the section above.

Example:
[noparse][url=http://www.google.com][img]http://www.google.com/intl/en_ALL/images/srpr/logo1w.png[/img][/url][/noparse]
Result:
logo1w.png


The above image is click-able. If you want the link directly to an image, right click it and choose "Copy Image URL".




Lists

The list code does exactly what it's name suggests, puts a list of items in bulleted list.

Example:
[noparse]
[list]
[*]Item One
[*]Item Two
[*]Item Three
[/list]
[/noparse]
Result:
  • Item One
  • Item Two
  • Item Three



The Code Box

You probably noticed throughout this guide I was able to put the codes without them activating. This is because they were using another bb code which I'll add later called noparse. However they were also in a code box. Now, on some forums when codes are typed in a code box they do not activate, meaning you can show someone how to use a certain code without having to add a character, such as a space, and then having to tell them to take it out when they use it. As that just confused the new learner more than is needed. A code box is a good wake to put a really long bit of information or something else without making the thread excessively long forcing people to scroll down if it is not important.

Example:
[noparse][code]Text
[/noparse][/code]Result:
Text

Comments

  • Very nice I like.
  • Xm8Lover1Xm8Lover1 Apprentice
    mkfy[/img][/img]

    www.wwe.com
  • ARE YOU KIDDING?

    You can have all the BB tricks without learning the code

    Go to (User CP > Edit Options > scroll down to "Message Editor Interface" > change to "Enhanced Interface - Full WYSIWYG editing").
  • MrShadMrShad Royal Heir
    lol, or u can just go into options and put a different text box on with those options xD
    but anyways, this will help ppl, u should sticky it
  • Why don't Z8 enable the editor for all members without having to enable it themselves? Kind of odd:/
  • [MOD]Rex[MOD]Rex Veteran Elite
    BB code is still useful to learn :p you won't always get everything handed to ya. ;)
  • MrShadMrShad Royal Heir
    why dont u guys get hsi stickied -.-
  • [MOD]Rex wrote: »
    BB code is still useful to learn :p you won't always get everything handed to ya. ;)

    Lol learned most of this from wiki but very nice
  • very nice dude o.o
    gz and ty for this ;)
  • When I take over the world, I'll keep you alive.

    That way my death threats to random celebrities will look nice and presentable.
  • GwarrGwarr Apprentice
    Sticky please!
  • Hey guys, this link can be helpful, :D
    There's alot of color code, I always use this site when I need
    COLOR :D
  • good job dude...i was always wondering how to do that on a forum...sticky?
  • [Andre][Andre] Royal Heir
    That and more are all here: http://forum.z8games.com/misc.php?do=bbcode
    For ages.
  • lol .
  • reapzzzzzzzreapzzzzzzz Knight-Errant
    Mr_ABySs wrote: »
    ARE YOU KIDDING?

    You can have all the BB tricks without learning the code

    Go to (User CP > Edit Options > scroll down to "Message Editor Interface" > change to "Enhanced Interface - Full WYSIWYG editing").
    Ty for this info :)
    I didnt know how to dirtect text to a url link, thanks for the help^.^


    ______________
    slight.jpg
  • JPGWJPGW Squire
    I hope to hell that this works :P
  • Wowzor wrote: »
    9a663r.jpg

    wow google red dragon XD
  • I'm testing it out :)
  • [
    Nice guide.
  • very nice guide bro

    most ppl dunno this so it's very useful


    I still hope someday we'll be able to use html here =P
  • HezziHezzi Margrave
    Bob testing..
  • HezziHezzi Margrave
    Hello
    msg two short
  • HezziHezzi Margrave
    [Bob is awesome?][/b]

    msg2shrt...
  • [MOD]Rex wrote: »
    Hey Guy's, This Thread will teach you the BB code to put up images and change text color, etc and show you how they work.

    Index:

    1)Font Color
    2)Bold/Italics/Underlining
    3)Links/URLS
    4)Images
    5)Indenting
    6)Highlighting
    7)Font Size
    8)Font Type
    9)Centering Text/Putting It Right/Left
    10)Lists


    1)First, Changing Font Color

    Font Color Is fun to use and lets you see things in a different color when posting the just the boring default, there is a couple of ways to do this.

    The easiest way is to use the coding With this you put the color name where it says insertcolornamehere and what you want to say in between the two inside brackets ] and [

    CODE: [noparse] Text [/noparse]
    Result: Text

    The other way is using the color codes instead of color names. So if you know the code of a certain color, instead of inserting the color name, you put the color code with #before it.

    So It would look like this:

    Code: [noparse] Text[/noparse]
    Result: Text


    2)The next thing is Bold/Italics/Underlining.

    This is fairly simple. To do this Just put the first letter of whatever you want to your text in the code.
    [noparse]Bold would be=
    Italic=
    Underline= [/noparse]

    Examples: Example Example Example

    You can also use more then one code at once, such as:

    Look: [noparse] Example[/noparse]
    Example


    3)Links/URLS:

    Simply putting a url will make it turn into the link, but you can do more with links.

    Code:[noparse]LINK[/noparse]
    Result: www.google.com

    Now another way so you can make a link, but make the text whatever you want, and the clicking the words bring you there.

    Code: [noparse]TEXT [/noparse]
    Result: GOOGLE


    4)Images:

    This is a big one on these forums, people love posting images, as long as their clean and appropriate.

    So it'd look like this: [img][/img]

    Example: [noparse]IMAGELINK[/noparse]
    Result: logo1w.png


    Now to combine the link with the picture you do the second way of linking.

    So it goes like:
    [noparse]insertimagelinkhere[/noparse]

    Result:
    logo1w.png


    ^That Image Is Clickable


    5)To Indent:
    [noparse]
    texthere
    [/noparse]

    Example:

    Example

    (Forums Don't always indent)


    6)To Highlight:
    [noparse][higtlight]Texthere[/highlight][/noparse]

    Example:
    [highlight]Example[/highlight]


    7)Font Size:

    To change your font you simply put the number of the size.

    [size=OptionSize]texthere[/size]

    Or to double:
    [noparse][size=+2]texthere[/size][/noparse]

    Result:text
    Result:[size=+2]text[/size]


    8)Font Type:
    Simply choose the font type you want with font=option in the brackets.
    [noparse]texthere[/noparse]

    Result: text


    9)Centering/Right/Left:
    This is easy just put the word of what you want to do to the text in the brackets.

    With The Text in between the coding.


    Example: [noparse]
    text
    text]/center]
    text
    [/noparse]
    text
    text
    text


    10)Lists:
    The list code using a couple different things.
    You start off with the main code.
    [noparse]
      Then for each bullet you put
    • With your Text after it.
    • text
      then end it with
    [/noparse]

    Result:
    • Text1
    • Text2


    Credit: Rex
    Hope this helps anyone that might not have known it yet!

    [size=+5]T[/size][size=+5]H[/size][size=+5]A[/size][size=+5]N[/size][size=+5]K[/size][size=+5]S,[/size] it really helped.
  • Testing it lol
Sign In or Register to comment.