View source for Wiki formatting

==Purpose==

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

<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.
This page is a collection of unofficial tips on how to make wiki pages display well in-game and on game panels.</span>

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

'''[https://www.mediawiki.org/wiki/Help:Formatting Help:Formatting]'''

Note: Wiki page changes are [https://boardgamearena.com/forum/viewtopic.php?p=33914#p33914 updated once per day] on [https://BoardGameArena.com BoardGameArena.com].

==Languages==

Wiki page content displays:
# User's '''[https://boardgamearena.com/preferences?section=lang 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====

* '''[https://boardgamearena.com/bug?id=102754 Link for editing is misleading]'''

* '''[https://boardgamearena.com/bug?id=117297 Templates and some format don't work in other language]'''

==Lists==

'''[https://www.mediawiki.org/wiki/Help:Lists Help:Lists]'''

===Issues===

{{infoBox|float=right|state=collapsed|color=#b44
|title=<code>common.css</code> rules
|body=<pre style="background:none;border:none;">
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*/
}
</pre>
}}
'''Markers''' (bullets <code>*</code>, numbering <code>#</code>), '''margins''' and '''padding''' are removed on [https://BoardGameArena.com BoardGameArena.com].

====Bug reports====

* '''[https://boardgamearena.com/bug?id=16083 Bullet points not visible]'''

===Workarounds===

# 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].

{{infoBox|float=right|state=collapsed|color=#4b4
|title=<code>common.css</code> rules
|body=<pre style="background:none;border:none;">
ul.bulletlist li {
    list-style: disc none inside
}

.wikicontent p {
    margin-bottom: 8px;
    margin-top: 8px
}
</pre>
}}

{{infoBoxes3|state=collapsed|maxWidth=
|title1=Bullet lists
|body1=<div style="width:100%;max-width:90vw;overflow:scroll;">
{{{!}} class="wikitable" style="width:max-content;"
{{!}}+Wiki vs [https://BoardGameArena.com BoardGameArena.com] list formatting
!
!Wiki text
!Wiki
!BGA
{{!}}-style="background:#fff4f4;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}Dynamic
marker¹ <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:#fffff4;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}Dynamic¹ +
static marker
{{!}}<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:#f4fff4;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}static marker +
line breaks²
{{!}}<pre style="background:none;border:none;">

- A

- B

- C

</pre>
{{!}}
- A

- B

- 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:#f4ffff;"
!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>
{{!}}}</div>
* <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><li></nowiki></code>[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li list item]<code><nowiki></li></nowiki></code>

|title2=Numbered lists
|body2=<div style="width:100%;max-width:90vw;overflow:scroll;">
{{{!}} class="wikitable" style="width:max-content;"
{{!}}+Wiki vs [https://BoardGameArena.com BoardGameArena.com] list formatting
!
!Wiki text
!Wiki
!BGA
{{!}}-style="background:#fff4f4;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}Dynamic
marker¹ <code>#</code>
{{!}}<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:#fffff4;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}Dynamic¹ +
static marker
{{!}}<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:#f4fff4;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}static marker +
line breaks²
{{!}}<pre style="background:none;border:none;">

1. A

2. B

3. C

</pre>
{{!}}
1. A

2. B

3. C
{{!}}<p style="margin:8px 0;padding:0;line-height:normal;">1. A</p>
<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:#f4ffff;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}HTML + CSS
{{!}}<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>
{{!}}}</div>
* <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>

|title3=Definition lists
|body3=<div style="width:100%;max-width:90vw;overflow:scroll;">
{{{!}} class="wikitable" style="width:max-content;"
{{!}}+Wiki vs [https://BoardGameArena.com BoardGameArena.com] list formatting
!
!Wiki text
!Wiki
!BGA
{{!}}-style="background:#fff4f4;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}Dynamic
marker¹ <code>;</code> <code>:</code>
{{!}}<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;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}Dynamic¹ +
static marker
{{!}}<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;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}static marker +
line breaks²
{{!}}<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

{{!}}<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>

{{!}}-style="background:#f4ffff;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}HTML + CSS
{{!}}<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>
* <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>
}}

¹Dynamic markers generate HTML list structure.

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

==Headings==

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

===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====

* '''[https://boardgamearena.com/bug?id=86652 h2/h3 headings not nested]'''
* '''[https://boardgamearena.com/bug?id=71867 Section headings overlapping text]'''

===Workarounds===

Since in-game h3 headings became indistinguishable from h2 headings:
* Change h3 to h4 headings.
* Use additional line breaks before h3 headings.

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

== Example h2 heading ==

* 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

=== Example h3 heading ===

* 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

==== Example h4 heading ====

* 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

===== Example h5 heading =====

* 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>
|}

{{infoBoxes|state=collapsed
|color1=#d3d3d3
|title1Color=#202122
|title1=<code>common.css</code> rules
|body1=<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*/
}

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>

|color2=#FAF4EE
|title2Color=#202122
|title2=<code>gameserver.css</code> rules
|body2=<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>
}}

{{infoBoxes
|title1=Game panel heading example
|body1=
Game panel content appears in a single box:
[[File:Ruleset heading example about.png|thumb|center]]
|title2=In-game heading example
|body2=
In-game content appears in multiple boxes:
[[File:Ruleset heading example.png|thumb|center]]
}}

==Links==

'''[https://www.mediawiki.org/wiki/Help:Links Help:Links]'''

* The '''[[Main_Page]]''' (root) of this wiki redirects to '''[[Help]]'''.
* '''[https://BoardGameArena.com/doc BoardGameArena.com/doc]''' displays the '''[[Help]]''' index of games.
* 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.

===Issues===

# '''Links to section headings <code>#</code>''' do not work outside of the wiki ('''doc.'''BoardGameArena.com).
# URL is resolved to <code>/doc</code> instead of the current page.
# In-game links navigate the user away from the game.

e.g. <code><nowiki>[[#Section_heading_link]]</nowiki></code> ⇨ https://BoardGameArena.com/doc#Section_heading_link ¹.

====Bug reports====

* ¹'''[https://boardgamearena.com/bug?id=88292 Section links don't work]'''

===Workarounds===

# Remove links that do not function as expected.

==Images==

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

===Issues===

# 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.
# Thumbnails images do not display on [https://BoardGameArena.com BoardGameArena.com].
#: e.g. <code><nowiki>[[File:Marrakech_example.jpg</nowiki>'''|thumb'''<nowiki>]]</nowiki></code> because thumbnails are just resized images.
# Image links do not work on [https://BoardGameArena.com BoardGameArena.com].
#: e.g. <code><nowiki>[[File:Versions.png</nowiki>'''|link=https://en.doc.boardgamearena.com/images/b/b5/Factum_Rules_Summary_EN_v1.jpg'''<nowiki>]]</nowiki></code> because the link resolves to <code>https://boardgamearena.com/dochttps://en.doc.boardgamearena.com/images/b/b5/Factum_Rules_Summary_EN_v1.jpg</code>

===Workarounds===

# '''[[Special:Upload|Upload]]''' '''''YourImage''''' with the size it will appear and include the image as simply:
#: e.g. <code><nowiki>[[File:Marrakech_example.jpg]]</nowiki></code>
# Create a <code>[[#Create_your_own_icons|<nowiki>{{gameIcon}}</nowiki>]]</code> with a <code>scale</code> factor.
#: e.g. <code><nowiki>{{</nowiki>'''YourIcon'''|scale='''0.5'''<nowiki>}}</nowiki></code> to reduce the image dimensions by ½.
# Replace image links with regular links.
#: e.g. <code><nowiki>[[File:Versions.png]]</nowiki></code>
#: <code><nowiki>[https://en.doc.boardgamearena.com/images/b/b5/Factum_Rules_Summary_EN_v1.jpg LinkText]</nowiki></code>

===Tips===

# Optionally include rollover text <code><nowiki>[[File:Marrakech_example.jpg</nowiki>'''|Example move'''<nowiki>]]</nowiki></code>

==Tables==

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

===Issues===

{{infoBox|float=right|state=collapsed|color=#b44
|title=<code>common.css</code> rules
|body=<pre style="background:none;border:none;">
.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;
}
</pre>
}}
# <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].

===Workarounds===

# <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].

{|class="wikitable" style="width:max-content; min-width:100%;"
|+Wiki vs [https://BoardGameArena.com BoardGameArena.com] table formatting
!
!Wiki text
!Wiki
!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 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]]''':

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

{{infoBoxes|maxWidth=936|state=collapsed
|color1=#0aa
|title1=HTML + inline CSS
|body1=<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="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>
</pre>

|color2=#ba4
|title2=Unresponsive wiki text equivalent
|body2=
<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===

{{infoBox|float=right|state=collapsed|color=#b44
|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>
}}
# '''Margins''' and '''padding''' are removed on [https://BoardGameArena.com BoardGameArena.com].
# No left '''border'''.

===Workarounds===

# Replace with [https://developer.mozilla.org/en-US/docs/Web/HTML HTML] + [https://developer.mozilla.org/en-US/docs/Web/CSS CSS].

{{infoBox|state=collapsed|color=#0aa|maxWidth=
|title=HTML + CSS <code><nowiki><blockquote></nowiki></code> formatting
|body=<div style="width:100%;max-width:90vw;overflow:scroll;">
{{{!}}class{{=}}"wikitable" style{{=}}"width:max-content;"
!Wiki text
!Wiki
!BGA
{{!}}-style="background:#f4ffff;"
{{!}}<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>
{{!}}}
</div>
}}

==Wiki templates==

'''[https://www.mediawiki.org/wiki/Help:Templates Help:Templates]'''

===[[: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.
}}
----
===Create your own icons===

{{infoBox |maxWidth= |color=#37c |titleAlign=left
|title=Step 1
|body='''[[Special:Upload|Upload]]''' '''''YourImage'''''.png
}}

{{infoBox |maxWidth= |color=#3aa |titleAlign=left
|title=Step 2
|body=Create <code>[https://en.doc.boardgamearena.com/Template:YourIcon https://en.doc.boardgamearena.com<wbr>/Template:'''''YourIcon''''']</code>
Fill in the parameters:
<pre style="background:none;border:none;">
{{gameIcon
|tooltip=
|imageFileName=
|scale=1
|width=
|height=
|x=0
|y=0
|={{{1|&amp;ZeroWidthSpace;}}}
|textColor=black
|outlineColor=white
}}<nowiki><</nowiki>noinclude<nowiki>>
[[Category:YourIcons]]
<</nowiki>noinclude<nowiki>></nowiki>
</pre>
}}

{{infoBox |maxWidth= |color=#3c7 |titleAlign=left
|title=Step 3
|body=Insert <code><nowiki>{{</nowiki>'''''YourIcon'''''<nowiki>}}</nowiki></code>
}}
See '''[[:Template:GameIcon#Examples|Examples]]'''

===[[:Category:GameIconTemplates]]===

<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|1}}</nowiki></code>
|{{redCylinder|1}}
|-
|<code><nowiki>{{orangeCylinder|2}}</nowiki></code>
|{{orangeCylinder|2}}
|-
|<code><nowiki>{{yellowCylinder|3}}</nowiki></code>
|{{yellowCylinder|3}}
|-
|<code><nowiki>{{greenCylinder|4}}</nowiki></code>
|{{greenCylinder|4}}
|-
|<code><nowiki>{{blueCylinder|5}}</nowiki></code>
|{{blueCylinder|5}}
|-
|<code><nowiki>{{purpleCylinder|6}}</nowiki></code>
|{{purpleCylinder|6}}
|-
|<code><nowiki>{{whiteCylinder|7}}</nowiki></code>
|{{whiteCylinder|7}}
|-
|<code><nowiki>{{greyCylinder|8}}</nowiki></code>
|{{greyCylinder|8}}
|-
|<code><nowiki>{{blackCylinder|9}}</nowiki></code>
|{{blackCylinder|9}}
|-
|<code><nowiki>{{creamCylinder|10}}</nowiki></code>
|{{creamCylinder|10}}
|}

{|class="wikitable" style="text-align:center;"
|+Meeples
!Wiki text
!Result
|-
|<code><nowiki>{{meeple|red|1}}</nowiki></code>
|{{meeple|red|1}}
|-
|<code><nowiki>{{meeple|orange|2}}</nowiki></code>
|{{meeple|orange|2}}
|-
|<code><nowiki>{{meeple|yellow|3}}</nowiki></code>
|{{meeple|yellow|3}}
|-
|<code><nowiki>{{meeple|green|4}}</nowiki></code>
|{{meeple|green|4}}
|-
|<code><nowiki>{{meeple|blue|5}}</nowiki></code>
|{{meeple|blue|5}}
|-
|<code><nowiki>{{meeple|purple|6}}</nowiki></code>
|{{meeple|purple|6}}
|-
|<code><nowiki>{{meeple|white|7}}</nowiki></code>
|{{meeple|white|7}}
|-
|<code><nowiki>{{meeple|grey|8}}</nowiki></code>
|{{meeple|grey|8}}
|-
|<code><nowiki>{{meeple|black|9}}</nowiki></code>
|{{meeple|black|9}}
|}

{|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}}
|}
</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|color=green}}</nowiki></code>
|{{club|color=green}}
|}

{|class="wikitable" style="width:min-content;"
|+[[:Template:Cardholder]]
!Wiki text
!Result
|-
|<code><nowiki>{{cardholder|{{diamond|A}}{{club|A}}{{heart|A}}{{spade|A}} |Alice}}</nowiki></code>
|{{cardholder|{{diamond|A}}{{club|A}}{{heart|A}}{{spade|A}} |Alice}}<br>
|}
</div>

----
<div style="display:flex;flex-wrap:wrap;align-items:start;gap:0.5rem">
{|class="wikitable" style="text-align:center;"
!Wiki text
!Result
|-
|<code><nowiki>{{Beginner}} {{Beginner|0}}</nowiki></code>
|{{Beginner}} {{Beginner|0}}
|-
|<code><nowiki>{{Apprentice}} {{Apprentice|1}}</nowiki></code>
|{{Apprentice}} {{Apprentice|1}}
|-
|<code><nowiki>{{Average}} {{Average|100}}</nowiki></code>
|{{Average}} {{Average|100}}
|-
|<code><nowiki>{{Good}} {{Good|200}}</nowiki></code>
|{{Good}} {{Good|200}}
|-
|<code><nowiki>{{Strong}} {{Strong|300}}</nowiki></code>
|{{Strong}} {{Strong|300}}
|-
|<code><nowiki>{{Expert}} {{Expert|500}}</nowiki></code>
|{{Expert}} {{Expert|500}}
|-
|<code><nowiki>{{Master}} {{Master|700}}</nowiki></code>
|{{Master}} {{Master|700}}
|}

{|class="wikitable" style="text-align:center;"
!Wiki text
!Result
|-
|<code><nowiki>{{player|2}}</nowiki></code>
|{{player|2}}
|-
|<code><nowiki>{{hand|4}}</nowiki></code>
|{{hand|4}}
|}
</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>