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 https://gamersplane.com/images/gm_icon.png 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
Dec 7, 2021 5:51 pm
Bold
https://i.imgur.com/2w0ZeIs.png
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
https://i.imgur.com/sp5NiKM.png
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
https://i.imgur.com/HVZoDpb.png
BBCode: [u]Underlined text[/u]

Result: Underlined text
Shortcut ket: Ctrl+U

Strikethrough
https://i.imgur.com/OC2ekJH.png
BBCode: [s]Strikethrough[/s]

Result: Strikethrough

linebreak
https://i.imgur.com/uhAUbIQ.png
BBCode: [linebreak]


Result: ^ a horizontal rule across the page


Color
https://i.imgur.com/mmxUYho.png
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
https://i.imgur.com/AYNtp1v.png
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
Dec 7, 2021 5:53 pm
OOC (out of character)
https://i.imgur.com/FK4DmTM.png
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)
https://i.imgur.com/bb0iiL0.png
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

https://i.imgur.com/Ob4gsHK.png
 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.

https://i.imgur.com/XNfvMHA.png
Dec 7, 2021 5:53 pm
Notes
https://i.imgur.com/LlSWmMK.png
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 https://gamersplane.com/images/gm_icon.png
https://i.imgur.com/75pcL28.png
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.
Dec 7, 2021 5:54 pm
Images

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

Result: https://gamersplane.com/images/bodyComponents/logo.png

If your image is already hosted on the internet then using the toolbar menu will prompt for the URL and add the necessary tags.
https://i.imgur.com/eszMFzA.png

Uploading images

https://i.imgur.com/Vjn53By.png

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

https://i.imgur.com/L9w8WHH.png

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

https://i.imgur.com/8P5cnyt.png

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.
Dec 7, 2021 5:55 pm
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.
Dec 7, 2021 5:56 pm
Map https://gamersplane.com/images/gm_icon.png
[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 https://gamersplane.com/images/gm_icon.png
https://i.imgur.com/xSy5U2W.png
...coming soon...?
Dec 7, 2021 5:56 pm
NPC https://gamersplane.com/images/gm_icon.png

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

Result:
https://i.imgur.com/tkbOPKI.png


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.

https://i.imgur.com/P3czmMf.png

https://i.imgur.com/0Sa82S3.png

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 https://gamersplane.com/images/gm_icon.png

There's also an npcs tag for managing lists of NPCs. See the Character Sheets BBCode section for more information.
Dec 7, 2021 5:59 pm
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:
https://i.imgur.com/Wmfkk4v.png


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:
https://i.imgur.com/Tlyk74K.png

Character sheet integration:
https://i.imgur.com/yPmnfGA.png


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 https://gamersplane.com/images/gm_icon.png
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:
https://i.imgur.com/72BTmFa.png

Character sheet integration:
https://i.imgur.com/npLSr8C.png


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:
https://i.imgur.com/yTWdjsw.png


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 https://gamersplane.com/images/gm_icon.png

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:
https://i.imgur.com/hObSc1O.png

Character sheet integration:
https://i.imgur.com/gL485QR.png


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:
https://i.imgur.com/tPDT9rv.png


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:
https://i.imgur.com/gWFP9td.png


This is used to provide the logo of a custom character sheet.
Dec 7, 2021 5:59 pm
Post polls https://gamersplane.com/images/gm_icon.png

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.
Dec 18, 2021 9:24 pm
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.

https://i.imgur.com/3OA8Q4z.png

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.

You do not have permission to post in this thread.