This is a documentation for Board Game Arena: play board games online !
Wiki formatting
Purpose
This page was created as a result of the Wiki style guide forum thread.
Most wiki (doc.BoardGameArena.com) formatting is not preserved on BoardGameArena.com, but there are some workarounds. This page is a collection of unofficial tips on how to make wiki pages display well in-game and on game panels.
Feel free to add additional issues, advice and templates 🙂
Lists
Issues
Markers (bullets *
, numbering #
), margins and padding are removed on BoardGameArena.com.
common.css
rulesli { list-style: none; /*removes list markers*/ } li, ul { margin: 0; /*removes margin before and after lists*/ padding: 0; /*removes list indentation*/ } blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul { margin: 0; /*removes inline and block margins*/ padding: 0; /*removes list indentation*/ }
Bug reports
Workarounds
Wiki text | Wiki | BGA | |
---|---|---|---|
Dynamic markers¹ * # ; :
|
* A * B * C |
|
|
# A # B # C |
|
| |
;A term: A detail ;B term: B detail ;C term: C detail |
|
| |
Dynamic¹ + static markers | *- A *- B *- C |
|
|
# 1. A # 2. B # 3. C |
|
| |
;'''A term''': A detail ;'''B term''': B detail ;'''C term''': C detail |
|
| |
Static markers + line breaks² | - A - B - C |
- A - B - C |
- A - B - C |
1. A 2. B 3. C |
1. A 2. B 3. C |
1. A 2. B 3. C | |
'''A term''': A detail '''B term''': B detail '''C term''': C detail |
A term: A detail B term: B detail C term: C detail |
A term: A detail B term: B detail C term: C detail |
¹Dynamic markers generate HTML list structure.
²Without dynamic markers, <p>
paragraphs</p>
are generated which require line breaks before and after the "list" to prevent merging into surrounding paragraphs.
Wiki text | Wiki | BGA | |
---|---|---|---|
HTML + CSS | <ul class="bulletlist" style=" margin:1em 0; padding-inline-start:40px; "> <li>A</li> <li>B</li> <li>C</li> </ul> |
|
|
<ol style=" margin:1em 0; padding-inline-start:40px; "> <li style="list-style-type:decimal;">A</li> <li style="list-style-type:decimal;">B</li> <li style="list-style-type:decimal;">C</li> </ol> |
|
| |
<dl> <dt><b>A term</b></dt> <dd style="margin-inline-start:1.6em;">A detail</dd> <dt><b>B term</b></dt> <dd style="margin-inline-start:1.6em;">B detail</dd> <dt><b>C term</b></dt> <dd style="margin-inline-start:1.6em;">C detail</dd> </dl> |
|
|
<ul>
unordered list</ul>
<ol>
ordered list</ol>
<li>
list item</li>
<dl>
description list</dl>
<dt>
description term</dt>
<dd>
description details</dd>
common.css
rulesul.bulletlist li { list-style: disc none inside } .wikicontent p { margin-bottom: 8px; margin-top: 8px }
Headings
Level 1 (h1) headings are the title of the page e.g. = Wiki formatting =
, = Gamehelp[name] =
, = Tips_[name] =
.
Issues
- In-game h2 and h3 headings are visually indistinguishable.
- In-game h3 headings overlap text from the previous section.
- h5 headings and below are visually indistinguishable from body text.
- Inconsistency between in-game and game panel headings.
Bug reports
Workarounds
Since in-game h3 headings became indistinguishable from h2 headings:
- Change h3 to h4 headings.
- Use additional line breaks before h3 headings.
Wiki text | Wiki | BGA game panel | BGA in-game | |
---|---|---|---|---|
h2 | * List item == Example h2 heading == * List item |
Example h2 heading
|
Example h2 heading
|
Example h2 heading
|
h3 | * List item === Example h3 heading === * List item |
Example h3 heading
|
Example h3 heading
|
Example h3 heading
|
h4 | * List item ==== Example h4 heading ==== * List item |
Example h4 heading
|
Example h4 heading
|
Example h4 heading
|
h5 | * List item ===== Example h5 heading ===== * List item |
Example h5 heading
|
Example h5 heading
|
Example h5 heading
|
common.css
rulesblockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul { margin: 0; /*removes inline and block margins*/ padding: 0; /*removes list indentation*/ } h2 { font-size: 18px; font-weight: 700; margin-bottom: 10px; margin-top: 10px; } blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul { margin: 0; padding: 0; } body { font-family: Roboto,Arial,sans-serif; //font-size: 16px; } h3, h4 { font-weight: 700; margin-bottom: 5px; } h3 { display: block; //font-size: 1.17em; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; //font-weight: bold; } h3 { font-size: 16px; margin-top: 5px; } h4 { margin-top: 20px; } h4 { display: block; margin-block-start: 1.33em; margin-block-end: 1.33em; margin-inline-start: 0px; margin-inline-end: 0px; //font-weight: bold; } h5 { display: block; //font-size: 0.83em; margin-block-start: 1.67em; margin-block-end: 1.67em; margin-inline-start: 0px; margin-inline-end: 0px; //font-weight: bold; } h1, h2, h3, h4, h5, h6 { font-size: 100%; //font-weight: 400; }
gameserver.css
rules.pagesection .wikicontent h2 { margin-top: 12px; } .pagesection h2, .pagesection h3, .portlet h2, .portlet h3 { background: linear-gradient(0deg,#f8f8f8,#e7e9e8); border-radius: 6px 6px 0 0; box-shadow: 0 5px 5px 0 rgba(0,0,0,.1); color: #385088; font-size: 14px; margin: -12px -12px 20px; padding: 12px; text-transform: uppercase; }
Links
- The Main_Page (root) of this wiki redirects to Help.
- BoardGameArena.com/doc displays the Help index of games.
- Note: each heading has a unique id appended with a number as necessary.
Issues
- Links to section headings
#
do not work outside of the wiki (doc.BoardGameArena.com). - URL is resolved to
/doc
instead of the current page. - In-game links navigate the user away from the game.
e.g. [[#Section_heading_link]]
⇨ https://BoardGameArena.com/doc#Section_heading_link ¹.
Bug reports
Workarounds
- Remove links that do not function as expected.
Images
Issues
- Resized images do not display on BoardGameArena.com.
- e.g.
[[File:Marrakech_example.jpg|300px]]
) because the resized image does not exist in the referenced directory.
- e.g.
Workarounds
- Upload images with the size it will appear:
[[File:Marrakech_example.jpg]]
Tips
- Optionally include rollover text
[[File:Marrakech_example.jpg|Example move]]
- Optionally include a link
[[File:Versions.png|link=https://lumberjacks-studio.com/en/project/trek-12_en/]]
Tables
Issues
width: 98%;
stretches tables across the screen on BoardGameArena.com.- Borders do not display on BoardGameArena.com.
common.css
rules.wikicontent table { border-collapse: collapse; margin-left: 5px; margin-top: 5px; width: 98%; } table { border-collapse: collapse; border-spacing: 0; } caption, th { text-align: left; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: 400; } .wikicontent table td, .wikicontent table th { padding: 5px; text-align: center; } blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul { margin: 0; padding: 0; } .wikicontent table td, .wikicontent table th { padding: 5px; text-align: center; }
Workarounds
style="width:auto;"
fits column width to the contents.border="2"
creates table cell borders.- Replace with HTML + CSS grid.
Wiki text | Wiki | BGA | |||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Raw wikitable | {|class="wikitable" |+Caption !0-90 |⭐ |- !91-110 |⭐⭐ |- !111-125 |⭐⭐⭐ |} |
|
| ||||||||||||
width:auto; border="2"
|
{|class="wikitable" style="width:auto;" border="2" |+Caption !0-90 |⭐ |- !91-110 |⭐⭐ |- !111-125 |⭐⭐⭐ |} |
|
|
Option grids
Option grids can help visualise multiple interdependent options. Where inflexible wiki text tables fall short, HTML + CSS grid is responsive to screen size e.g. GameHelpPente:
<div style="display:flex;flex-flow:row wrap;max-width:max-content;border:0.1rem solid #aaa;"> <div style="box-shadow:inset 0 0 0 0.1rem #f0f;background:#fef;padding:0.5rem;width:max-content;">Training mode only</div> <div style="box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;width:max-content;">Default</div> <div style="box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;width:max-content;">Other</div> </div> <div style="display:grid;max-width:50rem;border:0.1rem solid #aaa;"> <div style="grid-area: 1 / 1 / 3 / 2;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;"># of players</div> <div style="grid-area: 1 / 2 / 3 / 3;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;text-align:center;font-size:1.2rem;">2</div> <div style="grid-area: 1 / 5 / 3 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;text-align:center;font-size:1.2rem;">3</div> <div style="grid-area: 1 / 3 / 2 / 5;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;text-align:center;font-size:1.2rem;">4</div> <div style="grid-area: 2 / 4 / 3 / 5;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;text-align:center;">Free-for-all</div> <div style="grid-area: 2 / 3 / 3 / 4;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;text-align:center;">Team</div> <div style="grid-area: 3 / 1 / 4 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">All options win</div> <div style="grid-area: 3 / 2 / 4 / 4;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Align exactly <b>5</b> stones in a row</div> <div style="grid-area: 3 / 4 / 4 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Align exactly <b>4</b> stones in a row</div> <div style="grid-area: 4 / 1 / 5 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">Overline win</div> <div style="grid-area: 4 / 2 / 5 / 4;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">May align more than <b>5</b> stones in a row</div> <div style="grid-area: 4 / 4 / 5 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">May align more than <b>4</b> stones in a row</div> <div style="grid-area: 5 / 1 / 6 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">Capture win</div> <div style="grid-area: 5 / 2 / 6 / 4;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Make <b>5</b> captures</div> <div style="grid-area: 5 / 4 / 6 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Make <b>4</b> captures</div> <div style="grid-area: 6 / 1 / 7 / 2;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;">Capture three</div> <div style="grid-area: 6 / 2 / 7 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">May capture two <b>or three</b> stones (Keryo Pente)</div> <div style="grid-area: 7 / 1 / 10 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">Self-capture</div> <div style="grid-area: 7 / 2 / 8 / 6;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;">No effect: a stone may be placed in a capture position</div> <div style="grid-area: 8 / 2 / 9 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Self-capture: results in <b>self-capture!</b> (Poof Pente)</div> <div style="grid-area: 9 / 2 / 10 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Forbidden: a stone may <b>not</b> be placed in a capture position</b></div> <div style="grid-area:10 / 1 / 12 / 2;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;">Overtime capture</div> <div style="grid-area:10 / 2 / 11 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Break the line: may capture to break a winning line (Boat Pente)</div> <div style="grid-area:11 / 2 / 12 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Capture the line: may capture an entire winning line</div> <div style="grid-area:12 / 1 / 14 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">Mixed capture</div> <div style="grid-area:12 / 3 / 13 / 6;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;">Enabled: May capture stones of mixed colour</div> <div style="grid-area:13 / 2 / 14 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Disabled: Captures of one colour only</div> </div>
{|class="wikitable" style="text-align:left;width:max-content;" border="2" |+Options |- !rowspan="2" style="text-align:left;"|# of players !rowspan="2" style="text-align:center;"|2 !colspan="2" style="text-align:center;"|4 !rowspan="2" style="text-align:center;"|3 |- !style="text-align:center;"|Team !style="text-align:center;background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|Free-for-all |- !style="text-align:left;background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|All options win |colspan="2"|Align exactly '''5''' stones in a row |colspan="2"|Align exactly '''4''' stones in a row |- !style="text-align:left;background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|Overline win |colspan="2"|May align more than '''5''' stones in a row |colspan="2"|May align more than '''4''' stones in a row |- !style="text-align:left;background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|Capture win |colspan="2"|Make '''5''' captures |colspan="2"|Make '''4''' captures |- !style="text-align:left;"|Capture three |colspan="4"|May capture two '''or three''' stones (Keryo Pente) |- !rowspan="3" style="text-align:left;background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|Self-capture |colspan="4" style="background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|No effect: a stone may be placed in a capture position |- |colspan="4"|Self-capture: results in '''self-capture!''' (Poof Pente) |- |colspan="4"|Forbidden: a stone may '''not''' be placed in a capture position |- !rowspan="2" style="text-align:left;"|Overtime capture |colspan="4"|Break the line: may capture to break a winning line (Boat Pente) |- |colspan="4"|Capture the line: may capture an entire winning line |- !rowspan="2" style="text-align:left;background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|Mixed capture | |colspan="3" style="background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|Enabled: May capture stones of mixed colour |- |colspan="4"|Disabled: Captures of one colour only |}
Blockquote
Issues
- Margins and padding are removed on BoardGameArena.com.
- No left border.
common.css
rulesblockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul { margin: 0; /*removes inline and block margins*/ padding: 0; /*removes list indentation*/ }
Workarounds
Wiki text | Wiki | BGA | |
---|---|---|---|
HTML + CSS | <blockquote style=" margin:1em 0; margin-inline:40px; padding:8px 32px; border-left:4px solid #eaecf0; "> This is a <blockquote> </blockquote> |
|
|
Wiki templates
Keyword icons
One game developer wrote a function to substitute keywords for icons, however this method only worked in-game and not on game panel or wiki pages.
Wiki template method
The wiki template method displays in all locations (i.e. the wiki, game panel and in-game). To create a template:
- Upload any image(s).
- Navigate to https://en.doc.boardgamearena.com/Template:YourNewTemplateName (replacing
YourNewTemplateName
), write the template and save. - Insert the template on any wiki page using double curly braces
{{YourNewTemplateName}}
.
{{gameIcon}}
example
{{gameIcon |tooltip=Farm ship |imageFileName=SpaceStationPhoenixIcons.png |width=85 |height=50 |x=500 |y=50 }}<noinclude> [[Category:SpaceStationPhoenixIcons]] </noinclude>
Template:InfoBox
Customisable container(s) responsive to screen size.
Category:PlayerBoardTemplates
Wiki text | Result |
---|---|
{{player|=2}}
|
players |
{{hand|=4}}
|
cards in hand |
Category:GamePieceTemplates
Wiki text | Result |
---|---|
{{redCylinder}}
|
|
{{orangeCylinder}}
|
|
{{yellowCylinder}}
|
|
{{greenCylinder}}
|
|
{{blueCylinder}}
|
|
{{purpleCylinder}}
|
|
{{whiteCylinder}}
|
|
{{greyCylinder}}
|
|
{{blackCylinder}}
|
|
{{creamCylinder}}
|
Wiki text | Result |
---|---|
{{meeple|red}}
|
|
{{meeple|orange}}
|
|
{{meeple|yellow}}
|
|
{{meeple|green}}
|
|
{{meeple|blue}}
|
|
{{meeple|purple}}
|
|
{{meeple|white}}
|
|
{{meeple|grey}}
|
|
{{meeple|black}}
|
Wiki text | Result |
---|---|
{{whiteDie|=1}}
|
|
{{yellowDie|=2}}
|
|
{{orangeDie|=3}}
|
|
{{blackDie|=4}}
|
Wiki text | Result |
---|---|
{{blackStone}}
|
|
{{whiteStone}}
|
|
{{blackReversiToken}}
|
|
{{whiteReversiToken}}
|
|
{{blackDoubleCylinder}}
|
|
{{whiteDoubleCylinder}}
|
|
{{Hclue|=8}}
|
clue tokens |
Category:Card_templates
Wiki text | Result |
---|---|
{{card|=A}}
|
|
{{club|=K}}
|
♣ |
{{spade|=Q}}
|
♠ |
{{heart|=J}}
|
♥ |
{{diamond|=10}}
|
♦ |
{{cardBack}}
|
🟔 |
{{club|colour=green}}
|
♣ |
Wiki text | Result |
---|---|
{{cardholder4
|card1=1
|card1Colour={{r}}
|clue1=1
|clue1Colour={{r}}
}}
|
1
1
A 🡲 |
{{cardholder|player=B |card1=1}}
|
{{{1}}} |
Wiki text | Result |
---|---|
{{HCardr|=1}}
|
1 |
{{HCardy|=2}}
|
2 |
{{HCardg|=3}}
|
3 |
{{HCardb|=4}}
|
4 |
{{HCardw|=5}}
|
5 |
{{HCardm|=5}}
|
5 |
{{HCardk|=5}}
|
5 |
Category:GameIconTemplates
Wiki text | Result |
---|---|
{{JumpDriveExplore|=1}}
|
|
{{JumpDriveDevelopment|=2}}
|
|
{{JumpDriveWorld|=3}}
|
|
{{JumpDriveMilitaryWorld|=3}}
|
|
{{JumpDriveChromosome}}
|
|
{{JumpDriveMilitary}}
|
|
{{JumpDriveNovelty|=1}}
|
|
{{JumpDriveRare|=2}}
|
|
{{JumpDriveGenes|=3}}
|
|
{{JumpDriveAlien|=4}}
|
Wiki text | Result |
---|---|
{{SSPGem|=1}}
|
|
{{SSPFood|=2}}
|
|
{{SSPMetal|=3}}
|
|
{{SSPWater|=4}}
|
|
{{SSPHumanoid}}
|
Category:GameBoardTemplates
{{Goboard9}}
{{Quoridorboard}}