BBCode FAQ

General

What is BBCode?
BBCode is a special implementation of HTML. Whether you can actually use BBCode in your posts on the forum is determined by the administrator. In addition, you can disable BBCode on a per post basis by going to User Control Panel > Board Preferences > Edit Posting Defaults > and toggling "Enable BBCode by default". BBCode itself is similar in style to HTML; tags are enclosed in square brackets [ and ] rather than < and > and this offers greater control and uniformity to what and how something is displayed. You may find adding BBCode to your posts is made much easier with buttons that are placed directly above the message box on the posting area.
Top
Can I combine tags?
Yes, of course!

Code: Select all

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

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:

Code:

[b][u]This is wrong[/b][/u]
Top
Can I add my own tags?
If you are an administrator on this board and have the proper permissions, you can add further BBCodes through the Custom BBCodes section. For all remaining member groups, submit a request to have something added.
Top

Text Formatting

Bold
Creates bold text.

Code: Select all

[b]Hello[/b]

Output:

Hello
Top
Italic
Creates italicized text.

Code: Select all

This is [i]great[/i]!

Output:

This is great!
Top
Underline
Creates underlined text.

Code: Select all

[u]Good Morning[/u]

Output:

Good Morning
Top
Strike-through
Decorates text with a line-through.

Code: Select all

I made a [s]missteak[/s] mistake.

Output:

I made a missteak mistake.
Top
Headers
Transforms text to use Khy'eras header styles. Font size, color, and format is altered. Renders numerical values from 1 to 6.

Code: Select all

[header=3]Header 3[/header]

[header=5]Header 5[/header]

Output:

Header 3

Header 5
Top
Text color
To change text color, you can specify either a recognized color name (red, blue, yellow, etc.) or a hexadecimal alternative (#ffffff, #000000, etc.).

Code: Select all

This word is [color=red]red[/color], but this word is [color=#008000]green[/color].

Output:

This word is red, but this word is green.
Top
Speech color
Instead of using [color] with a name or hex code, character speech may be paired with a value listed in this stylesheet. To have your character's speech color created, submit a request. This BBCode is useful because administrators can update a character's speech color across all posts which is not as manageable with [color].

Code: Select all

[speech=Artemis Black]"Sir Francis de Eradrald the XII the Moose is my best friend,"[/speech] Artemis said.

Output:

"Sir Francis de Eradrald the XII the Moose is my best friend," Artemis said.
Top
Text size
This tag is dependent on the site theme the user has set, but the recommended format is a numerical value representing the text size in percent, starting at 20 (very small) through to 200 (very large).

Code: Select all

[size=30]What is this? Font for ants?[/size]

[size=200]This text is way too big.[/size]

Output:

What is this? Font for ants?

This text is way too big.
Top
Text alignment
The alignment of text can be altered by using [text-align] and specifying an appropriate value.

Code: Select all

[text-align=left]This text is left aligned.[/text-align]

[text-align=center]This text is centered.[/text-align]

[text-align=right]This text is right aligned.[/text-align]

[text-align=justify]Longer paragraphs will attempt to align with the left and right edges of the content area. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/text-align]

Output:

This text is left aligned.

This text is centered.

This text is right aligned.

Longer paragraphs will attempt to align with the left and right edges of the content area. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Top
Divider
A divider can be added between paragraphs. Optionally, you may specify and icon value, otherwise, the default icon is a "quill". For a visual of the dividers and the icons you can use, please see the following post.

Code: Select all

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

[divider][/divider]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

[divider icon=crossed-swords][/divider]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Top
First letter
Stylize the first letter of a paragraph.

Code: Select all

[first-letter]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[/first-letter]

Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Top
First line
Stylize the first line of a paragraph.

Code: Select all

[first-line]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/first-line]

Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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 and indents each with a bullet character. To create an unordered list use [list] and define each individual item within the list using [*].

Code: Select all

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

Output:

  • Red
  • Blue
  • Yellow
You may specify the list's bullet style using [list=disc], [list=circle], or [list=square].
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, use [list=1] for numerical lists or [list=a] for alphabetical lists. As with the unordered list, items are specified using [*].

Code: Select all

[list=1][*]Item 1
[*]Item 2
[*]Item 3[/list]

Output:

  1. Item 1
  2. Item 2
  3. Item 3

Code: Select all

[list=A][*]Item 1
[*]Item 2
[*]Item 3[/list]

Output:

  1. Item 1
  2. Item 2
  3. Item 3

Code: Select all

[list=a][*]Item 1
[*]Item 2
[*]Item 3[/list]

Output:

  1. Item 1
  2. Item 2
  3. Item 3

Code: Select all

[list=I][*]Item 1
[*]Item 2
[*]Item 3[/list]

Output:

  1. Item 1
  2. Item 2
  3. Item 3

Code: Select all

[list=i][*]Item 1
[*]Item 2
[*]Item 3[/list]

Output:

  1. Item 1
  2. Item 2
  3. Item 3
Top

Images

Adding an image to a post
phpBB BBCode incorporates a tag for including images in your posts. Three very important things to remember when using this tag are: many users do not appreciate lots of images being shown in posts, the image you display must already be available on the internet (it cannot exist only on your computer unless you run a webserver!), and finally, visibily it should not contain nudity or sexual content. (See rule #6 on posting images.) To display an image you must surround the URL pointing to the image with [img] tag.

Code: Select all

[img]https://placekitten.com/g/300/300[/img]

Output:

Image
Top
Image alignment
Images can further be aligned by using the [img-align] tag and specifying an appropriate value.

Code: Select all

[img-align=left]https://placekitten.com/g/150/150[/img-align]

[img-align=right]https://placekitten.com/g/200/200[/img-align]

[img-align=center]https://placekitten.com/g/250/250[/img-align]

Output:

Image

Image

Image
Top

Other Blocks

Quoting text
There are two ways you can quote text: with a reference or without. When you utilize the Quote function to reply to a post on the board, notice that the post text is added to the message window enclosed in a [quote=""] block. This method allows you to quote with a reference to a person.

Code: Select all

[quote=Memoria]With those details laid out, this RPG is essentially a collaborative writing experience formed in the fictional world of Khy'eras.[/quote]

Output:

Memoria wrote:With those details laid out, this RPG is essentially a collaborative writing experience formed in the fictional world of Khy'eras.
The second method does not add a reference to a person's name. allowing you to blindly quote text.

Code: Select all

[quote]However, if this discussion about roleplaying and story development has made you wary about enrolling, leave your troubles at the door. Khy'eras welcomes folk of varying writing skill levels, those new to the fantasy genre, or those just trying out forum RPGs.[/quote]

Output:

However, if this discussion about roleplaying and story development has made you wary about enrolling, leave your troubles at the door. Khy'eras welcomes folk of varying writing skill levels, those new to the fantasy genre, or those just trying out forum RPGs.
Top
Code blocks
If you want to output a piece of code or anything that requires a fixed width with "Courier New" type font, you should enclose the text in [code] tag.

Code: Select all

[code]<a href="//khyeras.org">Khy'eras</a>[/code]

Output:

<a href="//khyeras.org">Khy'eras</a>
Top
Hidden content
Content that is mature in nature should be wrapped in the [hidden] tag. This can also be utilized as a spoiler tag or when you want users to toggle content open or closed. Any text inside this block will be hidden from non-registered forum users.

Code: Select all

[hidden]Ohhh, naughty text.[/hidden]

Output:

Ohhh, naughty text.
Top
Mention
To notify someone that a post requires their attention we have the [mention] tag. The user will get a notification, so please do not abuse this feature by spamming members.

Code: Select all

[mention]Memoria[/mention] Can you approve this?

Output:

@Memoria Can you approve this?
Top