📝 Guide to Gamers' Plane BBCode

Dec 19, 2021 4:15 pm

I'm trying to keep this thread clean.

If you want to discuss this guide then please add your comments to this thread.

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, Format

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
(for information on OtFBM, read Eyes' On the Fly Battle Maps Instructional Guide guide)

NPCs
NPC

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

Polls and other post widgets
Post polls, Star Wars destiny tokens

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

Custom character sheet form fields
Editable fields, Checkboxes, Calculations

Last edited February 21, 2025 1:32 pm

Adam

Dec 19, 2021 4:15 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

[ +- ] 🎨 Dark mode automatic colour adjustment

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

Format

BBCode: [f=large font-elite]large text[/f]

Result: large text

The f tag provides for formatting beyond the standard bold, italic and underline. Multiple formats can be applied by separating the options with a space.

Colours and background colors can be added to the list of styles too.

BBCode: [f=large color:navy background-color:gold]large text[/f]

Result: large text

The toolbar button will display a dialog to allow the options to be selected.

Headings

h1	Lorem ipsum
h2	Lorem ipsum
h3	Lorem ipsum

Text alignment

centre	Lorem ipsum
center	British Lorem ipsum
right	Lorem ipsum

Fonts

font-opensans	Lorem ipsum
font-ostrich	Lorem ipsum
font-cursive	Lorem ipsum
font-agency	Lorem ipsum
font-neuropol	Lorem ipsum
font-kelt	Lorem ipsum
font-dumbledor	Lorem ipsum
font-aniron	Lorem ipsum
font-aladin	Lorem ipsum
font-blackops	Lorem ipsum
font-cabin	Lorem ipsum
font-eagle	Lorem ipsum
font-goudy	Lorem ipsum
font-gugi	Lorem ipsum
font-iceland	Lorem ipsum
font-fell	Lorem ipsum
font-nightshade	Lorem ipsum
font-start	Lorem ipsum
font-quint	Lorem ipsum
font-elite	Lorem ipsum
font-stalinist	Lorem ipsum

Spacing

extra-space	Lorem ipsum
double-space	Lorem ipsum

Formatting

italic	Lorem ipsum
bold	Lorem ipsum
strikethrough	Lorem ipsum
border	Lorem ipsum

Font size

tiny	Lorem ipsum
small	Lorem ipsum
large	Lorem ipsum
huge	Lorem ipsum
gargantuan	Lorem ipsum

Fancy

fancy-paper	Lorem ipsum
fancy-vdu	Lorem ipsum
fancy-parchment	Lorem ipsum

For floating images at the side of page, put your image in a float format block.

BBCode: [f=float-right][img]https://i.imgur.com/NDHCkKy.png[/img]

Result: →

float-right	Floats an image on the right
float-left	Floats an image on the left

[ +- ] How do f tags work?

How do f tags work?

Take this example:

[f=font-eagle large text-decoration:overline filter:blur(1px)]Test[/f]

...which renders as:

Test

...by generating this HTML...
Test

We see the parameters of the f tag have changed both the class and style of this span.

Firstly, the parameters of the f tag are split by whitespace:
font-eagle
large
text-decoration:overline
filter:blur(1px)

userColor is always added as a class, which controls the automatic brightness inversion for dark mode.
Any of these without a colon (font-eagle and large) are prefixed with 'gpFormat-' and also added as classes.
Any of these which have a colon (text-decoration:overline and filter:blur(1px)) are added to the span's style attribute.

gpFormat-... classes are defined in Gamers' Planes CSS and are used for common use cases (e.g. the parchment style).

Styles can be used for more bespoke rendering. See https://www.w3schools.com/css/default.asp for a list of CSS properties.

Lists
Lists have options to use bullets, numbers, letters, or roman numerals

BBCode:
[list]
[*] Item 1
[*] Item 2
[*] Item 3
[/list]

Result:

Item 1
Item 2
Item 3

You can modify the list with the following format:


[list={a,A,i,I}(,#)]
[list=#]

a - alphabetic, lower case (a, b, c)
A - alphabetic, upper case (A, B, C)
i - roman numeral, lower case (i, ii, iii)
I - roman numeral, upper case (I, II, III)

By adding a command and number after, you can tell the list what count to start at.

By just adding a number, you can produce a numbered list, starting at that number.

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

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

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

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

Result:

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

Last edited May 19, 2024 1:18 pm

Adam

Dec 19, 2021 4:16 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.

Last edited June 18, 2022 8:40 am

Adam

Dec 19, 2021 4:16 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 19, 2021 4:17 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.

[ +- ] Tip:

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.

Last edited January 28, 2022 4:45 pm

Adam

Dec 19, 2021 4:17 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"]`	Adds grid lines to a table.
`[table="zebra"]`	Adds shaded horizontal stripes to the table.
`[table="compact"]`	Prevents the table taking up the full width.
`[table="center grid zebra"]`	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.

Last edited March 4, 2022 12:08 pm

Adam

Dec 19, 2021 4:17 pm

Maps

Map

[map]
https://otfbm.io/26x14/@c40
/w12:al26
--Tokens
/ad18-Alice
/af20-Bob
--Background image
?bg=https://gpres.blob.core.windows.net/saltmarsh/map-tempest.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.

For information about using OtFBM in your Gamers' Plane game, read Eyes' On the Fly Battle Maps Instructional Guide guide.

[ +- ] 📺 Video tutorial

[ +- ] 🎨 Adjusting colour

You can use the color tag to adjust maps colours.

e.g. This map

Can be made into a moonlit map by changing properties like saturation and brightness.


[color=";filter:sepia(1) hue-rotate(120deg) saturate(0.3) contrast(1.3) brightness(0.3);'"]
[map]https://otfbm.io/26x14/@dc40/s18:ah30?bg=https://gpres.blob.core.windows.net/saltmarsh/twilight%20hut.jpg[/map]
[/color]

Or could even be adjusted to be creepy alien night vision


[color=";filter:sepia(100%) hue-rotate(250deg) contrast(1.5) invert();"]
[map]https://otfbm.io/26x14/@c40/s18:ah30?bg=https://gpres.blob.core.windows.net/saltmarsh/twilight%20hut.jpg[/map]
[/color]

[ +- ] 🎞️ Animated effects

With a little CSS and an animated gif, you can overlays for special effects.


[f=position:relative display:block][map]
https://otfbm.io
--Map size, cell size, and panning
/51x51/@dc40/@n
/w12:al26
--Tokens
/ag16-Atzi~wap2n
/ai19-Billy~cht6t
/ak21-Jarl~jppxa
--Background image
?bg=https://gpres.blob.core.windows.net/saltmarsh/map-tempest.jpg
[/map][f="position:absolute;display:block;top:.5em;bottom:.5em;left:0;right:0;background-image:url(https://i.imgur.com/q2vCc1d.gif);background-position-x:center;background-size:cover;background-repeat:no-repeat;mix-blend-mode:plus-lighter;pointer-events:none;opacity:.6"][/f][/f]

Here are some animated gifs I've used (adjust the opacity to taste):

Effect	Animated gif	CSS changes
Storm:	https://i.imgur.com/q2vCc1d.gif
Rain:	https://i.imgur.com/7mJk6r3.gif
Fog:	https://i.imgur.com/FVjE590.gif	mix-blend-mode:screen

[ +- ] 🧩 Generating tokens

[ +- ] 📌 Generating tokens using the OtFBM gm sheet

Zoommap

[zoommap=https://www.aidedd.org/atlas/images/waterdeep-3560-7256.jpg]
2053,4472 | The Yawning Portal | green
610, 2080 | House of Heroes | red
2342, 2888 | Hospice of St. Laupsenn
2358, 5468 | The Skewered Dragon | green
1781, 4238 | Castle Waterdeep | amber
2062, 4603 | The Metal House of Wonders | red
2624, 4771 | The Stone House
[/zoommap]

Result:

Zoommaps allow users to pan and zoom around large maps, and for GMs to place pins at positions.
Each pin is defined on a new line within the zoommap tag.
The x, y coordinates are the pixel coordinates on the image.
The pins contents come next. BBCode is supported in the content (e.g. for links).
The last part is the optional pin colour and can be red, green or amber. If a colour isn't specified then the default is blue.

Last edited February 21, 2025 1:33 pm

Adam

Dec 19, 2021 4:18 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.

Last edited December 19, 2021 4:27 pm

Adam

Dec 19, 2021 4:18 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.

Special rolls tables

[table="rolls d20"]

A d20 rolls table will interpret any modifiers (e.g. +3) as 1d20+3 rolls.

[table="rolls d20 dnd5e"]

A d20 rolls table with dnd5e will interpret any modifiers (e.g. +3) as 1d20+3 rolls AND will automatically add A and D for rolling at advantage or disadvantage.

[table="rolls pool"]

[table="rolls pool-add"]

[ +- ] 📺 Result

A pool rolls table appends the roll to the last basic roll in the rolls section (creating a new one if none exist or the last one is full). pool-add acts like pool, but uses + to separate the rolls.

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.

Last edited March 20, 2022 7:57 am

Adam

Dec 19, 2021 4:19 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.

Flag	Result
show	Show the results to users before they vote
multi	Allows multiple options to be chosen
public	Show avatars instead of the GP logo for votes

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.

Flip tokens (Star Wars destiny tokens)

BBCode: 
[fliptokens=9]

Result:

History

Antiproduct January 18, 2022 4:59 am

Adam January 18, 2022 5:14 am

Adam January 18, 2022 5:15 am

KoldikSteelskin January 18, 2022 12:13 pm

szemely January 18, 2022 8:48 pm

Stefron January 18, 2022 10:04 pm

Harrigan January 19, 2022 7:31 am

Adam January 19, 2022 10:46 am

Northman January 20, 2022 9:53 am

ZeroHero March 20, 2022 5:16 am

saevikas March 27, 2022 4:16 am

Dreamblade March 31, 2022 3:48 pm

runekyndig April 28, 2022 4:17 am

mightywok May 1, 2022 3:00 pm

Harrigan May 21, 2022 5:26 pm

WhtKnt May 24, 2022 7:27 pm

seifi May 28, 2022 10:35 pm

ianXian June 1, 2022 2:26 am

WhtKnt June 7, 2022 11:24 pm

huttyman June 9, 2022 3:20 pm

huttyman June 21, 2022 1:19 pm

Ellithar June 29, 2022 2:16 am

9littlebees July 1, 2022 7:40 am

Sgt.Banter July 29, 2022 2:42 pm

Ellithar August 28, 2022 9:07 pm

Ellithar August 28, 2022 9:08 pm

Pedrop September 8, 2022 12:02 am

CaveJohnson September 9, 2022 1:34 am

Ranimara October 15, 2022 1:42 am

Pedrop October 18, 2022 9:41 pm

Yunera January 12, 2023 9:31 am

Faenre January 26, 2023 11:56 pm

Red_Dragon March 5, 2023 5:02 pm

MasMas March 10, 2023 9:11 pm

MasMas March 10, 2023 9:12 pm

MasMas March 11, 2023 9:11 am

remedez April 24, 2023 6:04 pm

remedez April 24, 2023 6:05 pm

Chalrytharendir April 24, 2023 7:51 pm

Carcabob July 29, 2023 3:00 am

saccharine_rabbit September 5, 2023 3:50 pm

Ncoturne9 November 10, 2023 8:35 am

Ncoturne9 November 10, 2023 8:36 am

kalajel November 15, 2023 3:16 am

KoldikSteelskin December 14, 2023 5:47 pm

KoldikSteelskin December 14, 2023 5:48 pm

Remz April 25, 2024 2:36 pm

rimestock June 12, 2024 11:03 pm

Ironmonger42 July 23, 2024 4:20 pm

Avraham July 31, 2024 7:41 pm

Oligopsony August 31, 2024 10:54 am

Oligopsony August 31, 2024 10:55 am

Piv76 November 14, 2024 3:16 pm

Merivel December 26, 2024 1:32 pm

Merivel December 27, 2024 10:42 pm

Merivel December 27, 2024 10:47 pm

WhtKnt March 28, 2025 9:03 pm

Didz April 30, 2025 3:29 pm

Aline May 29, 2025 8:06 pm

Psybermagi June 4, 2025 11:54 am

Psybermagi June 4, 2025 11:55 am

The "9" in this example is the number of tokens shown. They are initially all shown on their light side. Flip tokens can be flipped from the light side to the dark side. They track who turned them, and when. Only one fliptokens tag is allowed per post.

They are designed to track destiny points in Star Wars games.

Last edited March 27, 2022 8:10 am

Adam

Dec 19, 2021 4:19 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.

Adam

Mar 4, 2022 12:05 pm

Custom character sheet form fields

Editable field

Name: [_=Hawk the Slayer]

Name: Hawk the Slayer

Shortcut key: Ctrl+M

Use this to mark parts of your custom character sheets as editable.

Checkboxes

Rage: [_=2/3]

Rage:

The maximum number of checkboxes is 20.

Variables and calculations

Strength bonus: [_str=+2]
Damage: 1d6[_$=+str]

Strength bonus: +2
Damage: 1d6+2
Note that calculations don't work in posts, but are updated live on character sheets.

Text in front of a form field names a variable.
A calculation has a $ in from of the = sign. A field can be a calculation and a new variable too by putting the variable name before the $=.
Prefixing a calculation with + forces it to use the sign (so 5 renders as +5).

There are some built-in functions to help with your calculations.

ceil	ceiling (round up)
floor	floor (round down)
max	returns the maximum of two values
min	returns the minimum of two values
d20bonus	returns the d20 game system bonus of a value (shortcut for Math.floor((val-10)/2);)
lookupBonus	lookupBonus(val, 1,3,-3, 4,5,-2, 6,8,-1, 9,12,0, 13,15,1, 16,17,2, 18,18,3) This takes val and looks for it in the triples. If val is inclusively between 1 and 3 return -3. If between 4 and 5 return -2. etc.
dwBonus(12)	This is a shortcut for dungeon world players so they don't need that whole mess of lookupBonus code.

Example:

Int: [_int=18]
Int bonus: [_int_bonus$=+d20bonus(int)]
Proficiency: [_prof=2]
Spell DC: [_$=8+int_bonus+prof]

Int: 18
Int bonus: +4
Proficiency: 2
Spell DC: 14

Using these different techniques, it's possible to make quite advanced character sheets for your players that are usable directly within your game.

Distributing custom character sheets

[charsheet=Honey Heist]
I am [_=name], a [_=description] [_=species], the [_=role]

[table="compact ht"]
Stats | Points
Bear | [_=3/6]
Criminal | [_=3/6]
[/table]

[abilities=Notes]
[/abilities]
[/charsheet]

Wrap custom character sheet BBCode in a charsheet tag to share it. A customchar section contains a "Create character" button at the top right. This means a GM can include a custom character sheet, or even a pregen, to allow players to quickly start playing.

Last edited March 12, 2022 7:18 pm

Eyes

Mar 3, 2025 2:36 pm

📝 Guide to Gamers' Plane BBCode

wrap text in a cell

[table=compact grid]
Say what you want to in the first line[f=display:block][/f] Then in the second line| Row 1 cell 2
Next row cell1 | cell 2
[/table]

Say what you want to in the first line Then in the second line	Row 1 cell 2
Next row cell1	cell 2

Last edited March 23, 2025 5:59 pm

Mark as unread

Preview

Post Preview

Suffix	Dimensions
s	90× 90	Small Square
b	160× 160	Big Square
t	160× 160	Small Thumbnail
m	320× 320	Medium Thumbnail
l	640× 640	Large Thumbnail
h	1024×1024	Huge Thumbnail

What do you use polls for? Multi

Notes

You do not have permission to post in this thread.