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
(→‎Links: HTML <a> does not work https://www.mediawiki.org/wiki/Help:HTML_in_wikitext)
(collapsed HTML, floated CSS, cardholder5)
Line 16: Line 16:
===Issues===
===Issues===


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


====Bug reports====
====Bug reports====
Line 46: Line 45:
# Replace with '''[https://developer.mozilla.org/en-US/docs/Web/HTML HTML]''' + '''[https://developer.mozilla.org/en-US/docs/Web/CSS CSS]'''.
# Replace with '''[https://developer.mozilla.org/en-US/docs/Web/HTML HTML]''' + '''[https://developer.mozilla.org/en-US/docs/Web/CSS CSS]'''.


<div style="width:100%;overflow:scroll;">
<div style="width:100%;max-width:90vw;overflow:scroll;">
{|class="wikitable" style="width:max-content;"
{|class="wikitable" style="width:max-content;"
|+Wiki vs '''[https://BoardGameArena.com BoardGameArena.com]''' list formatting
|+Wiki vs '''[https://BoardGameArena.com BoardGameArena.com]''' list formatting
Line 217: Line 216:
²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.
²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.


<div style="width:100%;overflow:scroll;">
{{infoBox|state=collapsed|color=#0aa|maxWidth=
{|class="wikitable" style="width:max-content;"
|title=HTML + CSS list formatting
|+Wiki vs '''[https://BoardGameArena.com BoardGameArena.com]''' list formatting
|body=<div style="width:100%;max-width:90vw;overflow:scroll;">
!
{{{!}}class="wikitable" style="width:max-content;"
!Wiki text
!Wiki text
!Wiki
!Wiki
!BGA
!BGA
|-style="background:#f4ffff;"
{{!}}-style="background:#f4ffff;"
!rowspan="3" style="writing-mode:vertical-rl;transform:rotate(180deg);"|HTML + CSS
{{!}}<pre style="background:none;border:none;">
|<pre style="background:none;border:none;">
<ul class="bulletlist" style="
<ul class="bulletlist" style="
     margin:1em 0;
     margin:1em 0;
Line 236: Line 234:
</ul>
</ul>
</pre>
</pre>
|<ul class"bulletlist" style="
{{!}}<ul class"bulletlist" style="
     margin:1em 0;
     margin:1em 0;
     padding-inline-start:40px;
     padding-inline-start:40px;
Line 244: Line 242:
     <li>C</li>
     <li>C</li>
</ul>
</ul>
|<ul class"bulletlist" style="
{{!}}<ul class"bulletlist" style="
     margin:1em 0;
     margin:1em 0;
     padding-inline-start:40px;
     padding-inline-start:40px;
Line 253: Line 251:
     <li>C</li>
     <li>C</li>
</ul>
</ul>
|-style="background:#f4ffff;"
{{!}}-style="background:#f4ffff;"
|<pre style="background:none;border:none;">
{{!}}<pre style="background:none;border:none;">
<ol style="
<ol style="
     margin:1em 0;
     margin:1em 0;
Line 264: Line 262:
</ol>
</ol>
</pre>
</pre>
|<ol style="
{{!}}<ol style="
     margin:1em 0;
     margin:1em 0;
     padding-inline-start:40px;
     padding-inline-start:40px;
Line 272: Line 270:
     <li style="list-style-type:decimal;">C</li>
     <li style="list-style-type:decimal;">C</li>
</ol>
</ol>
|<ol style="
{{!}}<ol style="
     margin:1em 0;
     margin:1em 0;
     padding-inline-start:40px;
     padding-inline-start:40px;
Line 281: Line 279:
     <li style="list-style-type:decimal;">C</li>
     <li style="list-style-type:decimal;">C</li>
</ol>
</ol>
|-style="background:#f4ffff;"
{{!}}-style="background:#f4ffff;"
|<pre style="background:none;border:none;">
{{!}}<pre style="background:none;border:none;">
<dl>
<dl>
  <dt><b>A term</b></dt>
  <dt><b>A term</b></dt>
Line 292: Line 290:
</dl>
</dl>
</pre>
</pre>
|<dl>
{{!}}<dl>
  <dt><b>A term</b></dt>
  <dt><b>A term</b></dt>
   <dd style="margin-inline-start:1.6em;">A detail</dd>
   <dd style="margin-inline-start:1.6em;">A detail</dd>
Line 300: Line 298:
   <dd style="margin-inline-start:1.6em;">C detail</dd>
   <dd style="margin-inline-start:1.6em;">C detail</dd>
</dl>
</dl>
|<dl style="line-height:normal;">
{{!}}<dl style="line-height:normal;">
  <dt><b>A term</b></dt>
  <dt><b>A term</b></dt>
   <dd style="margin-inline-start:1.6em;">A detail</dd>
   <dd style="margin-inline-start:1.6em;">A detail</dd>
Line 308: Line 306:
   <dd style="margin-inline-start:1.6em;">C detail</dd>
   <dd style="margin-inline-start:1.6em;">C detail</dd>
</dl>
</dl>
|}
{{!}}}</div>
</div>


* <code><nowiki><ul></nowiki></code>'''[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul unordered list]'''<code><nowiki></ul></nowiki></code>
{{infoBox|float=right|state=collapsed|color=#4b4
* <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>
 
{{infoBox|state=collapsed|color=#0a0
|title=<code>common.css</code> rules
|title=<code>common.css</code> rules
|body=<pre style="background:none;border:none;">
|body=<pre style="background:none;border:none;">
Line 330: Line 320:
}
}
</pre>
</pre>
}}
* <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>
}}
}}


Line 439: Line 436:
|}
|}


{{infoBox|state=collapsed|color=rgba(211,211,211)|titleColor=#202122
{{infoBoxes|state=collapsed
|title=<code>common.css</code> rules
|color1=#d3d3d3
|body=<pre style="background:none;border:none;">
|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 {
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*/
     margin: 0; /*removes inline and block margins*/
Line 501: Line 500:
     font-size: 100%;
     font-size: 100%;
     //font-weight: 400;
     //font-weight: 400;
}
}</pre>
</pre>
}}


{{infoBox|state=collapsed|color=#FAF4EE|titleColor=#202122
|color2=#FAF4EE
|title=<code>gameserver.css</code> rules
|title2Color=#202122
|body=<pre style="background:none;border:none;">
|title2=<code>gameserver.css</code> rules
|body2=<pre style="background:none;border:none;">
.pagesection .wikicontent h2 {
.pagesection .wikicontent h2 {
     margin-top: 12px;
     margin-top: 12px;
Line 520: Line 518:
     padding: 12px;
     padding: 12px;
     text-transform: uppercase;
     text-transform: uppercase;
}
}</pre>
</pre>
}}
}}


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


Line 585: Line 581:
===Issues===
===Issues===


# <code>width: 98%;</code> stretches tables across the screen on '''[https://BoardGameArena.com BoardGameArena.com]'''.
{{infoBox|float=right|state=collapsed|color=#b44
# Borders do not display on '''[https://BoardGameArena.com BoardGameArena.com]'''.
 
{{infoBox|state=collapsed|color=#a00
|title=<code>common.css</code> rules
|title=<code>common.css</code> rules
|body=<pre style="background:none;border:none;">
|body=<pre style="background:none;border:none;">
Line 622: Line 615:
</pre>
</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===
===Workarounds===
Line 756: Line 751:
</div>
</div>


{{infoBox|maxWidth=1000|state=collapsed|color=#00a
{{infoBoxes|maxWidth=936|state=collapsed
|title=HTML + inline CSS
|color1=#0aa
|body=<pre style="background:none;border:none;font-size:smaller;white-space:pre;overflow:scroll;">
|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="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 795: Line 791:
</div>
</div>
</pre>
</pre>
}}


{{infoBox|maxWidth=1000|state=collapsed|color=#a00
|color2=#ba4
|title=Unresponsive wiki text equivalent
|title2=Unresponsive wiki text equivalent
|body=
|body2=
<pre style="background:none;border:none;">
<pre style="background:none;border:none;">
{|class="wikitable" style="text-align:left;width:max-content;" border="2"
{|class="wikitable" style="text-align:left;width:max-content;" border="2"
Line 852: Line 847:
===Issues===
===Issues===


# '''Margins''' and '''padding''' are removed on '''[https://BoardGameArena.com BoardGameArena.com]'''.
{{infoBox|float=right|state=collapsed|color=#b44
# No left '''border'''.
{{infoBox|state=collapsed|color=#a00
|title=<code>common.css</code> rules
|title=<code>common.css</code> rules
|body=<pre style="background:none;border:none;">
|body=<pre style="background:none;border:none;">
Line 863: Line 856:
</pre>
</pre>
}}
}}
# '''Margins''' and '''padding''' are removed on '''[https://BoardGameArena.com BoardGameArena.com]'''.
# No left '''border'''.


===Workarounds===
===Workarounds===
Line 868: Line 863:
# Replace with '''[https://developer.mozilla.org/en-US/docs/Web/HTML HTML]''' + '''[https://developer.mozilla.org/en-US/docs/Web/CSS CSS]'''.
# 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;"
{{infoBox|state=collapsed|color=#0aa|maxWidth=
|+Wiki vs '''[https://BoardGameArena.com BoardGameArena.com]''' <code><nowiki><blockquote></nowiki></code> formatting
|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 text
!Wiki
!Wiki
!BGA
!BGA
|-style="background:#f4ffff;"
{{!}}-style="background:#f4ffff;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"|HTML + CSS
{{!}}<pre style="background:none;border:none;">
|<pre style="background:none;border:none;">
<blockquote style="
<blockquote style="
     margin:1em 0;
     margin:1em 0;
Line 886: Line 881:
</blockquote>
</blockquote>
</pre>
</pre>
|<blockquote style="
{{!}}<blockquote style="
     margin:1em 0;
     margin:1em 0;
     margin-inline:40px;
     margin-inline:40px;
Line 896: Line 891:
<code><nowiki><blockquote></nowiki></code>
<code><nowiki><blockquote></nowiki></code>
</blockquote>
</blockquote>
|<blockquote>
{{!}}<blockquote>
This is a
This is a


<code><nowiki><blockquote></nowiki></code>
<code><nowiki><blockquote></nowiki></code>
</blockquote>
</blockquote>
|}
{{!}}}
</div>
}}


==Wiki templates==
==Wiki templates==
Line 1,125: Line 1,122:
  }}</nowiki></code>
  }}</nowiki></code>
|{{cardholder4
|{{cardholder4
|card1=1
|card1Colour={{r}}
|clue1=1
|clue1Colour={{r}}
}}<br>
|-
|<code><nowiki>{{cardholder5
|card1=1
|card1Colour={{r}}
|clue1=1
|clue1Colour={{r}}
}}</nowiki></code>
|{{cardholder5
  |card1=1
  |card1=1
  |card1Colour={{r}}
  |card1Colour={{r}}

Revision as of 18:09, 17 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

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

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

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.

HTML + CSS list formatting
Wiki text Wiki BGA 
<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;
}
    Game panel heading example
    Game panel content appears in a single box:
    Ruleset heading example about.png
    In-game heading example
    In-game content appears in multiple boxes:
    Ruleset heading example.png

    Links

    Help:Links

    Issues

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

    e.g. [[#Section_heading_link]] ⇨ https://BoardGameArena.com/doc#Section_heading_link ¹.

    Bug reports

    Workarounds

    1. Remove links that do not function as expected.

    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

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

    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

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

    Workarounds

    1. Replace with HTML + CSS.
    HTML + CSS <blockquote> formatting
    Wiki text Wiki BGA 
    <blockquote style="
    margin:1em 0;
    margin-inline:40px;
    padding:8px 32px;
    border-left:4px solid #eaecf0;
">
This is a <blockquote>
</blockquote>

    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 🡲

    {{cardholder5 |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
    Retrieved from "http:///index.php?title=Wiki_formatting&oldid=18913"