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 🙂
Note: Wiki page changes are updated once per day on BoardGameArena.com.
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.com.
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
/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.
- Thumbnails images do not display on BoardGameArena.com.
- e.g.
[[File:Marrakech_example.jpg|thumb]]
because thumbnails are just resized images.
- e.g.
- Image links do not work on BoardGameArena.com.
- 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 ascale
factor.- 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.com.- Borders do not display on BoardGameArena.com.
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.com.
- No left border.
Workarounds
<blockquote>
formattingWiki 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
Template:InfoBox
Customisable container(s) responsive to screen size.
Create your own icons
https://en.doc.boardgamearena.com /Template:YourIcon
Fill in the parameters:
{{gameIcon |tooltip= |imageFileName= |scale=1 |width= |height= |x=0 |y=0 |={{{1|​}}} |textColor=black |outlineColor=white }}<noinclude> [[Category:YourIcons]] <noinclude>
{{YourIcon}}
See Examples
Category:GameIconTemplates
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 |
---|---|
{{whiteDie|1}}
|
|
{{yellowDie|2}}
|
|
{{orangeDie|3}}
|
|
{{blackDie|4}}
|
Category:Card_templates
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 |
Wiki text | Result |
---|---|
{{Beginner}} {{Beginner|0}}
|
Beginner 0 |
{{Apprentice}} {{Apprentice|1}}
|
Apprentice 1 |
{{Average}} {{Average|100}}
|
Average 100 |
{{Good}} {{Good|200}}
|
Good 200 |
{{Strong}} {{Strong|300}}
|
Strong 300 |
{{Expert}} {{Expert|500}}
|
Expert 500 |
{{Master}} {{Master|700}}
|
Master 700 |
Wiki text | Result |
---|---|
{{player|2}}
|
2players |
{{hand|4}}
|
4cards in hand |
Category:GameBoardTemplates
{{Goboard9}}
{{Quoridorboard}}