[Guide] BBCode Library

[Discovery Freelancer Tutorials]

BBCode Repository

Good day everyone, this thread will serve as a list of bbcodes that can be used on the forum. If a thread like this exists, I've never seen it, which would at least imply that it is out of date. If you have a bbcode that I've missed, please post below and I'll edit it in. Please note, this is not a tutorial on how to write good forum posts or anything as @Corile already did a pretty good job of that. ~Laz

Also Kudos @Lythrilux for the idea.
So let us begin.

Fonts

When it comes to fonts, there are many different options you can use. Corile covered this in is guide quite well so I'll skip over this mostly. There are a number of different font options you can use. There is also a nifty little feature called fallback fonts which means if the person doesn't use the main font, you can specify a font for it to default to.

Example: Some Text
Fallback Font Example: Some Text
If you do not have the "Yellowtail" font it will default to Consolas.

Code:

Syntax:  [font=Consolas]some text [/font]
Fallback Font Syntax: [font=Yellowtail, Consolas]some text[/font]

Color

This one is rather simple. Depending on the hex code you give it the text enclosed will take on a certain colour.

Example: I am red.
I am blue.
I am green.

Code:

Syntax: [color=#FF0000]I am red.[/color]
[color=#0000FF]I am blue.[/color]
[color=#00FF00]I am green.[/color]

Size

Another simple one, this value will change the size of the text enclosed. There are two ways you can do this. You can give a numerical size value or a word size value. The words scale as follows:

xx-small
x-small
small
medium
large
x-large
xx-large

1
3
7
9
12
14
18

The numbers can be done with any positive value. You can use whatever sizes you want, but they cap at 1pt and 50pt.

Code:

Syntax:
[size=xx-small]xx-small[/size]
[size=x-small]x-small[/size]
[size=small]small[/size]
[size=medium]medium[/size]
[size=large]large[/size]
[size=x-large]x-large[/size]
[size=xx-large]xx-large[/size]

[size=1]1[/size]
[size=3]3[/size]
[size=7]7[/size]
[size=9]9[/size]
[size=12]12[/size]
[size=14]14[/size]
[size=18]18[/size]

Align

Align will shift the text in a particular direction depending on what is provided. Rather simple.
Example:

Some Text

Some Text

Some Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor tincidunt odio, interdum fringilla mauris ullamcorper sit amet. Nunc lacinia mauris vel ullamcorper commodo. Fusce vitae tempor lorem. Cras in tellus pretium, eleifend velit sed, egestas nibh. Vivamus quis nibh mauris. Curabitur aliquam urna ac cursus porta.

You may notice that [align=justify] works a bit differently. Simply put, it makes the ends of lines always align.

Code:

Syntax:
[align=left]Some Text[/align]
[align=center]Some Text[/align]
[align=right]Some Text[/align]

[align=justify]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor tincidunt odio, interdum fringilla mauris ullamcorper sit amet. Nunc lacinia mauris vel ullamcorper commodo. Fusce vitae tempor lorem. Cras in tellus pretium, eleifend velit sed, egestas nibh. Vivamus quis nibh mauris. Curabitur aliquam urna ac cursus porta.[/align]

Float

Float tags are used to arrange images and text so that you can write text along images without everything looking off. Float tags can be done with either Left or Right.

Example Left:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor tincidunt odio, interdum fringilla mauris ullamcorper sit amet. Nunc lacinia mauris vel ullamcorper commodo. Fusce vitae tempor lorem. Cras in tellus pretium, eleifend velit sed, egestas nibh. Vivamus quis nibh mauris. Curabitur aliquam urna ac cursus porta. Duis a eros fringilla, ullamcorper nisi sed, bibendum nisi. Nullam ac rutrum risus. Nulla ac erat turpis. Suspendisse suscipit auctor congue. In eros odio, lacinia vitae placerat rhoncus, porttitor vitae enim. Aenean placerat tincidunt ante, eget ullamcorper dolor vulputate sit amet.

Integer feugiat vitae mauris non vehicula. Integer libero odio, mollis in porta ac, dictum sed nisl. Curabitur felis ipsum, elementum id tincidunt sit amet, ornare ut odio. Maecenas nec hendrerit lectus. Nullam dapibus fringilla ultricies.

Example Right:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor tincidunt odio, interdum fringilla mauris ullamcorper sit amet. Nunc lacinia mauris vel ullamcorper commodo. Fusce vitae tempor lorem. Cras in tellus pretium, eleifend velit sed, egestas nibh. Vivamus quis nibh mauris. Curabitur aliquam urna ac cursus porta. Duis a eros fringilla, ullamcorper nisi sed, bibendum nisi. Nullam ac rutrum risus. Nulla ac erat turpis. Suspendisse suscipit auctor congue. In eros odio, lacinia vitae placerat rhoncus, porttitor vitae enim. Aenean placerat tincidunt ante, eget ullamcorper dolor vulputate sit amet.

Integer feugiat vitae mauris non vehicula. Integer libero odio, mollis in porta ac, dictum sed nisl. Curabitur felis ipsum, elementum id tincidunt sit amet, ornare ut odio. Maecenas nec hendrerit lectus. Nullam dapibus fringilla ultricies.

Code:

Syntax Left:

[float=left][img]http://i0.kym-cdn.com/photos/images/original/001/218/908/247.gif[/img][/float]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor tincidunt odio, interdum fringilla mauris ullamcorper sit amet. Nunc lacinia mauris vel ullamcorper commodo. Fusce vitae tempor lorem. Cras in tellus pretium, eleifend velit sed, egestas nibh. Vivamus quis nibh mauris. Curabitur aliquam urna ac cursus porta. Duis a eros fringilla, ullamcorper nisi sed, bibendum nisi. Nullam ac rutrum risus. Nulla ac erat turpis. Suspendisse suscipit auctor congue. In eros odio, lacinia vitae placerat rhoncus, porttitor vitae enim. Aenean placerat tincidunt ante, eget ullamcorper dolor vulputate sit amet.

Integer feugiat vitae mauris non vehicula. Integer libero odio, mollis in porta ac, dictum sed nisl. Curabitur felis ipsum, elementum id tincidunt sit amet, ornare ut odio. Maecenas nec hendrerit lectus. Nullam dapibus fringilla ultricies.

Syntax Right:

[float=right][img]http://i0.kym-cdn.com/photos/images/original/001/218/908/247.gif[/img][/float]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor tincidunt odio, interdum fringilla mauris ullamcorper sit amet. Nunc lacinia mauris vel ullamcorper commodo. Fusce vitae tempor lorem. Cras in tellus pretium, eleifend velit sed, egestas nibh. Vivamus quis nibh mauris. Curabitur aliquam urna ac cursus porta. Duis a eros fringilla, ullamcorper nisi sed, bibendum nisi. Nullam ac rutrum risus. Nulla ac erat turpis. Suspendisse suscipit auctor congue. In eros odio, lacinia vitae placerat rhoncus, porttitor vitae enim. Aenean placerat tincidunt ante, eget ullamcorper dolor vulputate sit amet.

Integer feugiat vitae mauris non vehicula. Integer libero odio, mollis in porta ac, dictum sed nisl. Curabitur felis ipsum, elementum id tincidunt sit amet, ornare ut odio. Maecenas nec hendrerit lectus. Nullam dapibus fringilla ultricies.

Pi and Indent

Pi and indent tags are almost vital to create any good looking faction write up and they really do make a huge difference. In essence, their role is rather simple. They will shift/indent the text a certain amount. Pi stands for percentage indent. With Pi you can use a range of different values, but you really should never be using anything above 20. I normally go for 12 or 14, but that is just personal preference.

Indent Example:

One Indent

TwoIndents

You can do as many indents as you want, but any more than two tends to look messy.

(has a bit of an issue with the spoiler brackets - click on examples for how it looks)

12 Pi Example:
14 Pi Example:
20 Pi Example:

Code:

Syntax:
[indent]sometext[/indent]
[indent][indent]sometext[/indent][/indent]
[indent][indent][indent]Sometext[/indent][/indent][/indent] etc...


[pi amount=12] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor tincidunt odio, interdum fringilla mauris ullamcorper sit amet. Nunc lacinia mauris vel ullamcorper commodo. Fusce vitae tempor lorem. Cras in tellus pretium, eleifend velit sed, egestas nibh.[/pi]

[pi amount=14] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor tincidunt odio, interdum fringilla mauris ullamcorper sit amet. Nunc lacinia mauris vel ullamcorper commodo. Fusce vitae tempor lorem. Cras in tellus pretium, eleifend velit sed, egestas nibh.[/pi]

[pi amount=20] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor tincidunt odio, interdum fringilla mauris ullamcorper sit amet. Nunc lacinia mauris vel ullamcorper commodo. Fusce vitae tempor lorem. Cras in tellus pretium, eleifend velit sed, egestas nibh.[/pi]

HR and HRC

HR stands for horizontal rule, and HRC stands horizontal rule color. These tags are used as separators and dividers and make a page a lot easier to read, but very ugly if overused and abused. HRC accepts any hexcode as colour input. The HR/HRC are compatible with float and indent tags and will shift accordingly, preventing any ugly askew lines.

hr example:

---

hrc example:

---

---

---

Code:

HR Syntax: [hr]

HRC Syntax:
[hrc]#FF0000[/hrc]
[hrc]#00FF00[/hrc]
[hrc]#0000FF[/hrc]

Images

With image tags, there are a number of different approaches now. The simplest form exists with just the [img][/img] tag. There are three variations. These are [imgw][/imgw], [sigimg][/sigimg], and [img=WxH][/img].

imgw will automatically resize your image to comply with rule 2.1 and make sure the width is not greater than 700px.
sigimg will automatically resize your image to comply with rule 2.2 and make sure the width is not greater than 700px while the height is not greater than 250px.
The last one img=wxh is custom dimensions you can set yourself for an image. w being the width and h being the height.

Examples:

img - This image is 800*300.


img=wxh - This image is normally 800*300.


sigimg - This image is normally 800*300.


imgw - This image is normally 800*300.

Code:

Syntax:

img - This image is 800*300.
[img]https://upload.wikimedia.org/wikipedia/commons/2/29/Dscn7471_sunset-sundog_crop_800x300.jpg[/img]

img=wxh - This image is normally 800*300.
[img=400x150]https://upload.wikimedia.org/wikipedia/commons/2/29/Dscn7471_sunset-sundog_crop_800x300.jpg[/img]

sigimg - This image is normally 800*300.
[sigimg]https://upload.wikimedia.org/wikipedia/commons/2/29/Dscn7471_sunset-sundog_crop_800x300.jpg[/sigimg]

imgw - This image is normally 800*300.
[imgw]https://upload.wikimedia.org/wikipedia/commons/2/29/Dscn7471_sunset-sundog_crop_800x300.jpg[/imgw]

URL

Another extreamly simple one. This tag allows you to embed URLS in text like I did at the top.

Example: This is an amazing joke.

Code:

Syntax

[url=https://www.youtube.com/watch?v=dQw4w9WgXcQ]This is an amazing joke.[/url]

Bold - Italic - Underline - Strikethrough

Ok, this one is the most simple. You have four tags, making one for each.

Example:
Bold
Italic
Underline
Strikethrough
All of the above.

Code:

Syntax:
[b]Bold[/b]
[i]Italic[/i]
[u]Underline[/u]
[s]Strikethrough[/s]
[b][i][u][s]All of the above.[/s][/u][/i][/b]

Video

The video tag is almost exclusively used for youtube videos, but it can be used for other videos from some less mainstream hosts. (Click on the video icon to see others)

For a youtube video:

Code:

Syntax:

[video=youtube]https://www.youtube.com/watch?v=dQw4w9WgXcQ[/video]

PHP

Does anyone even use this? Probally not but gonna list it anyway.

PHP Code:

<!DOCTYPE html>
<html>
<body>

<?php 
$x = 75;
$y = 25; 

function addition() {
    $GLOBALS['z'] = $GLOBALS['x'] + $GLOBALS['y'];
}

addition();
echo $z;
?>

</body>
</html> 


Code:

[php]<!DOCTYPE html>
<html>
<body>

<?php
$x = 75;
$y = 25;

function addition() {
    $GLOBALS['z'] = $GLOBALS['x'] + $GLOBALS['y'];
}

addition();
echo $z;
?>

</body>
</html>[/php]

Rep

Rep bars are a new addition to the forum, created by @Corile and integrated by @Alex. There are little bars used to indicate reputation between factions. Compared to the others the syntax is slightly harder to understand, but once you stare at it for a little bit you'll get it. Image provided by @Alex.

You have to provide 4 colour values (in the form of hexcodes) along with two values that are between 0 and a 100 (always ad 1 onto the first value). If you do not want to use four different colours you can substitute a hexcode for the word transparent, which adds no colour.

Examples:





You can do a lot with this, but it's important to make sure things flow, you don't want them to look like number 3.

Code:

Syntax:

[rep=01,50]#f00,#0f0,#00f,#fff[/rep]
[rep=01,100]#f00,#fff,#fff,#0f0[/rep]
[rep=01,100]#FF8000,#FFCC00,#AA66FC,#6560FC[/rep]
[rep=51,100]#fff,transparent,transparent,#0f0[/rep]

Quotes

Quotes are used when you hit the quote button attached to the footer of every post. Quotes have two main formats: Ones that link to the post in questions, those that do not.

Example of a linking quote:

The main reason for starting this website is an attempt to reunite the former IlluminatingDarkness community. We are intended to create nice and friendly forums where people will be able to discuss freely both gaming-related and non-gaming topics.

Example of a non-linking quote:

I am just taking the chance to finger you

context

Code:

Syntax:
[quote="Igiss" pid=8]
The main reason for starting this website is an attempt to reunite the former IlluminatingDarkness community. We are intended to create nice and friendly forums where people will be able to discuss freely both gaming-related and non-gaming topics.[/quote]

[quote=Spazzy the Dragon]I am just taking the chance to finger you[/quote]

Spoilers

There are two main types of spoiler. The nested spoiler, that I've been using here for each type of code, and the blur spoiler.

Nested Spoiler:

SomeText

SomeText

Blur Spoiler:
SomeBluryText

Code:

Syntax:
[spoiler=SomeText]SomeText[/spoiler]
[sp2]SomeBluryText[/sp2]

Anchors

Anchors are used to jump to parts of a post without refreshing the page or by linking to post numbers, like one would normally do. You sue anchors with the [anchor] tag and the [a][a] tags. Unlike the other bbcodes, you do not close of the anchor tag but rather add = and 5 random characters. See Syntax for proper usage.

Examples: I attached an anchor to the top of the page that this one will jump to.
Click me

Code:

Syntax:

Setting an Anchor:
[anchor=Anch1]

Referring to that Anchor:
[a=anch1]Click me[/a]

Tables

Tables are simple yet also a pain to work with. There are three things to use when doing a table. These are table, tr, and td. Table starts and ends the table, while tr is a table row and td is a table division. (Column)

This one is best described with an example.

Title 1	Title 2	Title 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor tincidunt odio, interdum fringilla mauris ullamcorper sit amet. Nunc lacinia mauris vel ullamcorper commodo. Fusce vitae tempor lorem. Cras in tellus pretium, eleifend velit sed, egestas nibh.	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor tincidunt odio, interdum fringilla mauris ullamcorper sit amet. Nunc lacinia mauris vel ullamcorper commodo. Fusce vitae tempor lorem. Cras in tellus pretium, eleifend velit sed, egestas nibh.	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor tincidunt odio, interdum fringilla mauris ullamcorper sit amet. Nunc lacinia mauris vel ullamcorper commodo. Fusce vitae tempor lorem. Cras in tellus pretium, eleifend velit sed, egestas nibh.

Code:

[table][tr][td]Title 1[/td][td]Title 2[/td][td]Title 3[/td][/tr][tr][td]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor tincidunt odio, interdum fringilla mauris ullamcorper sit amet. Nunc lacinia mauris vel ullamcorper commodo. Fusce vitae tempor lorem. Cras in tellus pretium, eleifend velit sed, egestas nibh.[/td][td]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor tincidunt odio, interdum fringilla mauris ullamcorper sit amet. Nunc lacinia mauris vel ullamcorper commodo. Fusce vitae tempor lorem. Cras in tellus pretium, eleifend velit sed, egestas nibh.[/td][td]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor tincidunt odio, interdum fringilla mauris ullamcorper sit amet. Nunc lacinia mauris vel ullamcorper commodo. Fusce vitae tempor lorem. Cras in tellus pretium, eleifend velit sed, egestas nibh.[/td][/tr][/table]

Lists

List tags are used to generate a list of items that are either ordered via number, letter or just bullet pointed. Very simple.

Normal List Example:

• List Item #1
  
• List Item #2
  
• List Item #3
  

Letter List Example:

1. List Item #A
   
2. List Item #B
   
3. List Item #C
   

Numbered List Example:

1. List Item #1
   
2. List Item #2
   
3. List Item #3
   

Code:

Normal List Syntax:
[list]
[*]List Item #1
[*]List Item #2
[*]List Item #3
[/list]

Letter List Syntax:
[list=a]
[*]List Item #A
[*]List Item #B
[*]List Item #C
[/list]

Numbered List Syntax:
[list=1]
[*]List Item #1
[*]List Item #2
[*]List Item #3
[/list]

Email

Rarely used, but still a thing. Email Tags! My embedding text inside of these tags you can hotlink emails.

Examples:

ARandomEmail@Discoverygc.com

A link to said email.

E-mail with a subject!

Code:

Syntax:

[email]ARandomEmail@Discoverygc.com[/email]

[email=ARandomEmail@Discoverygc.com]A link to said email.[/email]

[email=ARandomEmail@Discoverygc.com?subject=I have too much free time]E-mail with a subject![/email]

P3D

This allows you to embed p3d models within threads. Simple. This is actually the only forum I've managed to find with this function, which makes me think Alley programmed it herself.

Example:

Link to p3d.in

Code:

Syntax:
[p3d]gm8rv[/p3d]
[p3d](link to model without website part)[/p3d]

Code Blocks

The things I've used in every single example are code blocks done with code tags. All they do is cause the words inside to ignore any bbcode present among them.

Code:

Syntax: [code][/code]