Guide to BB Code [forum styling]

[Kaasovic]

Ever wondered how the pros get their threads nice?
Well, here is their secret.

First off start by editing a thread in source mode:

Spoiler

Button on the far right:

How that you are in source mode you can see BB Code, yay. Creating a thread, or editing it, in source mode is easier.

Text Formatting:

Bold text Code: [b]Bold text[/b] Or the B button on the editor bar, or Ctrl-B.

><><

Italics text Code: [i]Italics text[/i] Or the I button on the editor bar, or Ctrl-I.

><><

Underlined text Code: [u]Italics text[/u] Or the U button on the editor bar, or Ctrl-U.

><><

Strikethrough Text Code: [s]Strikethrough Text[/s] Or the S button on the editor bar.

Positioning:

Align left Code: [align=left]Align left[/align]

><><

Align Center Code: [align=center]Align Center[/align]

><><

Align Right Code: [align=right]Align Right[/align]

Text Styling:

Different Fonts: Arial Arial Black Comic Sans Courier New Georgia Impact Sans-serif Serif Times New Roman Trebuchet MS Verdana Code: [font=(fontname)]Text[/font] Replace (fontname) with a font name listed above for example: Code: [font=Arial]Text[/font]

><><

Font Sizes: small text Code: [size=small]small text[/size] Large Text Code: [size=large]Large Text[/size] Note that the words can be replaced by integers for example: Code: [size=3]Very small text[/size]

><><

Font Colours: Green text Code: [color=green]Green text[/color] Red text Code: [color=red]Red text[/color] Words can be replaced by Hexadecimal code For example: Blue text Code: [color=#0000FF]Blue text[/color] You can google the hexadecimal codes of colours. NordInvasion uses the following Hexadecimal colours: #F305FF - Collectibles #000000 - Marketplace #2FC245 - Green craftables #05C9FF - Teal craftables #0D28FF - House craftables #F78900 - Orange Legendaries #FF0011 - Red Legendaries #800080 - Upgraded Legendaries #c04000 - Rare Materials #0D28FF - Crafted Materials #7D4E0C - Dropped Materials

Other Formatting:

Horizontal Rule: Code: [hr]	><><	Images: [img]example.png[/img] Code: [img]example.png[/img] make sure you use a valid link with an extension	><><	Default Hyper Link: nordinvasion.com Code: [url=nordinvasion.com]nordinvasion.com[/url]	><><	Custom Hyper Link: Click Me! Code: [url=nordinvasion.com]Click Me![/url]
Video: [video=youtube][/video] Code: [video=youtube](youtube link)[/video]	><><	Spoiler Spoiler Text Code: [spoiler]Text[/spoiler]	><><	Spoiler with custom name name Text Code: [spoiler=name]Text[/spoiler] Spoiler names cannot contain any BB Code nor does it support some special characters. A list of supported characters will be added soon.

Lists:

Item 1 Item 2 Code: [list] [*] Item 1 [*] Item 2 [/list]

><><

Item 1 Item 2 Code: [list=1] [*] Item 1 [*] Item 2 [/list]

Tables:
There is no button for tables so please read carefully:

A default table will look like this:

Code:

[table][tr][td][/td][/tr][/table]

Please note that a table cannot consists of more table tags (aka. nesting).
tr indicates the start of a table row
/tr indicates the end of the table row
Note that you cannot enter more tr tags while the current row hasn't ended yet
In example

Code:

[table][tr][tr][/tr][/table]

is not a valid table, neither is

Code:

[table][tr][tr][/tr][/tr][/table]

td indicates the start of table data
/td indicates the end of table data
Like tr, td cannot be nested.

How to place stuff next to each other?

Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2

Code:

[table][tr]
[td]Row 1, Cell 1[/td]
[td]Row 1, Cell 2[/td]
[/tr][tr]
[td]Row 2, Cell 1[/td]
[td]Row 2, Cell 2[/td]
[/tr][/table]

How to add spacing?

Row 1, Cell 1	‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌	Row 1, Cell 2
Row 2, Cell 1	‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌	Row 2, Cell 2

Note: You cannot use the white space character to add spacing.
There are ways to circumvent that, use a invisible character for example.
This example contains a bunch:

Code:

[table][tr]
[td]Row 1, Cell 1[/td]
[td]‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ [/td]
[td]Row 1, Cell 2[/td]
[/tr][tr]
[td]Row 2, Cell 1[/td]
[td]‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ [/td]
[td]Row 2, Cell 2[/td]
[/tr][/table]

If you have any questions feel free to ask them on this thread.