Contact           Rules           FAQ           RT    



Remember me



BBCode guide
Introduction
What is BBCode?

Text Formatting
How to create bold, italic, strikethrough and underlined text
How to change the text colour or size
Can I combine formatting tags?
Aligning content
Floating content
Hidden text (commenting)

Special Text Containers
Quoting text in replies
Outputting code or fixed width data
Textareas
Scrollboxes
Spoilers

Generating lists
Creating an Unordered list
Creating an Ordered list

Creating Links
Linking to another site
Linking to a user's profile
Linking to a gallery image

Images, Video, and Audio
Adding a gallery image thumbnail
Adding an image to a post
Adding a mouseover image to a post
Adding YouTube Videos to a post
Adding MP3s to a post

Hidden BBCode?!
Are there other bbcodes?

 

Introduction

» What is BBCode?
BBCode is a special implementation of HTML. BBCode itself is similar in style to HTML, tags are enclosed in square brackets [ and ] rather than < and > and it offers greater control over what and how something is displayed. You don't need to be a coding expert to use it, either- there are buttons to explain and add the codes into posts around the forum.

Top


Text Formatting

» How to create bold, italic, strikethrough and underlined text
BBCode includes tags to allow you to quickly change the basic style of your text. This is achieved in the following ways:
  • To make a piece of text bold enclose it in [b][/b], e.g.

    [b]Hello[/b]

    will become Hello
  • For underlining use [u][/u], for example:

    [u]Good Morning[/u]

    becomes Good Morning
  • To italicise text use [i][/i], e.g.

    This is [i]Great![/i]

    would give This is Great!
  • To strikethrough text use [s][/s], e.g.

    This is [s]taking too long![/s]

    would give This is taking too long!

Top

» How to change the text colour or size
To alter the colour or size of your text the following tags can be used. Keep in mind that how the output appears will depend on the viewers browser and system:
  • Changing the colour of text is achieved by wrapping it in [color=][/color]. You can specify either a recognised colour name (eg. red, blue, yellow, etc.) or the hexadecimal triplet alternative, e.g. #FFFFFF, #000000. For example, to create red text you could use:

    [color=red]Hello![/color]

    or

    [color=#FF0000]Hello![/color]

    Both will output Hello!
  • Changing the text size is achieved in a similar way using [size=][/size]. This tag is dependent on the template the user has selected but the recommended format is a numerical value representing the text size in percent, starting at 50 (very small) through to 200 (very large) by default. You can enter other numbers, but any size below 50% will stop your post from going through until it's changed. For example:

    [size=50]SMALL[/size]

    will generally be SMALL

    whereas:

    [size=200]HUGE![/size]

    will be HUGE!

Top

» Can I combine formatting tags?
Yes you can, for example to get someone's attention you may write:

[size=200][color=red][b]LOOK AT ME![/b][/color][/size]

this would output LOOK AT ME!

We don’t recommend you output lots of text that looks like this though! Remember it is up to you, the poster, to ensure tags are closed correctly. For example the following is incorrect:

[b][u]This is wrong[/b][/u]

Top

» Aligning content
You can align your content to the right, left, or to the center of the posting page or textbox using the following code.

[align=direction]TEXT[/align]

Direction must be left, center, or right.

Top

» Floating content
You can force some of your content to 'float' above everything else in the post, making text and other objects wrap around the edges of the content. You will have to decide if the floating content is aligned to the left, right, or center much like the standard align text as well.

[float=direction]TEXT[/float]

Top

» Hidden text (commenting)
If you've made a giant, complex web of bbcode for something like your user profile, you might find you want to leave yourself notes to remind yourself where certain sections start and end. Using ruinz BBCode, you can!

[note]You can't see this text outside of the post editor![/note]

Top


Special Text Containers

» Quoting text in replies
There are two ways you can quote text, with a reference or without.
  • When you utilise the Quote function to reply to a post on the board you should notice that the post text is added to the message window enclosed in a [quote=""][/quote] block. This method allows you to quote with a reference to a person or whatever else you choose to put! For example to quote a piece of text Mr. Blobby wrote you would enter:

    [quote="Mr. Blobby"]The text Mr. Blobby wrote would go here[/quote]

    The resulting output will automatically add "Mr. Blobby wrote:" before the actual text. Remember you must include the quotation marks "" around the name you are quoting, they are not optional.
  • The second method allows you to blindly quote something. To utilise this enclose the text in [quote][/quote] tags. When you view the message it will simply show the text within a quotation block.

Top

» Outputting code or fixed width data
If you want to output a piece of code or in fact anything that requires a fixed width, e.g. Courier type font you should enclose the text in [code][/code] tags, e.g.

[code]echo "This is some code";[/code]

All formatting used within [code][/code] tags is retained when you later view it. PHP syntax highlighting can be enabled using [code=php][/code] and is recommended when posting PHP code samples as it improves readability.

Top

» Textareas
You can create textboxes in Ruinz BBCode to organize your information, using the textarea tags. For example, writing

[textarea]This is my textbox![/textarea]

This is my textbox!


However, you can also make a textbox a specific width or height. To do this, you change the code to textarea1=width/height, something like

[textarea1=50/100]This is my tiny textbox![/textarea1]

This is my tiny textbox!

Top

» Scrollboxes
You can also create scrolling textboxes, much like the normal boxes but which will not cut off when there's too much content. If you don't specify a size, your box will be 300px tall. Please note that you need enough content to spill over the edge of the box before the scrollbarr will appear.

[scroll]-insert text here-[/scroll]

Text

Text1

Text2

Text3

Text4

Text5

Text6

Text7

Text8

Text9

Text10



Or a smaller one, [scroll1=300/100]-insert text here-[/scroll]

Text

Text1

Text2

Text3

Text4

Text5

Text6

Text7

Text8

Text9

Text10

Top

» Spoilers
If you either want to hide a portion of your text for story spoilers, or just to keep a post -looking- short, you can put a section of your post under a spoiler button. Use a code like the one below.

[spoiler]This text is hidden![/spoiler]

This text is hidden!

Top


Generating lists

» Creating an Unordered list
BBCode supports two types of lists, unordered and ordered. They are essentially the same as their HTML equivalents. An unordered list outputs each item in your list sequentially one after the other indenting each with a bullet character. To create an unordered list you use [list][/list] and define each item within the list using [*]. For example to list your favourite colours you could use:

[list]
[*]Red
[*]Blue
[*]Yellow
[/list]

This would generate the following list:
  • Red
  • Blue
  • Yellow

Top

» Creating an Ordered list
The second type of list, an ordered list, gives you control over what is output before each item. To create an ordered list you use [list=1][/list] to create a numbered list or alternatively [list=a][/list] for an alphabetical list. As with the unordered list, items are specified using [*]. For example:

[list=1]
[*]Go to the shops
[*]Buy a new computer
[*]Swear at computer when it crashes
[/list]

will generate the following:
  1. Go to the shops
  2. Buy a new computer
  3. Swear at computer when it crashes
Whereas for an alphabetical list you would use:

[list=a]
[*]The first possible answer
[*]The second possible answer
[*]The third possible answer
[/list]

giving
  1. The first possible answer
  2. The second possible answer
  3. The third possible answer

Top


Creating Links

» Linking to another site
phpBB BBCode supports a number of ways of creating URIs (Uniform Resource Indicators) better known as URLs.
  • The first of these uses the [url=][/url] tag, whatever you type after the = sign will cause the contents of that tag to act as a URL. For example to link to phpBB.com you could use:

    [url=http://www.phpbb.com/]Visit phpBB![/url]

    This would generate the following link, Visit phpBB! Please notice that the link opens in the same window or a new window depending on the users browser preferences.
  • If you want the URL itself displayed as the link you can do this by simply using:

    [url]http://www.phpbb.com/[/url]

    This would generate the following link, http://www.phpbb.com/
  • Additionally, phpBB features something called Magic Links, this will turn any syntactically correct URL into a link without you needing to specify any tags or even the leading http://. For example typing www.phpbb.com into your message will automatically lead to www.phpbb.com being output when you view the message.
  • The same thing applies equally to e-mail addresses, you can either specify an address explicitly for example:

    [email]no.one@domain.adr[/email]

    which will output no.one@domain.adr or you can just type no.one@domain.adr into your message and it will be automatically converted when you view.
As with all the BBCode tags you can wrap URLs around any of the other tags such as [img][/img] (see next entry), [b][/b], etc. As with the formatting tags it is up to you to ensure the correct open and close order is following, for example:

[url=http://www.google.com/][img]http://www.google.com/intl/en_ALL/images/logo.gif[/url][/img]

is not correct which may lead to your post being deleted so take care.

Top

» Linking to a user's profile
You can easily link to someone's profile without looking up the URL. Using the following code, you can link someone's username to their profile- note that the link will be broken if their username is changed.

[profile]username[/profile]

Top

» Linking to a gallery image
You can link to a gallery image using the following code in the same way as the normal linking code. The image's number is found on the image display page.

[album=number]Text[/album]

Top


Images, Video, and Audio

» Adding a gallery image thumbnail
Add a thumbnail link to a gallery image using the following code. You can also copy it from the image's page in the gallery, next to the description.

[album]imagenumber[/album]

Top

» Adding an image to a post
BBCode incorporates a tag for including images in your posts. Two very important things to remember when using this tag are: many users do not appreciate lots of images being shown in posts and secondly the image you display must already be available on the internet (it cannot exist only on your computer for example, unless you run a webserver!). To display an image you must surround the URL pointing to the image with [img][/img] tags. For example:

[img]http://www.google.com/intl/en_ALL/images/logo.gif[/img]

As noted in the URL section above you can wrap an image in a [url][/url] tag if you wish, e.g.

[url=http://www.google.com/][img]http://www.google.com/intl/en_ALL/images/logo.gif[/img][/url]

would generate:

Top

» Adding a mouseover image to a post
Ruinz BBCode incorporates a tag for including mouseover images in your posts as well. The URLS used in the mouseover image, like the normal image, must be internet available. Mouseover images should also be used sparingly, because they slow the load times for a page much like normal images do. To create a mouseover image, use the code below:

[moimg=http://www.google.com/intl/en_ALL/images/logo.gif]http://www.google.com/logos/delafuente10-hp.gif[/moing]

Looks like:

Top

» Adding YouTube Videos to a post
You can stream YouTube in your topics. Ruinz Online doesn't support uploading any media, but you can stream videos which are legally uploaded on YouTube using this simple code.

[youtube]http://www.youtube.com/v/DGB4VDQI6XM[/youtube]

Top

» Adding MP3s to a post
You can stream MP3s in your topics. Ruinz Online doesn't support uploading any media, but you can stream songs which are legally uploaded elsewhere (like SoundCloud) using a simple code.

[mp3]http://soundcloud.com/nmopal/jumping-through-stars/download[/mp3]

Top


Hidden BBCode?!

» Are there other bbcodes?
There are other bbcodes available for Ruinz Online- but they're a secret! You'll have to figure those out on your own, but they unlock a whole new level of post-coding fun.

Top



Jump to: