BBCode

Dec 7, 2021 5:51 pm

Gamers' Plane uses a common and lightweight markup language called BBCode to format text. As well as allowing you to format text, the BBCode on Gamers' Plane has some tags specifically designed to help with your PbP games.

Tags that are mainly used by GMs are marked with a

symbol, although players might find them useful too.

Table of contents

Formatting
Bold, Italic, Underline, Strikethrough, linebreak, Color, Links

Formatting blocks
OOC (out of character), Spoilers (collapsible sections), Quote

Private notes
Notes, Private

Images and media
Images, Uploading images, YouTube

Tables
Tables, Table formatting

Maps
Map, Zoommap

NPCs
NPC

Character sheets
Columns, Abilities, Snippets, Roll tables, NPC lists, Snippet, Custom character sheet logo

Polls
Post polls

Advanced formatting
Size, Email addresses, @mentions, Code, CSS

Adam

Dec 7, 2021 5:51 pm

Formatting

Bold

BBCode: [b]Bold text[/b]

Result: Bold text
Shortcut key: Ctrl+B

OOC:

Convention: It's a common convention on Gamers' Plane to use bold text for speech.

Italic

BBCode: [i]Italic text[/i]

Result: Italic text
Shortcut key: Ctrl+I

OOC:

Convention: It's a common convention on Gamers' Plane to use italic text for thought.

Underline

BBCode: [u]Underlined text[/u]

Result: Underlined text
Shortcut ket: Ctrl+U

Strikethrough

BBCode: [s]Strikethrough[/s]

Result: Strikethrough

linebreak

BBCode: [linebreak]

Result: ^ a horizontal rule across the page

Color

BBCode: [color="red"]red text[/color]

Result: red text

Red, blue and green are on the menu, but there are many other colours to choose from. If you're familiar with using hex values as colours then you can use those too.

BBCode: [color="#cc6600"]Gamers' Plane orange[/color]

Result: Gamers' Plane orange

Links

BBCode simple: [url]http://gamersplane.com[/url]

Result: http://gamersplane.com

If you put the link's URL in an attribute then you can change the link text.

BBCode changing the link text: [url=http://gamersplane.com]Gamers' Plane[/url]

Result changing the link text: Gamers' Plane

Adam

Dec 7, 2021 5:53 pm

Formatting blocks

OOC (out of character)

BBCode:
[ooc]This is a block of out of character text.

Used in a game post for messages between the players and GM.[/ooc]

Result:

OOC:

This is a block of out of character text.

It's often used in a game post for messages between the players and GM, rather than "in character" narrative.

Spoilers (collapsible sections)

BBCode: [spoiler]This is a block of text that can span multiple lines.

It is then collapsed into an expandable section.[/spoiler]

Result:

[ +- ] Spoiler

Changing the title from "Spoiler"

BBCode: [spoiler="The section's title"]Spoilers can be given a title too.[/spoiler]

Result:

[ +- ] The section's title

Quote

 BBCode: [quote="Adam"]Madam, I'm Adam.[/quote]

Result:

Adam says:

Madam, I'm Adam.

Although there's a toolbar button for quoting, quote BBCode is more often created by selecting the word "quote" under an exiting post.

Adam

Dec 7, 2021 5:53 pm

Private notes

Notes

BBCode: [note="Adam"]Only Adam can read this.[/note]

Result:

Adam sent a note to Adam

Notes are used to send private messages between users. Comma separate the usernames of people who can see the note in quotes and then put the body of the message inside the tag.

In game posts, use the menu to select the usernames of who will see the note, then select 'Add note' - the BBCode will then be added and you can fill in the body of the note.

[ +- ] 📺 Video tutorial

Private

BBCode: [private="Adam"]There appears to be something by the apple tree.[/private]

Result (If you're Adam): There appears to be something by the apple tree.
Result (If you're not Adam):

The private tag functions like the note tag, but there's no indication to the recipient that it's a private section and users not included don't see anything. This means that it has quite a different use as it doesn't tip off the users that anything special or secret is happening.

Private sections can be created for game posts using the menu in the same way as notes.

Adam

Dec 7, 2021 5:54 pm

Images and media

Images

BBCode: [img]https://gamersplane.com/images/bodyComponents/logo.png[/img]

Result:

If your image is already hosted on the internet then using the toolbar menu will prompt for the URL and add the necessary tags.

Uploading images

If your image is not already on the internet, perhaps you've saved it to your computer or device, then using the "Upload to Imgur..." option will upload your image and add the img tags for the BBCode.

You don't need an Imgur account for this to work. Simply select your image and the system will handle the rest.

If your image is on your clipboard then you can simply paste it into your post. The image will be automatically uploaded to Imgur and the tags added. Be aware that the format of the image on your clipboard depends on your device or computer. Try not to paste large images from your clipboard as this doesn't give you any control over the file format - it works well for small images though.

YouTube

Click the "share" link on a YouTube video and put it in a youtube tag to embed videos in your post.

BBCode: [youtube]https://youtu.be/1AO-2lEXc4E[/youtube]

Result:

OOC:

Some people use videos for ambient music to play whilst reading the post.

One gotcha. If you want to start from a point in time, the YouTube link will have a "?t=" parameter at the end - you'll need to change that to a "?start=" parameter because YouTube uses a different parameter name for embedded videos.

Adam

Dec 7, 2021 5:55 pm

Tables

Tables

BBCode: 
[table]
R1C1 | R1C2 | R1C3
R2C1 | R2C2 | R2C3
R3C1 | R3C2 | R3C3
[/table]

Result:

R1C1	R1C2	R1C3
R2C1	R2C2	R2C3
R3C1	R3C2	R3C3

Tables organise content into grids. Each line is a new row and columns are separated with a | character.

[ +- ] 📺 Video tutorial

Table formatting
Tables can be formatted by adding attributes to the opening tag.

This is an example of a table used for stats. It has a heading and the columns are right aligned.

BBCode: 
[table="stats"]
Heading 1 | Heading 2 | Heading 3
R1C1 | R1C2 | R1C3
R2C1 | R2C2 | R2C3
R3C1 | R3C2 | R3C3
[/table]

Result:

Heading 1	Heading 2	Heading 3
R1C1	R1C2	R1C3
R2C1	R2C2	R2C3
R3C1	R3C2	R3C3

Here are the table formatting options:

Opening tag	Effect
`[table="stats"]`	The first row becomes the heading and the cell contents are right aligned.
`[table="center"]`	Centres the text horizontally in the cell. "center" and "centre" are both supported.
`[table="ht"]`	(heading top) - Makes the first row a heading.
`[table="hl"]`	(heading left). Makes the first column a heading.
`[table="htl"]`	(heading top and left). Makes the first column and row a heading.
`[table="grid"]`	(coming soon). Adds grid lines to a table.
`[table="zebra"]`	(coming soon). Adds shaded horizontal stripes to the table.
`[table="center grid zebra"]`	(coming soon). Multiple effects can be added by separating the options with spaces.

Rolls Tables

There's a special type of table for dice rolls. See the Character Sheets BBCode section for more information.

Adam

Dec 7, 2021 5:56 pm

Maps

Map

[map]
https://otfbm.io/26x14/@c60/b5:10x6
--Tokens
/f7-Alice
/h8-Bob
--Background image
?bg=https://i.imgur.com/jIpAjkT.jpg
[/map]

Result:

The map tag is a special img tag with the following changes to allow for simpler formatting:
* separate lines are joined together
* lines beginning with -- ignored
* clicking the image opens it in a new tab

The main purpose is to support OtFBM (On the Fly Battle Maps). OtFBM has many options and features, which are best described by the OtFBM documentation.

[ +- ] 📺 Video tutorial

Zoommap

...coming soon...?

Adam

Dec 7, 2021 5:56 pm

NPCs

NPC

BBCode: [npc="Trev the Tap"]https://i.imgur.com/s6xRmWR.jpg[/npc] Lorem ipsum dolor sit...

Result:

If you post and put an npc tag in the post containing the title and avatar then it renders that post as if you'd created that character.

[ +- ] 📺 Video tutorial

If you also selected post as, or there are multiple NPCs then it renders the NPCs within the post.

The tag works for players too so it might be useful for familiars, hirelings, or other guest posters.

With the npc tag, where do the npc avatars go? In the post or on the side (as the avatar)? It depends on how many npc tags are in the post and whether you've posted as a character - here's a table with the outcomes.

	Post as Player	Post as character
0 NPC tags	User's avatar	Character's avatar
1 NPC tag	NPC's avatar. No NPC in the post.	Character's avatar. NPC in the post.
2+ NPC tags	User's avatar. NPCs in the post.	Character's avatar. NPCs in the post.

NPC lists

There's also an npcs tag for managing lists of NPCs. See the Character Sheets BBCode section for more information.

Adam

Dec 7, 2021 5:59 pm

Character sheets

These BBCode tags are for use on character sheets rather than posts.

Columns

BBCode: 
[2column]
[col]
This is in column 1
[/col]
[col]
This is in column 2
[/col]
[/2column]

Result:

Columns tags are used to organise the content of your character sheets into columns. 2column and 3column tags are available, with the col tags containing the content of each column.

Abilities

BBCode:

[abilities="Abilities"]
# Example heading 1
Example ability 1 description
Supports multiline and BBCode
# Example heading 2
Example ability 2 description
[/abilities]

Result:

Character sheet integration:

The abilities tag is used to organise your character's abilities, talents, spells, and any other lists of features. The quoted attribute is the name of the abilities section. Each heading starts with a # and the following text will then be rolled up into a dropdown.

Abilities are available from your integrated character sheet during a game. Selecting an ability will add the ability's text to your post inside a collapsible spoiler.

[ +- ] 📺 Video tutorial

Snippets
BBCode:

[snippets="Maps"]
# Tavern
[map]
https://otfbm.io/26x14/@c60/b5:10x6
--Tokens
/f7-Alice
/h8-Bob
?bg=https://i.imgur.com/jIpAjkT.jpg
[/map]

# Fighting pit
[map]
https://otfbm.io/26x14/@dc60
/m7l-Ogre~gnstt
?bg=https://i.imgur.com/WgZSt8g.jpg
[/map]
[/snippets]

Result:

Character sheet integration:

Functionally, snippets work in a very similar way to abilities but when they are used they don't include the spoiler tag. Their main use is for GMs to prepare box text and other material for use in their game. The snippets can then be selected from a GM custom character sheet and the BBCode inserted into their post.

Roll tables

BBCode: 
[table="rolls"]
Weapon | To hit | Damage
Longsword (1h) | 1d20+5 | 1d8+3
Longsword (2h) | 1d20+5 | 1d10+3
[/table]

Result:

Weapon	To hit	Damage
Longsword (1h)	1d20+5	1d8+3
Longsword (2h)	1d20+5	1d10+3

Character sheet integration:

The rolls table is formatted like a ht table (table with a heading at the top), but the main use is that any dice rolls integrate with your character sheet and the dice roller.

NPC lists

BBCode:
[npcs="Undead"]
Ghast | https://i.imgur.com/vvoamvX.jpg
Zombie | https://i.imgur.com/yJU4pFf.jpg
Ghoul | https://i.imgur.com/T4ek2Bk.jpg
[/npcs]

Result:

Character sheet integration:

The quoted attribute of the npcs tag allows a GM to group their NPC.

Each line of the npcs tag corresponds to an npc. The format is the name of the npc, followed by a |, then the URL of the npc's avatar.

Snippet

BBCode: 
[snippet="Catchphrase"][b]"Hello, my name is Inigo Montoya. 
You killed my father. Prepare to die."[/b][/snippet]

Result:

[ +- ] Catchphrase

Character sheet integration:

A snippet appears like a spoiler on the character sheet, but it integrates with the game posts to allow a player or GM to select and add a snippet of BBCode. If you plan to have lots of these then the snippets tag (above) might be preferable.

Custom character sheet logo

BBCode:
[style]
{"logo":"https://s3.amazonaws.com/pmgr-stg/projects/3722/project-logo.png"}
[/style]

Result:

This is used to provide the logo of a custom character sheet.

Adam

Dec 7, 2021 5:59 pm

Polls

Post polls

BBCode: 
[poll="What do you use polls for?" show multi]
Gauging community opinions in the public forums.
As a GM in OOC threads, to find out if there's a consensus view from the players.
For fun and novelty in games.
[/poll]

Result:

What do you use polls for? Multi

Gauging community opinions in the public forums.

As a GM in OOC threads, to find out if there's a consensus view from the players.

For fun and novelty in games.

The poll question is the quoted text, 'show' and 'multi' are options to control the poll's display. Each poll option is on a new line. For more information about using polls see the inline polls guide.

Adam

Dec 18, 2021 9:24 pm

Advanced formatting

Size

BBCode: [size="150"]150% size[/size]

Result: 150% size

Email addresses

BBCode: [email]test@example.com[/email]

Result: test@example.com

@mentions

It's not BBCode but if you put an @ in front of someone's username then they will be notified with a link to your post on their homepage.

Code

BBCode: [code]This is how to use [b]bold[/b].

[/code]
Result:

This is how to use [b]bold[/b].

The code tag is used when you don't want the BBCode to be parsed, for example when showing someone some BBCode.

CSS
If you're familiar with a technology called CSS then the color tag offers an opportunity to use those skills.


The colour tag: 
[color="red"]Hello world[/color]
becomes the HTML
<span style="colour:red">Hello world</span>

It's really just inserting the bbcode attribute into the span's style. This means we can add other CSS style attributes.

[color=";font-family:aniron;"]Hello world[/color]

becomes the HTML

<span style="colour:;font-family:aniron;">Hello world</span>

which renders as

Hello world

A full tutorial on using CSS styles is beyond the scope of this guide, but if you see a member use some interesting formatting in a post then you might want to click 'Quote' to see their BBCode and discover their tricks.

Mark as unread

Preview

Post Preview

What do you use polls for? Multi

You do not have permission to post in this thread.