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, 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 🙂
Note: Wiki page changes have been said to be updated once per day on BoardGameArena. (That may be outdated, it seems maybe once per hour now.)
Languages
Wiki page content displays:
- User's language, else
- English, else
- Create this page link/button.
e.g. A Chinese user reads the Jump Drive rules summary on its game panel page, displayed in English (en.doc.boardgamearena.com/Gamehelpjumpdrive) because the Chinese (zh.doc.boardgamearena.com/Gamehelpjumpdrive) page does not exist. The user sees a typo in the English rules and selects the edit page link to correct it, but the Chinese wiki's create page is displayed instead.
Bug reports
Lists
Issues
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*/
}
Markers (bullets *, numbering #), margins and padding are removed on BoardGameArena.
Bug reports
Workarounds
common.css rulesul.bulletlist li {
list-style: disc none inside
}
.wikicontent p {
margin-bottom: 8px;
margin-top: 8px
}
| Wiki text | Wiki | BGA | |
|---|---|---|---|
| Dynamic
marker¹ |
* A * B * C |
|
|
| Dynamic¹ +
static marker |
*- A *- B *- C |
|
|
| static marker +
line breaks² |
- A - B - C |
- A - B - C |
- A - B - C |
| HTML + CSS | <ul class="bulletlist" style="
margin:1em 0;
padding-inline-start:40px;
">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
|
|
|
<ul>unordered list</ul><li>list item</li>
| Wiki text | Wiki | BGA | |
|---|---|---|---|
| Dynamic
marker¹ |
# A # B # C |
|
|
| Dynamic¹ +
static marker |
# 1. A # 2. B # 3. C |
|
|
| static marker +
line breaks² |
1. A 2. B 3. C |
1. A 2. B 3. C |
1. A 2. B 3. C |
| HTML + CSS | <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>
|
|
|
<ol>ordered list</ol><li>list item</li>
| Wiki text | Wiki | BGA | |
|---|---|---|---|
| Dynamic
marker¹ |
;A term: A detail ;B term: B detail ;C term: C detail |
|
|
| Dynamic¹ +
static marker |
;'''A term''': A detail ;'''B term''': B detail ;'''C term''': C detail |
|
|
| static marker +
line breaks² |
'''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 |
| HTML + CSS | <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> |
|
|
<dl>description list</dl><dt>description term</dt><dd>description details</dd>
¹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.
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
/docinstead 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.
- e.g.
[[File:Marrakech_example.jpg|300px]]because the resized image does not exist in the referenced directory.
- e.g.
- Thumbnails images do not display on BoardGameArena.
- e.g.
[[File:Marrakech_example.jpg|thumb]]because thumbnails are just resized images.
- e.g.
- Image links do not work on BoardGameArena.
- e.g.
[[File:Versions.png|link=https://en.doc.boardgamearena.com/images/b/b5/Factum_Rules_Summary_EN_v1.jpg]]because the link resolves tohttps://boardgamearena.com/dochttps://en.doc.boardgamearena.com/images/b/b5/Factum_Rules_Summary_EN_v1.jpg
- e.g.
Workarounds
- Upload YourImage with the size it will appear and include the image as simply:
- e.g.
[[File:Marrakech_example.jpg]]
- e.g.
- Create a
{{gameIcon}}with ascalefactor.- e.g.
{{YourIcon|scale=0.5}}to reduce the image dimensions by ½.
- e.g.
- Replace image links with regular links.
- e.g.
[[File:Versions.png]] [https://en.doc.boardgamearena.com/images/b/b5/Factum_Rules_Summary_EN_v1.jpg LinkText]
- e.g.
Tips
- Optionally include rollover text
[[File:Marrakech_example.jpg|Example move]]
Tables
Issues
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;
}
width: 98%;stretches tables across the screen on BoardGameArena.- Borders do not display on BoardGameArena.
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
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*/
}
- Margins and padding are removed on BoardGameArena.
- No left border.
Workarounds
<blockquote> formatting| Wiki text | Wiki | BGA |
|---|---|---|
<blockquote style="
margin:1em 0;
margin-inline:40px;
padding:8px 32px;
border-left:4px solid #eaecf0;
">
This is a <blockquote>
</blockquote>
|
|
|
Wiki Templates
Text
Text
Example
{{Text|Example|c=firebrick}}
Pill
Example
{{pill|Example|firebrick}}
Code
Example
{{code|Example}}
InfoBox {{InfoBox|title=Example|body=Lorem…}}
General Icons
Create your own icons
see examples
| Wiki text | Result |
|---|---|
{{redCylinder|1}}
|
|
{{orangeCylinder|2}}
|
|
{{yellowCylinder|3}}
|
|
{{greenCylinder|4}}
|
|
{{blueCylinder|5}}
|
|
{{purpleCylinder|6}}
|
|
{{whiteCylinder|7}}
|
|
{{greyCylinder|8}}
|
|
{{blackCylinder|9}}
|
|
{{creamCylinder|10}}
|
| Wiki text | Result |
|---|---|
{{meeple|red|1}}
|
|
{{meeple|orange|2}}
|
|
{{meeple|yellow|3}}
|
|
{{meeple|green|4}}
|
|
{{meeple|blue|5}}
|
|
{{meeple|purple|6}}
|
|
{{meeple|white|7}}
|
|
{{meeple|grey|8}}
|
|
{{meeple|black|9}}
|
| Wiki text | Result |
|---|---|
| {{s:)}} | |
| {{s8)}} | |
| {{s:$}} | |
| {{s:(}} | |
| {{s:/}} | |
| {{s:D}} | |
| {{s:O}} | |
| {{s:O2}} | |
| {{s:P}} | |
| {{s;)}} |
Cards
| Wiki text | Result |
|---|---|
{{card|A}}
|
A |
{{club|K}}
|
K♣ |
{{spade|Q}}
|
Q♠ |
{{heart|J}}
|
J♥ |
{{diamond|10}}
|
10♦ |
{{cardBack}}
|
🟔 |
{{club|color=green}}
|
♣ |
| Wiki text | Result |
|---|---|
{{cardholder|{{diamond|A}}{{club|A}}{{heart|A}}{{spade|A}} |Alice}}
|
A♦A♣A♥A♠ Alice |
Dice
| Wiki text | Result |
|---|---|
{{whiteDie|1}}
|
|
{{yellowDie|2}}
|
|
{{orangeDie|3}}
|
|
{{blackDie|4}}
|
| Wiki text | Result |
|---|---|
{{d6}}
|
|
{{d6|ParksDie.jpg|54}}
|
Player panel icons
| Wiki text | Result |
|---|---|
{{Beginner}} {{Beginner|0}}
|
|
{{Apprentice}} {{Apprentice|1}}
|
|
{{Average}} {{Average|100}}
|
|
{{Good}} {{Good|200}}
|
|
{{Strong}} {{Strong|300}}
|
|
{{Expert}} {{Expert|500}}
|
|
{{Master}} {{Master|700}}
|
| Wiki text | Result |
|---|---|
{{player|2}}
|
2players |
{{hand|4}}
|
4cards in hand |
Boards
{{Quoridorboard}}
Game panel options
{{option|s=|Selected and description|Option description|
{{option|ds=|df=|Sub-option, deselected, default and description|Sub-option description}}
}}
- May exchange 1 or 3 cards with face-up cards.
- If all players consecutively pass, all face-up cards are replaced.
- Draw from the deck or discard pile, then discard.
- Cannot discard the same card taken from the discard pile.





