This is a documentation for Board Game Arena: play board games online !

Wiki formatting: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
(New templates, simplification & grouped sections)
(MediaWiki help links, issues, bug reports, workarounds, visuals, template method, categories)
Line 1: Line 1:
==Purpose==
==Purpose==


''This page was created as a result of [https://boardgamearena.com/forum/viewtopic.php?f=3&t=23790 this forum thread].''
''This page was created as a result of the [https://boardgamearena.com/forum/viewtopic.php?f=3&t=23790 Wiki style guide] forum thread.''


Most wiki (doc.BoardGameArena.com) formatting is not preserved on https://BoardGameArena.com, but there are some workarounds. This is a collection of unofficial tips on how to make wiki pages display well on https://BoardGameArena.com both in-game and on game panels, including:
<span style="font-size:larger;">Most wiki ('''doc.'''BoardGameArena.com) formatting is not preserved on '''[https://BoardGameArena.com BoardGameArena.com]''', but there are some workarounds.
* [[#Known_issues_and_workarounds]]
This page is a collection of unofficial tips on how to make wiki pages display well in-game and on game panels.</span>
* in-game & game panel display differences;
* [[#Custom_elements]]


Feel free to add additional issues, advice and elements.
Feel free to add additional issues, advice and '''[[#Wiki_templates|templates]]''' 🙂


==Known issues and workarounds==
'''[https://www.mediawiki.org/wiki/Help:Formatting Help:Formatting]'''


===Bullet points===
==Lists==


The BGA rules display strips all bullet points, if the regular wiki bullet markup of asterisks is used.
'''[https://www.mediawiki.org/wiki/Help:Lists Help:Lists]'''


A common solution seems to be to add bullet-point unicode symbols, or hyphens. This also requires lines to be separated by paragraph breaks or <nowiki><br/></nowiki> tags, or to be used in addition to asterisked bullet points, otherwise all the points appear on the same line.
===Issues===


<pre>
'''Markers''' (bullets <code>*</code>, numbering <code>#</code>), '''margins''' and '''padding''' are removed on '''[https://BoardGameArena.com BoardGameArena.com]'''.
• Draw


• Play
{{infoBox|state=collapsed|color=#a00
|title=<code>common.css</code> rules
|body=<pre style="background:none;border:none;">
li {
    list-style: none; /*removes list markers*/
}


• Discard
li, ul {
</pre>
    margin: 0; /*removes margin before and after lists*/
    padding: 0; /*removes list indentation*/
}


<pre>
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 {
• Draw<br/>
    margin: 0; /*removes inline and block margins*/
• Play<br/>
    padding: 0; /*removes list indentation*/
• Discard
}
</pre>
</pre>
}}


<pre>
====Bug reports====
*• Draw
*• Play
*• Discard
</pre>


In the first two cases a blank line should be left between the start of the list and the end of the previous paragraph, otherwise the first point is merged into the previous paragraph.
* '''[https://boardgamearena.com/bug?id=16083 Bullet points not visible]'''


<small>
===Workarounds===
Relevant bug reports:
* [https://boardgamearena.com/bug?id=16083 Bullet points not visible on game help], open since April 2020
</small>


===Numbered list===
# Use static markers (<code>•</code>,<code>-</code>,<code>1.</code>).
# Replace with '''[https://developer.mozilla.org/en-US/docs/Web/HTML HTML]''' + '''[https://developer.mozilla.org/en-US/docs/Web/CSS CSS]'''.


Like bullet points, a numbered list in wiki markup (with a "#" before each line) doesn't display correctly: all of the numbers are stripped out.
<div style="width:100%;overflow:scroll;">
{|class="wikitable" style="width:max-content;"
|+Wiki vs '''[https://BoardGameArena.com BoardGameArena.com]''' list formatting
!
!Wiki text
!Wiki
!BGA
|-style="background:#fff4f4;"
!rowspan="3" style="writing-mode:vertical-rl;transform:rotate(180deg);"|Dynamic markers¹ <code>*</code> <code>#</code> <code>;</code><code>:</code>
|<pre style="background:none;border:none;">
* A
* B
* C
</pre>
|
* A
* B
* C
|<ul style="margin:0;padding:0;line-height:normal;">
    <li style="margin:0;padding:0;list-style:none;>A</li>
    <li style="margin:0;padding:0;list-style:none;>B</li>
    <li style="margin:0;padding:0;list-style:none;>C</li>
</ul>
|-style="background:#fff4f4;"
|<pre style="background:none;border:none;">
# A
# B
# C
</pre>
|
# A
# B
# C
|<ol style="margin:0;padding:0;line-height:normal;">
    <li style="margin:0;padding:0;list-style:none;>A</li>
    <li style="margin:0;padding:0;list-style:none;>B</li>
    <li style="margin:0;padding:0;list-style:none;>C</li>
</ol>
|-style="background:#fff4f4;"
|<pre style="background:none;border:none;">
;A term: A detail
;B term: B detail
;C term: C detail
</pre>
|
;A term: A detail
;B term: B detail
;C term: C detail
|<dl style="line-height:normal;">
<dt style="font-weight:normal;">A term</dt>
  <dd style="margin-inline-start:0;">A detail</dd>
<dt style="font-weight:normal;">B term</dt>
  <dd style="margin-inline-start:0;">B detail</dd>
<dt style="font-weight:normal;">C term</dt>
  <dd style="margin-inline-start:0;">C detail</dd>
</dl>
|-style="background:#fffff4;"
!rowspan="3" style="writing-mode:vertical-rl;transform:rotate(180deg);"|Dynamic¹ + static markers
|<pre style="background:none;border:none;">
*- A
*- B
*- C
</pre>
|
*- A
*- B
*- C
|<ul style="margin:0;padding:0;line-height:normal;">
    <li style="margin:0;padding:0;list-style:none;>- A</li>
    <li style="margin:0;padding:0;list-style:none;>- B</li>
    <li style="margin:0;padding:0;list-style:none;>- C</li>
</ul>
|-style="background:#fffff4;"
|<pre style="background:none;border:none;">
# 1. A
# 2. B
# 3. C
</pre>
|
# 1. A
# 2. B
# 3. C
|<ol style="margin:0;padding:0;line-height:normal;">
    <li style="margin:0;padding:0;list-style:none;>1. A</li>
    <li style="margin:0;padding:0;list-style:none;>2. B</li>
    <li style="margin:0;padding:0;list-style:none;>3. C</li>
</ol>
|-style="background:#fffff4;"
|<pre style="background:none;border:none;">
;'''A term''': A detail
;'''B term''': B detail
;'''C term''': C detail
</pre>
|
;'''A term''': A detail
;'''B term''': B detail
;'''C term''': C detail
|<dl style="line-height:normal;">
<dt><b>A term</b></dt>
  <dd style="margin-inline-start:0;">A detail</dd>
<dt><b>B term</b></dt>
  <dd style="margin-inline-start:0;">B detail</dd>
<dt><b>C term</b></dt>
  <dd style="margin-inline-start:0;">C detail</dd>
</dl>
|-style="background:#f4fff4;"
!rowspan="3" style="writing-mode:vertical-rl;transform:rotate(180deg);"|Static markers + line breaks²
|<pre style="background:none;border:none;">


Workarounds are to write out the numbers by hand, with either paragraph breaks or <nowiki><br/></nowiki> tags between them:
- A


<pre>
- B
1. Draw


2. Play
- C


3. Discard
</pre>
</pre>
|
- A


<pre>
- B
1. Draw<br/>
2. Play<br/>
3. Discard
</pre>


===Blockquote===
- C
|<p style="margin:8px 0;padding:0;line-height:normal;">- A</p>
<p style="margin:8px 0;padding:0;line-height:normal;">- B</p>
<p style="margin:8px 0;padding:0;line-height:normal;">- C</p>
|-style="background:#f4fff4;"
|<pre style="background:none;border:none;">


The <code><nowiki><blockquote></nowiki></code> tag displays a block of text indented with a grey margin, on the wiki. It displays as a completely regular and unindented paragraph on the BGA view.
1. A


===Definition list===
2. B


<code>;Term: Definition</code> wiki markup lists don't bold the terms or indent the definitions in the game view, making them much harder to read.
3. C


A workaround is to additionally bold each term, e.g.:
<pre>
;'''Pair of boats''': take another turn<br/>
;'''Pair of fish''': draw a card from the deck<br/>
;'''Shark + swimmer''': steal a random card from another player's hand
</pre>
</pre>
|
1. A


Which displays in-game as:
2. B


'''Pair of boats''': take another turn<br/>
3. C
'''Pair of fish''': draw a card from the deck<br/>
|<p style="margin:8px 0;padding:0;line-height:normal;">1. A</p>
'''Shark + swimmer''': steal a random card from another player's hand
<p style="margin:8px 0;padding:0;line-height:normal;">2. B</p>
<p style="margin:8px 0;padding:0;line-height:normal;">3. C</p>
|-style="background:#f4fff4;"
|<pre style="background:none;border:none;">


===Headings===
'''A term''': A detail


* Level one L1 headings <code>=</code> are the title of the page i.e. Gamehelp[name] / Tips_[name].
'''B term''': B detail


When viewed during a game:
'''C term''': C detail
* Level two L2 headings '''<code>==</code>''' have a box around it on the BGA view, in uppercase.
* Level three L3 headings '''<code>===</code>''' are formatted identically and indistinguishable from level two headings, except that it slightly overlaps the text above it.
* Level four L4 headings '''<code>====</code>''' are displayed within the box of the level three heading, in bold.
* Level five L5 headings '''<code>=====</code>''' are in regular (non-bold) font.


{{infoBoxes
</pre>
|title1=In-game heading example
|
|body1=
In-game heading example seven wonders
* One L2 heading "End of game scoring"
* Four L3 headings for the different scoring categories
* L3 heading "Scientific structures" contains L4 heading


[[File:Ruleset heading example.png|thumb|center]]
'''A term''': A detail


|title2=Game panel heading example
'''B term''': B detail
|body2=
Game panel heading example seven wonders
* All text appears in a single box
* L2, L3, L4 headings in bold font, original font case
* L2 headings are slightly larger than L3/L4


[[File:Ruleset heading example about.png|thumb|center]]
'''C term''': C detail
}}


People seem to be independently realising this and writing rules using a level two heading ("==") for each section, and a level four heading '''<code>====</code>''' for its subheadings, skipping level three entirely. I've also seen rule writers add extra blank lines to the ends of each section (e.g. at [[Gamehelpturingmachine]]), which may be to avoid the headings overlapping the text.
|<p style="margin:8px 0;padding:0;line-height:normal;"><b>A term</b>: A detail</p>
<p style="margin:8px 0;padding:0;line-height:normal;"><b>B term</b>: B detail</p>
<p style="margin:8px 0;padding:0;line-height:normal;"><b>C term</b>: C detail</p>
|}
</div>
¹Dynamic markers generate HTML list structure.


<small>
²Without dynamic markers, <code><nowiki><p></nowiki></code>'''[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p paragraphs]'''<code><nowiki></p></nowiki></code> are generated which require line breaks before and after the "list" to prevent merging into surrounding paragraphs.
Relevant bug reports:
* [https://boardgamearena.com/bug?id=86652 Ruleset h2/h3 headings not being nested]
* [https://boardgamearena.com/bug?id=71867 Rule section headings overlapping the text]
</small>


===Links===
<div style="width:100%;overflow:scroll;">
{|class="wikitable" style="width:max-content;"
|+Wiki vs '''[https://BoardGameArena.com BoardGameArena.com]''' list formatting
!
!Wiki text
!Wiki
!BGA
|-style="background:#f4ffff;"
!rowspan="3" style="writing-mode:vertical-rl;transform:rotate(180deg);"|HTML + CSS
|<pre style="background:none;border:none;">
<ul class="bulletlist" style="
    margin:1em 0;
    padding-inline-start:40px;
">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
</pre>
|<ul class"bulletlist" style="
    margin:1em 0;
    padding-inline-start:40px;
">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
|<ul class"bulletlist" style="
    margin:1em 0;
    padding-inline-start:40px;
    line-height:normal;
">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
|-style="background:#f4ffff;"
|<pre style="background:none;border:none;">
<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>
</pre>
|<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 style="
    margin:1em 0;
    padding-inline-start:40px;
    line-height:normal;
">
    <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>
|-style="background:#f4ffff;"
|<pre style="background:none;border:none;">
<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>
</pre>
|<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 style="line-height:normal;">
<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>
|}
</div>


https://BoardGameArena.com/doc is the "main page" (root) of the wiki (doc.BoardGameArena.com) on https://BoardGameArena.com (which redirects to the "Help" page index).
* <code><nowiki><ul></nowiki></code>'''[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul unordered list]'''<code><nowiki></ul></nowiki></code>
* <code><nowiki><ol></nowiki></code>'''[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol ordered list]'''<code><nowiki></ol></nowiki></code>
* <code><nowiki><li></nowiki></code>'''[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li list item]'''<code><nowiki></li></nowiki></code>
* <code><nowiki><dl></nowiki></code>'''[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl description list]'''<code><nowiki></dl></nowiki></code>
* <code><nowiki><dt></nowiki></code>'''[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt description term]'''<code><nowiki></dt></nowiki></code>
* <code><nowiki><dd></nowiki></code>'''[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd description details]'''<code><nowiki></dd></nowiki></code>


As of 2023-10, '''anchor # links do not work''' outside of the wiki (doc.BoardGameArena.com) because anchor links are not preserved on https://BoardGameArena.com.
{{infoBox|state=collapsed|color=#0a0
e.g. <code><nowiki>[[#this_is_an_anchor_link]]</nowiki></code> will resolve to <code><nowiki>https://BoardGameArena.com/doc/#this_is_an_anchor_link</nowiki></code> where there is no anchor and does not give the expected information.
|title=<code>common.css</code> rules
|body=<pre style="background:none;border:none;">
ul.bulletlist li {
    list-style: disc none inside
}


External links and links to wiki ''pages'' are resolved correctly e.g. <code><nowiki>[[Gamehelpchess]]</nowiki></code> is resolved to <code><nowiki>https://BoardGameArena.com/doc/Gamehelpchess</nowiki></code>, however, in-game these links are not helpful as they navigate the user away from the game.
.wikicontent p {
    margin-bottom: 8px;
    margin-top: 8px
}
</pre>
}}


<small>
==Headings==
Relevant bug reports:
* [https://boardgamearena.com/bug?id=88292 Section links don't work in the BGA view of wiki rules pages]
</small>


===Tables===
Level 1 (h1) headings are the title of the page e.g. <code>= Wiki formatting =</code>, <code>= Gamehelp[name] =</code>, <code>= Tips_[name] =</code>.


Table borders are stripped by the BGA display. They can be added back by adding a fixed width <code>border=</code> to the image markup, e.g.:
===Issues===


<pre>{| class="wikitable" style="width:auto;text-align:center;" border="2"
# In-game h2 and h3 headings are visually indistinguishable.
|-
# In-game h3 headings overlap text from the previous section.
!0-90
# h5 headings and below are visually indistinguishable from body text.
|⭐
# Inconsistency between in-game and game panel headings.
|-
!91-110
|⭐⭐
|-
!111-125
|⭐⭐⭐
|}</pre>


will display as:
====Bug reports====


{| class="wikitable" style="width:auto;text-align:center;" border="2"
* '''[https://boardgamearena.com/bug?id=86652 h2/h3 headings not nested]'''
|-
* '''[https://boardgamearena.com/bug?id=71867 Section headings overlapping text]'''
!0-90
|⭐
|-
!91-110
|⭐⭐
|-
!111-125
|⭐⭐⭐
|}


Tables default to 100% width on the BGA view: if you want to override that, you can do so by adding something like <code>style="width:10%"</code> after the <code>border="2"</code>.
===Workarounds===


<code>style="width:auto;text-align:center;"</code>:
Since in-game h3 headings became indistinguishable from h2 headings:
# <code>width:auto;</code> fits column width to the contents
* Change h3 to h4 headings.
# <code>text-align:center;</code> centres the contents
* Use additional line breaks before h3 headings.


===Images===
{|class="wikitable" style="width:max-content;"
|+Wiki vs '''[https://BoardGameArena.com BoardGameArena.com]''' heading formatting
!
!Wiki text
!Wiki
!BGA game panel
!BGA in-game
|-style="background:#fff0;"
!h2
|<pre style="background:none;border:none;">
* List item


'''[[Special:Upload|Upload an image]]'''
== Example h2 heading ==


Attempting to specify an image size in image markup (e.g. <code><nowiki>[[File:Marrakech example.jpg|300px]]</nowiki></code>) will work in the wiki view, but will cause the image to appear blank in the BGA view (as it tries to display a resized image which does not exist in the directory it's referencing).
* List item
</pre>
|
* List item
<div style="font-family:'Linux Libertine','Georgia','Times',serif;line-height:1.3;margin-top:1em;margin-bottom:0.25em;font-size:1.5em;border-bottom:1px solid #a2a9b1;">Example h2 heading</div>
* List item
|style="color:#000;background-color:rgba(211,211,211);padding:0.5rem;"|<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
<div style="display:block;font-family:Roboto,Arial,sans-serif;margin-top:10px;margin-bottom:10px;padding:0;line-height:normal;font-size:18px;font-weight:700;margin-block-start:10px;margin-block-end:10px;">Example h2 heading</div>
<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
|style="color:#000;background-color:#FAF4EE;padding:12px;"|<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
<div style="display:block;font-family:Roboto,Arial,sans-serif;margin-top:12px;margin:-12px -12px 20px;padding:12px;line-height:normal;font-size:14px;font-weight:700;margin-block-start:12px;margin-block-end:20px;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;text-transform:uppercase;">Example h2 heading</div>
<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
|-style="background:#fff0;"
!h3
|<pre style="background:none;border:none;">
* List item


A workaround is to display images at the default size (meaning that they must also be uploaded at the size you want them to appear), e.g.:
=== Example h3 heading ===


<pre>[[File:Marrakech example.jpg]]</pre>
* List item
</pre>
|
* List item
<div style="display:block;font-family:sans-serif;line-height:1.6;margin-top:0.3em;margin-bottom:0;padding-top:0.5em;font-size:1.2em;font-weight:bold;">Example h3 heading</div>
* List item
|style="color:#000;background-color:rgba(211,211,211);padding:0.5rem;"|<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
<div style="display:block;font-family:Roboto,Arial,sans-serif;margin-top:5px;margin-bottom:5px;padding:0;line-height:normal;font-size:16px;font-weight:700;margin-block-start:5px;margin-block-end:5px;">Example h3 heading</div>
<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
|style="color:#000;background-color:#FAF4EE;padding:12px;"|<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
<div style="display:block;font-family:Roboto,Arial,sans-serif;margin:-12px -12px 20px;padding:12px;line-height:normal;font-size:14px;font-weight:700;margin-block-start:-12px;margin-block-end:20px;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;text-transform:uppercase;">Example h3 heading</div>
<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
|-style="background:#fff0;"
!h4
|<pre style="background:none;border:none;">
* List item


It's also possible to add rollover text if desired:
==== Example h4 heading ====


<pre>[[File:Marrakech example.jpg|Example move]]</pre>
* List item
</pre>
|
* List item
<div style="display:block;font-family:sans-serif;line-height:1.6;margin-top:0.3em;margin-bottom:0;padding-top:0.5em;font-size:14px;font-weight:bold;margin-block-start:4.2px;margin-block-end:0;">Example h4 heading</div>
* List item
|style="color:#000;background-color:rgba(211,211,211);padding:0.5rem;"|<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
<div style="display:block;font-family:Roboto,Arial,sans-serif;margin-top:20px;margin-bottom:5px;padding:0;line-height:normal;font-size:16px;font-weight:700;margin-block-start:20px;margin-block-end:5px;">Example h4 heading</div>
<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
|style="color:#000;background-color:#FAF4EE;padding:12px;"|<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
<div style="display:block;font-family:Roboto,Arial,sans-serif;margin-top:20px;margin-bottom:5px;padding:0;line-height:normal;font-size:16px;font-weight:700;margin-block-start:20px;margin-block-end:5px;">Example h4 heading</div>
<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
|-style="background:#fff0;"
!h5
|<pre style="background:none;border:none;">
* List item


Also, external links will also work within BGA if you want the image to link to a URL:
===== Example h5 heading =====


<pre>[[File:Versions.png|link=https://lumberjacks-studio.com/en/project/trek-12_en/]]</pre>
* List item
</pre>
|
* List item
<div style="display:block;font-family:sans-serif;line-height:1.6;margin-top:0.3em;margin-bottom:0;padding-top:0.5em;font-size:14px;font-weight:bold;margin-block-start:0;margin-block-end:0;">Example h5 heading</div>
* List item
|style="color:#000;background-color:rgba(211,211,211);padding:0.5rem;"|<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
<div style="display:block;font-family:Roboto,Arial,sans-serif;margin:0;padding:0;line-height:normal;font-size:16px;font-weight:400;margin-block-start:0;margin-block-end:0;">Example h5 heading</div>
<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
|style="color:#000;background-color:#FAF4EE;padding:12px;"|<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
<div style="display:block;font-family:Roboto,Arial,sans-serif;margin:0;padding:0;line-height:normal;font-size:16px;font-weight:400;margin-block-start:0;margin-block-end:0;">Example h5 heading</div>
<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
|}


==Custom elements==
{{infoBox|state=collapsed|color=rgba(211,211,211)|titleColor=#202122
|title=<code>common.css</code> rules
|body=<pre style="background:none;border:none;">
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*/
}


===Infoboxes===
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;
}
</pre>
}}


'''[[:Template:InfoBox]]''' is an aesthetically pleasing, customisable container that is responsive to screen size.
{{infoBox|state=collapsed|color=#FAF4EE|titleColor=#202122
|title=<code>gameserver.css</code> rules
|body=<pre style="background:none;border:none;">
.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;
}
</pre>
}}


{{InfoBox|title=Example|body=Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.}}
{{infoBoxes
|title1=In-game heading example
|body1=
In-game content appears in multiple boxes:
[[File:Ruleset heading example.png|thumb|center]]


===Icons===
|title2=Game panel heading example
|body2=
Game panel content appears in a single box:
[[File:Ruleset heading example about.png|thumb|center]]
}}


====Templates====
==Links==


* [[Template:Player]] <code><nowiki>{{player|=2}}</nowiki></code> {{player|=2}}
'''[https://www.mediawiki.org/wiki/Help:Links Help:Links]'''


* [[Template:Hand]] <code><nowiki>{{hand|=4}}</nowiki></code> {{hand|=4}}
* The '''[[Main_Page]]''' (root) of this wiki redirects to '''[[Help]]'''.
* '''[https://BoardGameArena.com/doc BoardGameArena.com/doc]''' displays the '''[[Help]]''' index of games.


====Keywords====
===Issues===


Some game rules, including [[Gamehelpjumpdrive]] and [[Gamehelpspacestationphoenix]], use keywords such as [METAL] and [PLANET].
# Anchor '''links to section headings <code>#</code>''' do not work outside of the wiki ('''doc.'''BoardGameArena.com) because the URL is resolved to <code>/doc</code> instead of the current page (<code>/</code>).
#: i.e. <code><nowiki>[[#Section_heading_link]]</nowiki></code> ⇨ <code><nowiki>https://BoardGameArena.com/doc/#Section_heading_link</nowiki></code> where there is no section heading with <code>id="Section_heading_link"</code> and does not give the expected information¹.
# In-game links navigate the user away from the game.


When a player reads these rules during a BGA game, these tags get converted into icons. When the player reads the rules on the game panel page or the wiki, they remain as text.
====Bug reports====


This feature seems to be undocumented, and [https://boardgamearena.com/forum/viewtopic.php?p=121439#p121439 has been confirmed] as a custom option that a developer can choose to create for a game.
* ¹'''[https://boardgamearena.com/bug?id=88292 Section links don't work]'''


===Game pieces===
===Workarounds===


'''[[:Category:GamePieceTemplates]]'''
# Remove links that do not function as expected.
# Replace <code><nowiki>[[#Section_heading_link]]</nowiki></code> with <code><nowiki><a href="#Section_heading_link">Section heading link</a></nowiki></code>.
#: Note: each heading has a unique id appended with a number as necessary.
#: e.g. [[#Issues_3]] links to Links Issues and [[#Issues_4]] links to Images Issues.
# Replace external links with <code><nowiki><a href="https://example.com" target="_blank">External link text</a></nowiki></code>. <code>target="_blank"</code> opens the external link in a new tab.


Generic game pieces including:
==Images==
* Dice
* Go stones
* Reversi tokens
* Chess pieces
* Draughts
* [[Template:Hclue|Hanabi clue token]]


====Dice====
'''[https://www.mediawiki.org/wiki/Help:Images Help:Images]'''


Six-sided dice can be displayed using a template, e.g. <code><nowiki>{{whiteDie|=6}}</nowiki></code>.
===Issues===


See '''[[Gamehelpdudo|GameHelpDudo]]''' for examples.
# Resized images do not display on '''[https://BoardGameArena.com BoardGameArena.com]'''.
#: e.g. <code><nowiki>[[File:Marrakech_example.jpg</nowiki>'''|300px'''<nowiki>]]</nowiki></code>) because the ''resized'' image does not exist in the referenced directory.


Dice are available in four colours: whiteDie, yellowDie, orangeDie and blackDie:
===Workarounds===


{{whiteDie|=1}}
# '''[[Special:Upload|Upload]]''' images with the size it will appear: <code><nowiki>[[File:Marrakech_example.jpg]]</nowiki></code>
{{yellowDie|=2}}
{{orangeDie|=3}}
{{blackDie|=4}}


====Meeples====
===Tips===


Meeple icons can be displayed with e.g. <code><nowiki>{{meeple|red}}</nowiki></code> for {{meeple|red}}
# Optionally include rollover text <code><nowiki>[[File:Marrakech_example.jpg</nowiki>'''|Example move'''<nowiki>]]</nowiki></code>
# Optionally include a link <code><nowiki>[[File:Versions.png</nowiki>'''|link=https://lumberjacks-studio.com/en/project/trek-12_en/'''<nowiki>]]</nowiki></code>


Available colours are currently red, orange, yellow, green, blue, purple, black, white and grey.
==Tables==


===Playing cards===
'''[https://www.mediawiki.org/wiki/Help:Tables Help:Tables]'''


'''[[:Category:Card_templates]]'''
===Issues===


[[:Template:Card]] can be used to display playing card icons.
# <code>width: 98%;</code> stretches tables across the screen on '''[https://BoardGameArena.com BoardGameArena.com]'''.
# Borders do not display on '''[https://BoardGameArena.com BoardGameArena.com]'''.


{|class="wikitable" style="text-align:center;"
{{infoBox|state=collapsed|color=#a00
|+Playing card template examples for a BGA wiki page
|title=<code>common.css</code> rules
!Type
|body=<pre style="background:none;border:none;">
|<code><nowiki>{{club}}</nowiki></code>
.wikicontent table {
|<code><nowiki>{{spade}}</nowiki></code>
    border-collapse: collapse;
|<code><nowiki>{{heart}}</nowiki></code>
    margin-left: 5px;
|<code><nowiki>{{diamond}}</nowiki></code>
    margin-top: 5px;
|<code><nowiki>{{cardBack}}</nowiki></code>
    width: 98%;
|<code><nowiki>{{card|=A}}</nowiki></code>
}
|<code><nowiki>{{club|=A}}</nowiki></code>
table {
|<code><nowiki>{{club|=A|colour=green}}</nowiki></code>
    border-collapse: collapse;
|-
    border-spacing: 0;
!Result
}
|{{club}}
caption, th {
|{{spade}}
    text-align: left;
|{{heart}}
}
|{{diamond}}
address, caption, cite, code, dfn, em, strong, th, var {
|{{cardBack}}
    font-style: normal;
|{{card|=A}}
    font-weight: 400;
|{{club|=A}}
}
|{{club|=A|colour=green}}
.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;
}
</pre>
}}


[[:Template:Cardholder]] can display suitless cards (designed for [[Gamehelphanabi|GameHelpHanabi]]) in a "holder", with "clue" notes. See the linked template for further documentation.
===Workarounds===


===Game boards===
# <code>style="width:auto;"</code> fits column width to the contents.
# <code>border="2"</code> creates table cell borders.
# Replace with '''[https://developer.mozilla.org/en-US/docs/Web/HTML HTML]''' + '''[https://developer.mozilla.org/en-US/docs/Web/CSS/grid CSS grid]'''.


'''[[:Category:GameBoardTemplates]]'''
{|class="wikitable" style="width:max-content; min-width:100%;"
 
|+Wiki vs '''[https://BoardGameArena.com BoardGameArena.com]''' table formatting
There are a few customisable game boards available:
!
* [[:Template:Chessboard]]
!Wiki text
* [[:Template:Goboard9]]
!Wiki
* [[:Template:Quoridorboard]]
!BGA
|-style="background:#fff0;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"|Raw wikitable
|<pre style="background:none;border:none;">
{|class="wikitable"
|+Caption
!0-90
|⭐
|-
!91-110
|⭐⭐
|-
!111-125
|⭐⭐⭐
|}
</pre>
|
{|class="wikitable"
|+Caption
!0-90
|⭐
|-
!91-110
|⭐⭐
|-
!111-125
|⭐⭐⭐
|}
|
{|style="margin-left:5px; margin-top:5px; border-collapse:collapse; padding:5px; width:98%; text-align:center; line-height:normal; font-weight:400; font-style:normal; font-size:16px; color:#000;"
|+style="text-align:left;"|Caption
!style="margin:0;padding:5px;font-weight:400;"|0-90
|style="margin:0;padding:5px;font-weight:400;"|⭐
|-
!style="margin:0;padding:5px;font-weight:400;"|91-110
|style="margin:0;padding:5px;font-weight:400;"|⭐⭐
|-
!style="margin:0;padding:5px;font-weight:400;"|111-125
|style="margin:0;padding:5px;font-weight:400;"|⭐⭐⭐
|}
|-style="background:#fff0;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"|<code>width:auto;</code> <code>border="2"</code>
|style="max-width:max-content;"|<pre style="background:none;border:none;">
{|class="wikitable" style="width:auto;" border="2"
|+Caption
!0-90
|⭐
|-
!91-110
|⭐⭐
|-
!111-125
|⭐⭐⭐
|}
</pre>
|
{|class="wikitable" style="width:auto;" border="2"
|+Caption
!0-90
|⭐
|-
!91-110
|⭐⭐
|-
!111-125
|⭐⭐⭐
|}
|
{|style="margin-left:5px; margin-top:5px; border-collapse:collapse; padding:5px; width:auto; text-align:center; line-height:normal; font-weight:400; font-style:normal; font-size:16px; color:#000;" border="2"
|+style="text-align:left;"|Caption
!style="margin:0;padding:5px;font-weight:400;"|0-90
|style="margin:0;padding:5px;font-weight:400;"|⭐
|-
!style="margin:0;padding:5px;font-weight:400;"|91-110
|style="margin:0;padding:5px;font-weight:400;"|⭐⭐
|-
!style="margin:0;padding:5px;font-weight:400;"|111-125
|style="margin:0;padding:5px;font-weight:400;"|⭐⭐⭐
|}
|}


===Option grids===
===Option grids===


Where a game has multiple interdependent options, it can be useful to have a visual option grid.
Option grids can help visualise multiple interdependent options.
 
Where inflexible wiki text tables fall short, HTML + '''[https://developer.mozilla.org/en-US/docs/Web/CSS/grid CSS grid]''' is responsive to screen size e.g. '''[[Gamehelppente|GameHelpPente]]''':
Not for the faint-hearted, but with a lot of inline css, it is possible to create a nice aesthetic and intuitive grid that is responsive to screen size. For example for '''[[Gamehelppente|GameHelpPente]]''':


<div style="display:flex;flex-flow:row wrap;max-width:max-content;border:0.1rem solid #aaa;">
<div style="display:flex;flex-flow:row wrap;max-width:max-content;border:0.1rem solid #aaa;">
Line 330: Line 756:
</div>
</div>


<pre>
{{infoBox|maxWidth=1000|state=collapsed|color=#00a
|title=HTML + inline CSS
|body=<pre style="background:none;border:none;font-size:smaller;white-space:pre;overflow:scroll;">
<div style="display:flex;flex-flow:row wrap;max-width:max-content;border:0.1rem solid #aaa;">
<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 #f0f;background:#fef;padding:0.5rem;width:max-content;">Training mode only</div>
Line 367: Line 795:
</div>
</div>
</pre>
</pre>
}}
{{infoBox|maxWidth=1000|state=collapsed|color=#a00
|title=Unresponsive wiki text equivalent
|body=
<pre style="background:none;border:none;">
{|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
|}
</pre>
}}
==Blockquote==
===Issues===
# '''Margins''' and '''padding''' are removed on '''[https://BoardGameArena.com BoardGameArena.com]'''.
# No left '''border'''.
{{infoBox|state=collapsed|color=#a00
|title=<code>common.css</code> rules
|body=<pre style="background:none;border:none;">
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*/
}
</pre>
}}
===Workarounds===
# Replace with '''[https://developer.mozilla.org/en-US/docs/Web/HTML HTML]''' + '''[https://developer.mozilla.org/en-US/docs/Web/CSS CSS]'''.
{|class="wikitable" style="width:max-content;"
|+Wiki vs '''[https://BoardGameArena.com BoardGameArena.com]''' <code><nowiki><blockquote></nowiki></code> formatting
!
!Wiki text
!Wiki
!BGA
|-style="background:#f4ffff;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"|HTML + CSS
|<pre style="background:none;border:none;">
<blockquote style="
    margin:1em 0;
    margin-inline:40px;
    padding:8px 32px;
    border-left:4px solid #eaecf0;
">
This is a <blockquote>
</blockquote>
</pre>
|<blockquote style="
    margin:1em 0;
    margin-inline:40px;
    padding:8px 32px;
    border-left:4px solid #eaecf0;
">
This is a
<code><nowiki><blockquote></nowiki></code>
</blockquote>
|<blockquote>
This is a
<code><nowiki><blockquote></nowiki></code>
</blockquote>
|}
==Wiki templates==
'''[https://www.mediawiki.org/wiki/Help:Templates Help:Templates]'''
====Keyword icons ====
One game developer wrote a [https://boardgamearena.com/forum/viewtopic.php?p=121439#p121439 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:
# '''[[Special:Upload|Upload]]''' any image(s).
# Navigate to [https://en.doc.boardgamearena.com/Template:YourNewTemplateName '''https://en.doc.boardgamearena.com/Template:''YourNewTemplateName'''''] (replacing <code>YourNewTemplateName</code>), write the template and save.
# Insert the template on any wiki page using double curly braces <code><nowiki>{{YourNewTemplateName}}</nowiki></code>.
{{infoBox|color=green
|title=<code><nowiki>{{gameIcon}}</nowiki></code> example
|body=
Templates can also use other templates e.g. use the generic '''[[:Template:GameIcon]]''' to create game-specific icons for '''[[Gamehelpspacestationphoenix|Space Station Phoenix]]''':
{{gameIcon
|tooltip=Farm ship
|imageFileName=SpaceStationPhoenixIcons.png
|width=85
|height=50
|x=500
|y=50
}}
<pre style="background:none;border:none;">
{{gameIcon
|tooltip=Farm ship
|imageFileName=SpaceStationPhoenixIcons.png
|width=85
|height=50
|x=500
|y=50
}}<nowiki><</nowiki>noinclude<nowiki>>
[[Category:SpaceStationPhoenixIcons]]
</</nowiki>noinclude<nowiki>></nowiki>
</pre>
}}
===[[:Template:InfoBox]]===
Customisable container(s) responsive to screen size.
{{InfoBox|title=Example|body=Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.}}
===[[:Category:PlayerBoardTemplates]]===
{|class="wikitable" style="text-align:center;"
|+Player board icons
!Wiki text
!Result
|-
|<code><nowiki>{{player|=2}}</nowiki></code>
|{{player|=2}}
|-
|<code><nowiki>{{hand|=4}}</nowiki></code>
|{{hand|=4}}
|}
===[[:Category:GamePieceTemplates]]===
<div style="display:flex;flex-wrap:wrap;align-items:start;gap:0.5rem">
{|class="wikitable" style="text-align:center;"
|+Cylinder tokens
!Wiki text
!Result
|-
|<code><nowiki>{{redCylinder}}</nowiki></code>
|{{redCylinder}}
|-
|<code><nowiki>{{orangeCylinder}}</nowiki></code>
|{{orangeCylinder}}
|-
|<code><nowiki>{{yellowCylinder}}</nowiki></code>
|{{yellowCylinder}}
|-
|<code><nowiki>{{greenCylinder}}</nowiki></code>
|{{greenCylinder}}
|-
|<code><nowiki>{{blueCylinder}}</nowiki></code>
|{{blueCylinder}}
|-
|<code><nowiki>{{purpleCylinder}}</nowiki></code>
|{{purpleCylinder}}
|-
|<code><nowiki>{{whiteCylinder}}</nowiki></code>
|{{whiteCylinder}}
|-
|<code><nowiki>{{greyCylinder}}</nowiki></code>
|{{greyCylinder}}
|-
|<code><nowiki>{{blackCylinder}}</nowiki></code>
|{{blackCylinder}}
|-
|<code><nowiki>{{creamCylinder}}</nowiki></code>
|{{creamCylinder}}
|}
{|class="wikitable" style="text-align:center;"
|+Meeples
!Wiki text
!Result
|-
|<code><nowiki>{{meeple|red}}</nowiki></code>
|{{meeple|red}}
|-
|<code><nowiki>{{meeple|orange}}</nowiki></code>
|{{meeple|orange}}
|-
|<code><nowiki>{{meeple|yellow}}</nowiki></code>
|{{meeple|yellow}}
|-
|<code><nowiki>{{meeple|green}}</nowiki></code>
|{{meeple|green}}
|-
|<code><nowiki>{{meeple|blue}}</nowiki></code>
|{{meeple|blue}}
|-
|<code><nowiki>{{meeple|purple}}</nowiki></code>
|{{meeple|purple}}
|-
|<code><nowiki>{{meeple|white}}</nowiki></code>
|{{meeple|white}}
|-
|<code><nowiki>{{meeple|grey}}</nowiki></code>
|{{meeple|grey}}
|-
|<code><nowiki>{{meeple|black}}</nowiki></code>
|{{meeple|black}}
|}
{|class="wikitable" style="text-align:center;"
|+Dice
!Wiki text
!Result
|-
|<code><nowiki>{{whiteDie|=1}}</nowiki></code>
|{{whiteDie|=1}}
|-
|<code><nowiki>{{yellowDie|=2}}</nowiki></code>
|{{yellowDie|=2}}
|-
|<code><nowiki>{{orangeDie|=3}}</nowiki></code>
|{{orangeDie|=3}}
|-
|<code><nowiki>{{blackDie|=4}}</nowiki></code>
|{{blackDie|=4}}
|}
{|class="wikitable" style="text-align:center;"
|+Miscellaneous tokens
!Wiki text
!Result
|-
|<code><nowiki>{{blackStone}}</nowiki></code>
|{{blackStone}}
|-
|<code><nowiki>{{whiteStone}}</nowiki></code>
|{{whiteStone}}
|-
|<code><nowiki>{{blackReversiToken}}</nowiki></code>
|{{blackReversiToken}}
|-
|<code><nowiki>{{whiteReversiToken}}</nowiki></code>
|{{whiteReversiToken}}
|-
|<code><nowiki>{{blackDoubleCylinder}}</nowiki></code>
|{{blackDoubleCylinder}}
|-
|<code><nowiki>{{whiteDoubleCylinder}}</nowiki></code>
|{{whiteDoubleCylinder}}
|-
|<code><nowiki>{{Hclue|=8}}</nowiki></code>
|{{Hclue|=8}}
|}
</div>
===[[:Category:Card_templates]]===
<div style="display:flex;flex-wrap:wrap;align-items:start;gap:0.5rem">
{|class="wikitable" style="text-align:center;"
|+[[:Template:Card]]
!Wiki text
!Result
|-
|<code><nowiki>{{card|=A}}</nowiki></code>
|{{card|=A}}
|-
|<code><nowiki>{{club|=K}}</nowiki></code>
|{{club|=K}}
|-
|<code><nowiki>{{spade|=Q}}</nowiki></code>
|{{spade|=Q}}
|-
|<code><nowiki>{{heart|=J}}</nowiki></code>
|{{heart|=J}}
|-
|<code><nowiki>{{diamond|=10}}</nowiki></code>
|{{diamond|=10}}
|-
|<code><nowiki>{{cardBack}}</nowiki></code>
|{{cardBack}}
|-
|<code><nowiki>{{club|colour=green}}</nowiki></code>
|{{club|colour=green}}
|}
{|class="wikitable" style="width:min-content;"
|+[[:Template:Cardholder]]
!Wiki text
!Result
|-
|<code><nowiki>{{cardholder4
|card1=1
|card1Colour={{r}}
|clue1=1
|clue1Colour={{r}}
}}</nowiki></code>
|{{cardholder4
|card1=1
|card1Colour={{r}}
|clue1=1
|clue1Colour={{r}}
}}<br>
|-
|<code><nowiki>{{cardholder|player=B |card1=1}}</nowiki></code>
|{{cardholder |player=B |card1=1}}<br>
|}
{|class="wikitable" style="text-align:center;"
|+Hanabi cards
!Wiki text
!Result
|-
|<code><nowiki>{{HCardr|=1}}</nowiki></code>
|{{HCardr|=1}}
|-
|<code><nowiki>{{HCardy|=2}}</nowiki></code>
|{{HCardy|=2}}
|-
|<code><nowiki>{{HCardg|=3}}</nowiki></code>
|{{HCardg|=3}}
|-
|<code><nowiki>{{HCardb|=4}}</nowiki></code>
|{{HCardb|=4}}
|-
|<code><nowiki>{{HCardw|=5}}</nowiki></code>
|{{HCardw|=5}}
|-
|<code><nowiki>{{HCardm|=5}}</nowiki></code>
|{{HCardm|=5}}
|-
|<code><nowiki>{{HCardk|=5}}</nowiki></code>
|{{HCardk|=5}}
|}
</div>
===[[:Category:GameIconTemplates]]===
<div style="display:flex;flex-wrap:wrap;align-items:start;gap:0.5rem">
{|class="wikitable" style="text-align:center;"
|+[[:Category:JumpDriveIcons]]
!Wiki text
!Result
|-
|<code><nowiki>{{JumpDriveExplore|=1}}</nowiki></code>
|{{JumpDriveExplore|=1}}
|-
|<code><nowiki>{{JumpDriveDevelopment|=2}}</nowiki></code>
|{{JumpDriveDevelopment|=2}}
|-
|<code><nowiki>{{JumpDriveWorld|=3}}</nowiki></code>
|{{JumpDriveWorld|=3}}
|-
|<code><nowiki>{{JumpDriveMilitaryWorld|=3}}</nowiki></code>
|{{JumpDriveMilitaryWorld|=3}}
|-
|<code><nowiki>{{JumpDriveChromosome}}</nowiki></code>
|{{JumpDriveChromosome}}
|-
|<code><nowiki>{{JumpDriveMilitary}}</nowiki></code>
|{{JumpDriveMilitary}}
|-
|<code><nowiki>{{JumpDriveNovelty|=1}}</nowiki></code>
|{{JumpDriveNovelty|=1}}
|-
|<code><nowiki>{{JumpDriveRare|=2}}</nowiki></code>
|{{JumpDriveRare|=2}}
|-
|<code><nowiki>{{JumpDriveGenes|=3}}</nowiki></code>
|{{JumpDriveGenes|=3}}
|-
|<code><nowiki>{{JumpDriveAlien|=4}}</nowiki></code>
|{{JumpDriveAlien|=4}}
|}
{|class="wikitable" style="text-align:center;"
|+[[:Category:SpaceStationPhoenixIcons]]
!Wiki text
!Result
|-
|<code><nowiki>{{SSPGem|=1}}</nowiki></code>
|{{SSPGem|=1}}
|-
|<code><nowiki>{{SSPFood|=2}}</nowiki></code>
|{{SSPFood|=2}}
|-
|<code><nowiki>{{SSPMetal|=3}}</nowiki></code>
|{{SSPMetal|=3}}
|-
|<code><nowiki>{{SSPWater|=4}}</nowiki></code>
|{{SSPWater|=4}}
|-
|<code><nowiki>{{SSPHumanoid}}</nowiki></code>
|{{SSPHumanoid}}
|}
</div>
===[[:Category:GameBoardTemplates]]===
<div style="display:flex;flex-flow:row wrap;align-items:center;gap:0.5rem;">
<div style="display:flex;flex-flow:column wrap;align-items:center;">
'''[[:Template:Chessboard]]'''
<code><nowiki>{{Chessboard}}</nowiki></code>
{{Chessboard|squareSize=32}}
</div>
<div style="display:flex;flex-flow:column wrap;align-items:center;">
'''[[:Template:Goboard9]]'''
<code><nowiki>{{Goboard9}}</nowiki></code>
{{Goboard9|squareSize=26}}
</div>
<div style="display:flex;flex-flow:column wrap;align-items:center;">
'''[[:Template:Quoridorboard]]'''
<code><nowiki>{{Quoridorboard}}</nowiki></code>
{{Quoridorboard|squareSize=16}}
</div>
</div>

Revision as of 04:18, 3 November 2023

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 🙂

Help:Formatting

Lists

Help:Lists

Issues

Markers (bullets *, numbering #), margins and padding are removed on BoardGameArena.com.

common.css rules
li {
    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

  1. Use static markers (,-,1.).
  2. Replace with HTML + CSS.
Wiki vs BoardGameArena.com list formatting
Wiki text Wiki BGA
Dynamic markers¹ * # ;:
* A
* B
* C
  • A
  • B
  • C
  • A
  • B
  • C
# A
# B
# 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¹ + static markers
*- A
*- B
*- C
  • - A
  • - B
  • - C
  • - A
  • - B
  • - C
# 1. A
# 2. B
# 3. C
  1. 1. A
  2. 2. B
  3. 3. C
  1. 1. A
  2. 2. B
  3. 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
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 vs BoardGameArena.com list formatting
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>
  • A
  • B
  • C
  • A
  • B
  • C
<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>
  1. A
  2. B
  3. C
  1. A
  2. B
  3. C
<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>
A term
A detail
B term
B detail
C term
C detail
A term
A detail
B term
B detail
C term
C detail
common.css rules
ul.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

  1. In-game h2 and h3 headings are visually indistinguishable.
  2. In-game h3 headings overlap text from the previous section.
  3. h5 headings and below are visually indistinguishable from body text.
  4. 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 vs BoardGameArena.com heading formatting
Wiki text Wiki BGA game panel BGA in-game
h2
* List item

== Example h2 heading ==

* List item
  • List item
Example h2 heading
  • List item
  • List item
  • Example h2 heading
  • List item
  • List item
  • Example h2 heading
  • List item
  • h3
    * List item
    
    === Example h3 heading ===
    
    * List item
    
    • List item
    Example h3 heading
    • List item
  • List item
  • Example h3 heading
  • List item
  • List item
  • Example h3 heading
  • List item
  • h4
    * List item
    
    ==== Example h4 heading ====
    
    * List item
    
    • List item
    Example h4 heading
    • List item
  • List item
  • Example h4 heading
  • List item
  • List item
  • Example h4 heading
  • List item
  • h5
    * List item
    
    ===== Example h5 heading =====
    
    * List item
    
    • List item
    Example h5 heading
    • List item
  • List item
  • Example h5 heading
  • List item
  • List item
  • Example h5 heading
  • List item
  • common.css rules
    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*/
    }
    
    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;
    }
    
    In-game heading example
    In-game content appears in multiple boxes:
    Ruleset heading example.png
    Game panel heading example
    Game panel content appears in a single box:
    Ruleset heading example about.png

    Links

    Help:Links

    Issues

    1. Anchor links to section headings # do not work outside of the wiki (doc.BoardGameArena.com) because the URL is resolved to /doc instead of the current page (/).
      i.e. [[#Section_heading_link]]https://BoardGameArena.com/doc/#Section_heading_link where there is no section heading with id="Section_heading_link" and does not give the expected information¹.
    2. In-game links navigate the user away from the game.

    Bug reports

    Workarounds

    1. Remove links that do not function as expected.
    2. Replace [[#Section_heading_link]] with <a href="#Section_heading_link">Section heading link</a>.
      Note: each heading has a unique id appended with a number as necessary.
      e.g. #Issues_3 links to Links Issues and #Issues_4 links to Images Issues.
    3. Replace external links with <a href="https://example.com" target="_blank">External link text</a>. target="_blank" opens the external link in a new tab.

    Images

    Help:Images

    Issues

    1. 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.

    Workarounds

    1. Upload images with the size it will appear: [[File:Marrakech_example.jpg]]

    Tips

    1. Optionally include rollover text [[File:Marrakech_example.jpg|Example move]]
    2. Optionally include a link [[File:Versions.png|link=https://lumberjacks-studio.com/en/project/trek-12_en/]]

    Tables

    Help:Tables

    Issues

    1. width: 98%; stretches tables across the screen on BoardGameArena.com.
    2. 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

    1. style="width:auto;" fits column width to the contents.
    2. border="2" creates table cell borders.
    3. Replace with HTML + CSS grid.
    Wiki vs BoardGameArena.com table formatting
    Wiki text Wiki BGA
    Raw wikitable
    {|class="wikitable"
    |+Caption
    !0-90
    |⭐
    |-
    !91-110
    |⭐⭐
    |-
    !111-125
    |⭐⭐⭐
    |}
    
    Caption
    0-90
    91-110 ⭐⭐
    111-125 ⭐⭐⭐
    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
    |⭐⭐⭐
    |}
    
    Caption
    0-90
    91-110 ⭐⭐
    111-125 ⭐⭐⭐
    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:

    Training mode only
    Default
    Other
    # of players
    2
    3
    4
    Free-for-all
    Team
    All options win
    Align exactly 5 stones in a row
    Align exactly 4 stones in a row
    Overline win
    May align more than 5 stones in a row
    May align more than 4 stones in a row
    Capture win
    Make 5 captures
    Make 4 captures
    Capture three
    May capture two or three stones (Keryo Pente)
    Self-capture
    No effect: a stone may be placed in a capture position
    Self-capture: results in self-capture! (Poof Pente)
    Forbidden: a stone may not be placed in a capture position
    Overtime capture
    Break the line: may capture to break a winning line (Boat Pente)
    Capture the line: may capture an entire winning line
    Mixed capture
    Enabled: May capture stones of mixed colour
    Disabled: Captures of one colour only
    HTML + inline CSS
    <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>
    
    Unresponsive wiki text equivalent
    {|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

    1. Margins and padding are removed on BoardGameArena.com.
    2. No left border.
    common.css rules
    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*/
    }
    

    Workarounds

    1. Replace with HTML + CSS.
    Wiki vs BoardGameArena.com <blockquote> formatting
    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>
    

    This is a

    <blockquote>

    This is a

    <blockquote>

    Wiki templates

    Help: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:

    1. Upload any image(s).
    2. Navigate to https://en.doc.boardgamearena.com/Template:YourNewTemplateName (replacing YourNewTemplateName), write the template and save.
    3. Insert the template on any wiki page using double curly braces {{YourNewTemplateName}}.
    {{gameIcon}} example
    Templates can also use other templates e.g. use the generic Template:GameIcon to create game-specific icons for Space Station Phoenix:

    Farm ship

    {{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.

    Example
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Category:PlayerBoardTemplates

    Player board icons
    Wiki text Result
    {{player|=2}} players
    {{hand|=4}} cards in hand

    Category:GamePieceTemplates

    Cylinder tokens
    Wiki text Result
    {{redCylinder}} red token
    {{orangeCylinder}} orange token
    {{yellowCylinder}} yellow token
    {{greenCylinder}} green token
    {{blueCylinder}} blue token
    {{purpleCylinder}} purple token
    {{whiteCylinder}} white token
    {{greyCylinder}} grey token
    {{blackCylinder}} black token
    {{creamCylinder}} cream token
    Meeples
    Wiki text Result
    {{meeple|red}} red meeple
    {{meeple|orange}} orange meeple
    {{meeple|yellow}} yellow meeple
    {{meeple|green}} green meeple
    {{meeple|blue}} blue meeple
    {{meeple|purple}} purple meeple
    {{meeple|white}} white meeple
    {{meeple|grey}} grey meeple
    {{meeple|black}} black meeple
    Dice
    Wiki text Result
    {{whiteDie|=1}} white die
    {{yellowDie|=2}} yellow die
    {{orangeDie|=3}} orange die
    {{blackDie|=4}} black die
    Miscellaneous tokens
    Wiki text Result
    {{blackStone}}
    {{whiteStone}}
    {{blackReversiToken}}
    {{whiteReversiToken}}
    {{blackDoubleCylinder}}
    black token
    black token
    {{whiteDoubleCylinder}}
    white token
    white token
    {{Hclue|=8}} clue tokens

    Category:Card_templates

    Template:Card
    Wiki text Result
    {{card|=A}}    
    {{club|=K}} ​♣
    {{spade|=Q}} ​♠
    {{heart|=J}} ​♥
    {{diamond|=10}} ​♦
    {{cardBack}} 🟔
    {{club|colour=green}} ​♣
    Template:Cardholder
    Wiki text Result
    {{cardholder4 |card1=1 |card1Colour={{r}} |clue1=1 |clue1Colour={{r}} }}
    1
    1
      
      
      
    A 🡲

    {{cardholder|player=B |card1=1}} {{{1}}}
    Hanabi cards
    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

    Category:JumpDriveIcons
    Wiki text Result
    {{JumpDriveExplore|=1}} explore
    {{JumpDriveDevelopment|=2}} development
    {{JumpDriveWorld|=3}} non-military world
    {{JumpDriveMilitaryWorld|=3}} military world
    {{JumpDriveChromosome}} chromosome
    {{JumpDriveMilitary}} military
    {{JumpDriveNovelty|=1}} novelty
    {{JumpDriveRare|=2}} rare elements
    {{JumpDriveGenes|=3}} genes
    {{JumpDriveAlien|=4}} alien
    Category:SpaceStationPhoenixIcons
    Wiki text Result
    {{SSPGem|=1}} GEM1
    {{SSPFood|=2}} Food2
    {{SSPMetal|=3}} Metal3
    {{SSPWater|=4}} Water4
    {{SSPHumanoid}} Human

    Category:GameBoardTemplates

    Template:Chessboard

    {{Chessboard}}

    A
    B
    C
    D
    E
    F
    G
    H
    8
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    8
    7
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    7
    6
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    6
    5
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    5
    4
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    4
    3
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    3
    2
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    2
    1
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    1
    A
    B
    C
    D
    E
    F
    G
    H

    Template:Goboard9

    {{Goboard9}}

    A
    B
    C
    D
    E
    F
    G
    H
    J
    9
    9
    8
    8
    7
    7
    6
    6
    5
    5
    4
    4
    3
    3
    2
    2
    1
    1
    A
    B
    C
    D
    E
    F
    G
    H
    J

    Template:Quoridorboard

    {{Quoridorboard}}

    A
    B
    C
    D
    E
    F
    G
    H
    I
    9
    9
    8
    8
    7
    7
    6
    6
    5
    5
    4
    4
    3
    3
    2
    2
    1
    1
    A
    B
    C
    D
    E
    F
    G
    H
    I