This is a documentation for Board Game Arena: play board games online !
Wiki formatting: Difference between revisions
Sammy McSam (talk | contribs) (MediaWiki help links, issues, bug reports, workarounds, visuals, template method, categories) |
Sammy McSam (talk | contribs) |
||
(22 intermediate revisions by 3 users not shown) | |||
Line 3: | Line 3: | ||
''This page was created as a result of the [https://boardgamearena.com/forum/viewtopic.php?f=3&t=23790 Wiki style guide] 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.'' | ||
<span style="font-size:larger;">Most wiki ('''doc.'''BoardGameArena.com) formatting is not preserved on | <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> | This page is a collection of unofficial tips on how to make wiki pages display well in-game and on game panels.</span> | ||
Line 9: | Line 9: | ||
'''[https://www.mediawiki.org/wiki/Help:Formatting Help:Formatting]''' | '''[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== | ==Lists== | ||
Line 16: | Line 34: | ||
===Issues=== | ===Issues=== | ||
{{infoBox|float=right|state=collapsed|color=#b44 | |||
{{infoBox|state=collapsed|color=# | |||
|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 52: | ||
</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 44: | Line 61: | ||
# Use static markers (<code>•</code>,<code>-</code>,<code>1.</code>). | # Use static markers (<code>•</code>,<code>-</code>,<code>1.</code>). | ||
# Replace with | # 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;"> | {{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 text | ||
!Wiki | !Wiki | ||
!BGA | !BGA | ||
{{!}}-style="background:#fff4f4;" | |||
! | !style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}Dynamic | ||
marker¹ <code>*</code> | |||
{{!}}<pre style="background:none;border:none;"> | |||
* A | * A | ||
* B | * B | ||
* C | * C | ||
</pre> | </pre> | ||
{{!}} | |||
* A | * A | ||
* B | * B | ||
* C | * 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;>A</li> | ||
<li style="margin:0;padding:0;list-style:none;>B</li> | <li style="margin:0;padding:0;list-style:none;>B</li> | ||
<li style="margin:0;padding:0;list-style:none;>C</li> | <li style="margin:0;padding:0;list-style:none;>C</li> | ||
</ul> | </ul> | ||
{{!}}-style="background:#fffff4;" | |||
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}Dynamic¹ + | |||
static marker | |||
{{!}}<pre style="background:none;border:none;"> | |||
! | |||
*- A | *- A | ||
*- B | *- B | ||
*- C | *- C | ||
</pre> | </pre> | ||
{{!}} | |||
*- A | *- A | ||
*- B | *- B | ||
*- C | *- 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;>- A</li> | ||
<li style="margin:0;padding:0;list-style:none;>- B</li> | <li style="margin:0;padding:0;list-style:none;>- B</li> | ||
<li style="margin:0;padding:0;list-style:none;>- C</li> | <li style="margin:0;padding:0;list-style:none;>- C</li> | ||
</ul> | </ul> | ||
{{!}}-style="background:#f4fff4;" | |||
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}static marker + | |||
line breaks² | |||
{{!}}<pre style="background:none;border:none;"> | |||
! | |||
- A | - A | ||
Line 162: | Line 132: | ||
</pre> | </pre> | ||
{{!}} | |||
- A | - A | ||
Line 168: | Line 138: | ||
- C | - 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;">- B</p> | ||
<p style="margin:8px 0;padding:0;line-height:normal;">- C</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=" | <ul class="bulletlist" style=" | ||
margin:1em 0; | margin:1em 0; | ||
Line 236: | Line 153: | ||
</ul> | </ul> | ||
</pre> | </pre> | ||
{{!}}<ul class"bulletlist" style=" | |||
margin:1em 0; | margin:1em 0; | ||
padding-inline-start:40px; | padding-inline-start:40px; | ||
Line 244: | Line 161: | ||
<li>C</li> | <li>C</li> | ||
</ul> | </ul> | ||
{{!}}<ul class"bulletlist" style=" | |||
margin:1em 0; | margin:1em 0; | ||
padding-inline-start:40px; | padding-inline-start:40px; | ||
Line 253: | Line 170: | ||
<li>C</li> | <li>C</li> | ||
</ul> | </ul> | ||
|-style="background:#f4ffff;" | {{!}}}</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=" | <ol style=" | ||
margin:1em 0; | margin:1em 0; | ||
Line 264: | Line 252: | ||
</ol> | </ol> | ||
</pre> | </pre> | ||
{{!}}<ol style=" | |||
margin:1em 0; | margin:1em 0; | ||
padding-inline-start:40px; | padding-inline-start:40px; | ||
Line 272: | Line 260: | ||
<li style="list-style-type:decimal;">C</li> | <li style="list-style-type:decimal;">C</li> | ||
</ol> | </ol> | ||
{{!}}<ol style=" | |||
margin:1em 0; | margin:1em 0; | ||
padding-inline-start:40px; | padding-inline-start:40px; | ||
Line 281: | Line 269: | ||
<li style="list-style-type:decimal;">C</li> | <li style="list-style-type:decimal;">C</li> | ||
</ol> | </ol> | ||
|-style="background:#f4ffff;" | {{!}}}</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> | <dl> | ||
<dt><b>A term</b></dt> | <dt><b>A term</b></dt> | ||
Line 292: | Line 359: | ||
</dl> | </dl> | ||
</pre> | </pre> | ||
{{!}}<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 367: | ||
<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;"> | |||
<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 375: | ||
<dd style="margin-inline-start:1.6em;">C detail</dd> | <dd style="margin-inline-start:1.6em;">C detail</dd> | ||
</dl> | </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== | ==Headings== | ||
Line 355: | Line 408: | ||
{|class="wikitable" style="width:max-content;" | {|class="wikitable" style="width:max-content;" | ||
|+Wiki vs | |+Wiki vs [https://BoardGameArena.com BoardGameArena.com] heading formatting | ||
! | ! | ||
!Wiki text | !Wiki text | ||
Line 439: | Line 492: | ||
|} | |} | ||
{{ | {{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 { | 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 556: | ||
font-size: 100%; | font-size: 100%; | ||
//font-weight: 400; | //font-weight: 400; | ||
} | }</pre> | ||
</pre> | |||
|color2=#FAF4EE | |||
| | |title2Color=#202122 | ||
| | |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 574: | ||
padding: 12px; | padding: 12px; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
} | }</pre> | ||
</pre> | |||
}} | }} | ||
{{infoBoxes | {{infoBoxes | ||
|title1= | |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]] | ||
}} | }} | ||
Line 542: | Line 594: | ||
* The '''[[Main_Page]]''' (root) of this wiki redirects to '''[[Help]]'''. | * The '''[[Main_Page]]''' (root) of this wiki redirects to '''[[Help]]'''. | ||
* '''[https://BoardGameArena.com/doc BoardGameArena.com/doc]''' displays the '''[[Help]]''' index of games. | * '''[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=== | ===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. | # 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==== | ====Bug reports==== | ||
Line 556: | Line 612: | ||
# Remove links that do not function as expected. | # Remove links that do not function as expected. | ||
==Images== | ==Images== | ||
Line 567: | Line 619: | ||
===Issues=== | ===Issues=== | ||
# Resized images do not display on | # Resized images do not display on [https://BoardGameArena.com BoardGameArena.com]. | ||
#: e.g. <code><nowiki>[[File:Marrakech_example.jpg</nowiki>'''|300px'''<nowiki>]]</nowiki></code> | #: 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=== | ===Workarounds=== | ||
# '''[[Special:Upload|Upload]]''' | # '''[[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=== | ===Tips=== | ||
# Optionally include rollover text <code><nowiki>[[File:Marrakech_example.jpg</nowiki>'''|Example move'''<nowiki>]]</nowiki></code> | # Optionally include rollover text <code><nowiki>[[File:Marrakech_example.jpg</nowiki>'''|Example move'''<nowiki>]]</nowiki></code> | ||
==Tables== | ==Tables== | ||
Line 585: | Line 646: | ||
===Issues=== | ===Issues=== | ||
{{infoBox|float=right|state=collapsed|color=#b44 | |||
{{infoBox|state=collapsed|color=# | |||
|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 680: | ||
</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 627: | Line 687: | ||
# <code>style="width:auto;"</code> fits column width to the contents. | # <code>style="width:auto;"</code> fits column width to the contents. | ||
# <code>border="2"</code> creates table cell borders. | # <code>border="2"</code> creates table cell borders. | ||
# Replace with | # 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%;" | {|class="wikitable" style="width:max-content; min-width:100%;" | ||
|+Wiki vs | |+Wiki vs [https://BoardGameArena.com BoardGameArena.com] table formatting | ||
! | ! | ||
!Wiki text | !Wiki text | ||
Line 718: | Line 778: | ||
Option grids can help visualise multiple interdependent options. | Option grids can help visualise multiple interdependent options. | ||
Where inflexible wiki text tables fall short, HTML + | 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="display:flex;flex-flow:row wrap;max-width:max-content;border:0.1rem solid #aaa;"> | ||
Line 756: | Line 816: | ||
</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="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 856: | ||
</div> | </div> | ||
</pre> | </pre> | ||
|color2=#ba4 | |||
| | |title2=Unresponsive wiki text equivalent | ||
| | |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 912: | ||
===Issues=== | ===Issues=== | ||
{{infoBox|float=right|state=collapsed|color=#b44 | |||
{{infoBox|state=collapsed|color=# | |||
|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 921: | ||
</pre> | </pre> | ||
}} | }} | ||
# '''Margins''' and '''padding''' are removed on [https://BoardGameArena.com BoardGameArena.com]. | |||
# No left '''border'''. | |||
===Workarounds=== | ===Workarounds=== | ||
# Replace with | # 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 text | ||
!Wiki | !Wiki | ||
!BGA | !BGA | ||
{{!}}-style="background:#f4ffff;" | |||
! | {{!}}<pre style="background:none;border:none;"> | ||
<blockquote style=" | <blockquote style=" | ||
margin:1em 0; | margin:1em 0; | ||
Line 886: | Line 946: | ||
</blockquote> | </blockquote> | ||
</pre> | </pre> | ||
{{!}}<blockquote style=" | |||
margin:1em 0; | margin:1em 0; | ||
margin-inline:40px; | margin-inline:40px; | ||
Line 896: | Line 956: | ||
<code><nowiki><blockquote></nowiki></code> | <code><nowiki><blockquote></nowiki></code> | ||
</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 907: | Line 969: | ||
'''[https://www.mediawiki.org/wiki/Help:Templates Help: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|color= | {{infoBox |maxWidth= |color=#37c |titleAlign=left | ||
|title= | |title=Step 1 | ||
|body= | |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;"> | <pre style="background:none;border:none;"> | ||
{{gameIcon | {{gameIcon | ||
|tooltip= | |tooltip= | ||
|imageFileName= | |imageFileName= | ||
|width= | |scale=1 | ||
|height= | |width= | ||
|x= | |height= | ||
|y= | |x=0 | ||
|y=0 | |||
|={{{1|&ZeroWidthSpace;}}} | |||
|textColor=black | |||
|outlineColor=white | |||
}}<nowiki><</nowiki>noinclude<nowiki>> | }}<nowiki><</nowiki>noinclude<nowiki>> | ||
[[Category: | [[Category:YourIcons]] | ||
< | <</nowiki>noinclude<nowiki>></nowiki> | ||
</pre> | </pre> | ||
}} | }} | ||
===[[:Template: | {{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]]=== | |||
===[[:Category: | |||
<div style="display:flex;flex-wrap:wrap;align-items:start;gap:0.5rem"> | <div style="display:flex;flex-wrap:wrap;align-items:start;gap:0.5rem"> | ||
Line 973: | Line 1,020: | ||
!Result | !Result | ||
|- | |- | ||
|<code><nowiki>{{redCylinder}}</nowiki></code> | |<code><nowiki>{{redCylinder|1}}</nowiki></code> | ||
|{{redCylinder}} | |{{redCylinder|1}} | ||
|- | |- | ||
|<code><nowiki>{{orangeCylinder}}</nowiki></code> | |<code><nowiki>{{orangeCylinder|2}}</nowiki></code> | ||
|{{orangeCylinder}} | |{{orangeCylinder|2}} | ||
|- | |- | ||
|<code><nowiki>{{yellowCylinder}}</nowiki></code> | |<code><nowiki>{{yellowCylinder|3}}</nowiki></code> | ||
|{{yellowCylinder}} | |{{yellowCylinder|3}} | ||
|- | |- | ||
|<code><nowiki>{{greenCylinder}}</nowiki></code> | |<code><nowiki>{{greenCylinder|4}}</nowiki></code> | ||
|{{greenCylinder}} | |{{greenCylinder|4}} | ||
|- | |- | ||
|<code><nowiki>{{blueCylinder}}</nowiki></code> | |<code><nowiki>{{blueCylinder|5}}</nowiki></code> | ||
|{{blueCylinder}} | |{{blueCylinder|5}} | ||
|- | |- | ||
|<code><nowiki>{{purpleCylinder}}</nowiki></code> | |<code><nowiki>{{purpleCylinder|6}}</nowiki></code> | ||
|{{purpleCylinder}} | |{{purpleCylinder|6}} | ||
|- | |- | ||
|<code><nowiki>{{whiteCylinder}}</nowiki></code> | |<code><nowiki>{{whiteCylinder|7}}</nowiki></code> | ||
|{{whiteCylinder}} | |{{whiteCylinder|7}} | ||
|- | |- | ||
|<code><nowiki>{{greyCylinder}}</nowiki></code> | |<code><nowiki>{{greyCylinder|8}}</nowiki></code> | ||
|{{greyCylinder}} | |{{greyCylinder|8}} | ||
|- | |- | ||
|<code><nowiki>{{blackCylinder}}</nowiki></code> | |<code><nowiki>{{blackCylinder|9}}</nowiki></code> | ||
|{{blackCylinder}} | |{{blackCylinder|9}} | ||
|- | |- | ||
|<code><nowiki>{{creamCylinder}}</nowiki></code> | |<code><nowiki>{{creamCylinder|10}}</nowiki></code> | ||
|{{creamCylinder}} | |{{creamCylinder|10}} | ||
|} | |} | ||
Line 1,009: | Line 1,056: | ||
!Result | !Result | ||
|- | |- | ||
|<code><nowiki>{{meeple|red}}</nowiki></code> | |<code><nowiki>{{meeple|red|1}}</nowiki></code> | ||
|{{meeple|red}} | |{{meeple|red|1}} | ||
|- | |- | ||
|<code><nowiki>{{meeple|orange}}</nowiki></code> | |<code><nowiki>{{meeple|orange|2}}</nowiki></code> | ||
|{{meeple|orange}} | |{{meeple|orange|2}} | ||
|- | |- | ||
|<code><nowiki>{{meeple|yellow}}</nowiki></code> | |<code><nowiki>{{meeple|yellow|3}}</nowiki></code> | ||
|{{meeple|yellow}} | |{{meeple|yellow|3}} | ||
|- | |- | ||
|<code><nowiki>{{meeple|green}}</nowiki></code> | |<code><nowiki>{{meeple|green|4}}</nowiki></code> | ||
|{{meeple|green}} | |{{meeple|green|4}} | ||
|- | |- | ||
|<code><nowiki>{{meeple|blue}}</nowiki></code> | |<code><nowiki>{{meeple|blue|5}}</nowiki></code> | ||
|{{meeple|blue}} | |{{meeple|blue|5}} | ||
|- | |- | ||
|<code><nowiki>{{meeple|purple}}</nowiki></code> | |<code><nowiki>{{meeple|purple|6}}</nowiki></code> | ||
|{{meeple|purple}} | |{{meeple|purple|6}} | ||
|- | |- | ||
|<code><nowiki>{{meeple|white}}</nowiki></code> | |<code><nowiki>{{meeple|white|7}}</nowiki></code> | ||
|{{meeple|white}} | |{{meeple|white|7}} | ||
|- | |- | ||
|<code><nowiki>{{meeple|grey}}</nowiki></code> | |<code><nowiki>{{meeple|grey|8}}</nowiki></code> | ||
|{{meeple|grey}} | |{{meeple|grey|8}} | ||
|- | |- | ||
|<code><nowiki>{{meeple|black}}</nowiki></code> | |<code><nowiki>{{meeple|black|9}}</nowiki></code> | ||
|{{meeple|black}} | |{{meeple|black|9}} | ||
|} | |} | ||
Line 1,042: | Line 1,089: | ||
!Result | !Result | ||
|- | |- | ||
|<code><nowiki>{{whiteDie| | |<code><nowiki>{{whiteDie|1}}</nowiki></code> | ||
|{{whiteDie| | |{{whiteDie|1}} | ||
|- | |- | ||
|<code><nowiki>{{ | |<code><nowiki>{{yellowDie|2}}</nowiki></code> | ||
|{{ | |{{yellowDie|2}} | ||
|- | |- | ||
|<code><nowiki>{{ | |<code><nowiki>{{orangeDie|3}}</nowiki></code> | ||
|{{ | |{{orangeDie|3}} | ||
|- | |- | ||
|<code><nowiki>{{ | |<code><nowiki>{{blackDie|4}}</nowiki></code> | ||
|{{blackDie|4}} | |||
|{{ | |||
|} | |} | ||
</div> | </div> | ||
---- | |||
===[[:Category:Card_templates]]=== | ===[[:Category:Card_templates]]=== | ||
Line 1,091: | Line 1,111: | ||
!Result | !Result | ||
|- | |- | ||
|<code><nowiki>{{card| | |<code><nowiki>{{card|A}}</nowiki></code> | ||
|{{card| | |{{card|A}} | ||
|- | |- | ||
|<code><nowiki>{{club| | |<code><nowiki>{{club|K}}</nowiki></code> | ||
|{{club| | |{{club|K}} | ||
|- | |- | ||
|<code><nowiki>{{spade| | |<code><nowiki>{{spade|Q}}</nowiki></code> | ||
|{{spade| | |{{spade|Q}} | ||
|- | |- | ||
|<code><nowiki>{{heart| | |<code><nowiki>{{heart|J}}</nowiki></code> | ||
|{{heart| | |{{heart|J}} | ||
|- | |- | ||
|<code><nowiki>{{diamond| | |<code><nowiki>{{diamond|10}}</nowiki></code> | ||
|{{diamond| | |{{diamond|10}} | ||
|- | |- | ||
|<code><nowiki>{{cardBack}}</nowiki></code> | |<code><nowiki>{{cardBack}}</nowiki></code> | ||
|{{cardBack}} | |{{cardBack}} | ||
|- | |- | ||
|<code><nowiki>{{club| | |<code><nowiki>{{club|color=green}}</nowiki></code> | ||
|{{club| | |{{club|color=green}} | ||
|} | |} | ||
Line 1,118: | Line 1,138: | ||
!Result | !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> | |||
|<code><nowiki>{{cardholder| | |||
| | |||
|{{ | |||
| | |||
|} | |} | ||
</div> | </div> | ||
---- | |||
<div style="display:flex;flex-wrap:wrap;align-items:start;gap:0.5rem"> | <div style="display:flex;flex-wrap:wrap;align-items:start;gap:0.5rem"> | ||
{|class="wikitable" style="text-align:center;" | {|class="wikitable" style="text-align:center;" | ||
!Wiki text | !Wiki text | ||
!Result | !Result | ||
|- | |- | ||
|<code><nowiki>{{ | |<code><nowiki>{{Beginner}} {{Beginner|0}}</nowiki></code> | ||
|{{Beginner}} {{Beginner|0}} | |||
|{{ | |||
|- | |- | ||
|<code><nowiki>{{ | |<code><nowiki>{{Apprentice}} {{Apprentice|1}}</nowiki></code> | ||
|{{ | |{{Apprentice}} {{Apprentice|1}} | ||
|- | |- | ||
|<code><nowiki>{{ | |<code><nowiki>{{Average}} {{Average|100}}</nowiki></code> | ||
|{{ | |{{Average}} {{Average|100}} | ||
|- | |- | ||
|<code><nowiki>{{ | |<code><nowiki>{{Good}} {{Good|200}}</nowiki></code> | ||
|{{ | |{{Good}} {{Good|200}} | ||
|- | |- | ||
|<code><nowiki>{{ | |<code><nowiki>{{Strong}} {{Strong|300}}</nowiki></code> | ||
|{{ | |{{Strong}} {{Strong|300}} | ||
|- | |- | ||
|<code><nowiki>{{ | |<code><nowiki>{{Expert}} {{Expert|500}}</nowiki></code> | ||
|{{ | |{{Expert}} {{Expert|500}} | ||
|- | |- | ||
|<code><nowiki>{{ | |<code><nowiki>{{Master}} {{Master|700}}</nowiki></code> | ||
|{{ | |{{Master}} {{Master|700}} | ||
|} | |} | ||
{|class="wikitable" style="text-align:center;" | {|class="wikitable" style="text-align:center;" | ||
!Wiki text | !Wiki text | ||
!Result | !Result | ||
|- | |- | ||
|<code><nowiki>{{ | |<code><nowiki>{{player|2}}</nowiki></code> | ||
|{{ | |{{player|2}} | ||
|- | |- | ||
|<code><nowiki>{{ | |<code><nowiki>{{hand|4}}</nowiki></code> | ||
|{{hand|4}} | |||
|{{ | |||
|} | |} | ||
</div> | </div> | ||
---- | |||
===[[:Category:GameBoardTemplates]]=== | ===[[:Category:GameBoardTemplates]]=== | ||
Line 1,244: | Line 1,203: | ||
<code><nowiki>{{Quoridorboard}}</nowiki></code> | <code><nowiki>{{Quoridorboard}}</nowiki></code> | ||
{{Quoridorboard|squareSize=16}} | {{Quoridorboard|squareSize=16}} | ||
</div> | |||
<div style="display:flex;flex-flow:column wrap;align-items:center;"> | |||
'''[[:Template:HexMap]]''' | |||
<code><nowiki>{{HexMap}}</nowiki></code> | |||
<div style="display:flex;flex-flow:row wrap;align-items:center;gap:0.5rem;"> | |||
{{hexMap |n=1 | | |||
{{hex |x=3 |y=1 |{{TaluvaSand}} |{{meeple|red}} | |||
}} | |||
{{hex |x=5 |y=1 |{{TaluvaSand}} | |||
}} | |||
{{hex |x=7 |y=1 |{{TaluvaSand}} | |||
}} | |||
{{hex |x=2 |y=2 |{{TaluvaSand}} | |||
}} | |||
{{hex |x=4 |y=2 |{{TaluvaJungle}} |{{meeple|green}} | |||
}} | |||
{{hex |x=6 |y=2 |{{TaluvaJungle}} | |||
}} | |||
{{hex |x=8 |y=2 |{{TaluvaJungle}} | |||
}} | |||
{{hex |x=1 |y=3 |{{TaluvaSand}} | |||
}} | |||
{{hex |x=3 |y=3 |{{TaluvaJungle}} | |||
}} | |||
{{hex |x=5 |y=3 |{{TaluvaClearing}} |{{meeple|blue}} | |||
}} | |||
{{hex |x=7 |y=3 |{{TaluvaClearing}} |{{meeple|red}} | |||
}} | |||
{{hex |x=2 |y=4 |{{TaluvaSand}} |{{meeple|green}} | |||
}} | |||
{{hex |x=4 |y=4 |{{TaluvaJungle}} | |||
}} | |||
{{hex |x=6 |y=4 |{{TaluvaClearing}} |{{meeple|blue}} | |||
}} | |||
}} | |||
{{hexMap| | |||
{{hiveAnt |r=3 |x=1 |y=2 }} | |||
{{hiveBeetle |r=1 |x=2 |y=3 }} | |||
{{hiveGrasshopper |r=11 |x=4 |y=3 }} | |||
{{hiveSpider |r=9 |x=5 |y=2 }} | |||
{{hiveBee|w= |r=0 |x=3 |y=2 }} | |||
{{hiveGrasshopper|w=|r=0 |x=2 |y=1 }} | |||
{{hiveSpider|w= |r=0 |x=4 |y=1 }} | |||
}} | |||
</div> | |||
</div> | </div> | ||
</div> | </div> |
Latest revision as of 16:40, 9 October 2024
Purpose
This page was created as a result of the Wiki style guide forum thread.
Most wiki (doc.BoardGameArena.com) formatting is not preserved on BoardGameArena.com, but there are some workarounds. This page is a collection of unofficial tips on how to make wiki pages display well in-game and on game panels.
Feel free to add additional issues, advice and templates 🙂
Note: Wiki page changes are updated once per day on BoardGameArena.com.
Languages
Wiki page content displays:
- User's language, else
- English, else
- Create this page link/button.
e.g. A Chinese user reads the Jump Drive rules summary on its game panel page, displayed in English (en.doc.boardgamearena.com/Gamehelpjumpdrive) because the Chinese (zh.doc.boardgamearena.com/Gamehelpjumpdrive) page does not exist. The user sees a typo in the English rules and selects the edit page link to correct it, but the Chinese wiki's create page is displayed instead.
Bug reports
Lists
Issues
common.css
rulesli { list-style: none; /*removes list markers*/ } li, ul { margin: 0; /*removes margin before and after lists*/ padding: 0; /*removes list indentation*/ } blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul { margin: 0; /*removes inline and block margins*/ padding: 0; /*removes list indentation*/ }
Markers (bullets *
, numbering #
), margins and padding are removed on BoardGameArena.com.
Bug reports
Workarounds
common.css
rulesul.bulletlist li { list-style: disc none inside } .wikicontent p { margin-bottom: 8px; margin-top: 8px }
Wiki text | Wiki | BGA | |
---|---|---|---|
Dynamic
marker¹ |
* A * B * C |
|
|
Dynamic¹ +
static marker |
*- A *- B *- C |
|
|
static marker +
line breaks² |
- A - B - C |
- A - B - C |
- A - B - C |
HTML + CSS | <ul class="bulletlist" style=" margin:1em 0; padding-inline-start:40px; "> <li>A</li> <li>B</li> <li>C</li> </ul> |
|
|
<ul>
unordered list</ul>
<li>
list item</li>
Wiki text | Wiki | BGA | |
---|---|---|---|
Dynamic
marker¹ |
# A # B # C |
|
|
Dynamic¹ +
static marker |
# 1. A # 2. B # 3. C |
|
|
static marker +
line breaks² |
1. A 2. B 3. C |
1. A 2. B 3. C |
1. A 2. B 3. C |
HTML + CSS | <ol style=" margin:1em 0; padding-inline-start:40px; "> <li style="list-style-type:decimal;">A</li> <li style="list-style-type:decimal;">B</li> <li style="list-style-type:decimal;">C</li> </ol> |
|
|
<ol>
ordered list</ol>
<li>
list item</li>
Wiki text | Wiki | BGA | |
---|---|---|---|
Dynamic
marker¹ |
;A term: A detail ;B term: B detail ;C term: C detail |
|
|
Dynamic¹ +
static marker |
;'''A term''': A detail ;'''B term''': B detail ;'''C term''': C detail |
|
|
static marker +
line breaks² |
'''A term''': A detail '''B term''': B detail '''C term''': C detail |
A term: A detail B term: B detail C term: C detail |
A term: A detail B term: B detail C term: C detail |
HTML + CSS | <dl> <dt><b>A term</b></dt> <dd style="margin-inline-start:1.6em;">A detail</dd> <dt><b>B term</b></dt> <dd style="margin-inline-start:1.6em;">B detail</dd> <dt><b>C term</b></dt> <dd style="margin-inline-start:1.6em;">C detail</dd> </dl> |
|
|
<dl>
description list</dl>
<dt>
description term</dt>
<dd>
description details</dd>
¹Dynamic markers generate HTML list structure.
²Without dynamic markers, <p>
paragraphs</p>
are generated which require line breaks before and after the "list" to prevent merging into surrounding paragraphs.
Headings
Level 1 (h1) headings are the title of the page e.g. = Wiki formatting =
, = Gamehelp[name] =
, = Tips_[name] =
.
Issues
- In-game h2 and h3 headings are visually indistinguishable.
- In-game h3 headings overlap text from the previous section.
- h5 headings and below are visually indistinguishable from body text.
- Inconsistency between in-game and game panel headings.
Bug reports
Workarounds
Since in-game h3 headings became indistinguishable from h2 headings:
- Change h3 to h4 headings.
- Use additional line breaks before h3 headings.
Wiki text | Wiki | BGA game panel | BGA in-game | |
---|---|---|---|---|
h2 | * List item == Example h2 heading == * List item |
Example h2 heading
|
Example h2 heading
|
Example h2 heading
|
h3 | * List item === Example h3 heading === * List item |
Example h3 heading
|
Example h3 heading
|
Example h3 heading
|
h4 | * List item ==== Example h4 heading ==== * List item |
Example h4 heading
|
Example h4 heading
|
Example h4 heading
|
h5 | * List item ===== Example h5 heading ===== * List item |
Example h5 heading
|
Example h5 heading
|
Example h5 heading
|
common.css
rulesblockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul { margin: 0; /*removes inline and block margins*/ padding: 0; /*removes list indentation*/ } h2 { font-size: 18px; font-weight: 700; margin-bottom: 10px; margin-top: 10px; } blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul { margin: 0; padding: 0; } body { font-family: Roboto,Arial,sans-serif; //font-size: 16px; } h3, h4 { font-weight: 700; margin-bottom: 5px; } h3 { display: block; //font-size: 1.17em; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; //font-weight: bold; } h3 { font-size: 16px; margin-top: 5px; } h4 { margin-top: 20px; } h4 { display: block; margin-block-start: 1.33em; margin-block-end: 1.33em; margin-inline-start: 0px; margin-inline-end: 0px; //font-weight: bold; } h5 { display: block; //font-size: 0.83em; margin-block-start: 1.67em; margin-block-end: 1.67em; margin-inline-start: 0px; margin-inline-end: 0px; //font-weight: bold; } h1, h2, h3, h4, h5, h6 { font-size: 100%; //font-weight: 400; }
gameserver.css
rules.pagesection .wikicontent h2 { margin-top: 12px; } .pagesection h2, .pagesection h3, .portlet h2, .portlet h3 { background: linear-gradient(0deg,#f8f8f8,#e7e9e8); border-radius: 6px 6px 0 0; box-shadow: 0 5px 5px 0 rgba(0,0,0,.1); color: #385088; font-size: 14px; margin: -12px -12px 20px; padding: 12px; text-transform: uppercase; }
Links
- The Main_Page (root) of this wiki redirects to Help.
- BoardGameArena.com/doc displays the Help index of games.
- Note: each heading has a unique id appended with a number as necessary.
Issues
- Links to section headings
#
do not work outside of the wiki (doc.BoardGameArena.com). - URL is resolved to
/doc
instead of the current page. - In-game links navigate the user away from the game.
e.g. [[#Section_heading_link]]
⇨ https://BoardGameArena.com/doc#Section_heading_link ¹.
Bug reports
Workarounds
- Remove links that do not function as expected.
Images
Issues
- Resized images do not display on BoardGameArena.com.
- e.g.
[[File:Marrakech_example.jpg|300px]]
because the resized image does not exist in the referenced directory.
- e.g.
- Thumbnails images do not display on BoardGameArena.com.
- e.g.
[[File:Marrakech_example.jpg|thumb]]
because thumbnails are just resized images.
- e.g.
- Image links do not work on BoardGameArena.com.
- e.g.
[[File:Versions.png|link=https://en.doc.boardgamearena.com/images/b/b5/Factum_Rules_Summary_EN_v1.jpg]]
because the link resolves tohttps://boardgamearena.com/dochttps://en.doc.boardgamearena.com/images/b/b5/Factum_Rules_Summary_EN_v1.jpg
- e.g.
Workarounds
- Upload YourImage with the size it will appear and include the image as simply:
- e.g.
[[File:Marrakech_example.jpg]]
- e.g.
- Create a
{{gameIcon}}
with ascale
factor.- e.g.
{{YourIcon|scale=0.5}}
to reduce the image dimensions by ½.
- e.g.
- Replace image links with regular links.
- e.g.
[[File:Versions.png]]
[https://en.doc.boardgamearena.com/images/b/b5/Factum_Rules_Summary_EN_v1.jpg LinkText]
- e.g.
Tips
- Optionally include rollover text
[[File:Marrakech_example.jpg|Example move]]
Tables
Issues
common.css
rules.wikicontent table { border-collapse: collapse; margin-left: 5px; margin-top: 5px; width: 98%; } table { border-collapse: collapse; border-spacing: 0; } caption, th { text-align: left; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: 400; } .wikicontent table td, .wikicontent table th { padding: 5px; text-align: center; } blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul { margin: 0; padding: 0; } .wikicontent table td, .wikicontent table th { padding: 5px; text-align: center; }
width: 98%;
stretches tables across the screen on BoardGameArena.com.- Borders do not display on BoardGameArena.com.
Workarounds
style="width:auto;"
fits column width to the contents.border="2"
creates table cell borders.- Replace with HTML + CSS grid.
Wiki text | Wiki | BGA | |||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Raw wikitable | {|class="wikitable" |+Caption !0-90 |⭐ |- !91-110 |⭐⭐ |- !111-125 |⭐⭐⭐ |} |
|
| ||||||||||||
width:auto; border="2"
|
{|class="wikitable" style="width:auto;" border="2" |+Caption !0-90 |⭐ |- !91-110 |⭐⭐ |- !111-125 |⭐⭐⭐ |} |
|
|
Option grids
Option grids can help visualise multiple interdependent options. Where inflexible wiki text tables fall short, HTML + CSS grid is responsive to screen size e.g. GameHelpPente:
<div style="display:flex;flex-flow:row wrap;max-width:max-content;border:0.1rem solid #aaa;"> <div style="box-shadow:inset 0 0 0 0.1rem #f0f;background:#fef;padding:0.5rem;width:max-content;">Training mode only</div> <div style="box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;width:max-content;">Default</div> <div style="box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;width:max-content;">Other</div> </div> <div style="display:grid;max-width:50rem;border:0.1rem solid #aaa;"> <div style="grid-area: 1 / 1 / 3 / 2;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;"># of players</div> <div style="grid-area: 1 / 2 / 3 / 3;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;text-align:center;font-size:1.2rem;">2</div> <div style="grid-area: 1 / 5 / 3 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;text-align:center;font-size:1.2rem;">3</div> <div style="grid-area: 1 / 3 / 2 / 5;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;text-align:center;font-size:1.2rem;">4</div> <div style="grid-area: 2 / 4 / 3 / 5;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;text-align:center;">Free-for-all</div> <div style="grid-area: 2 / 3 / 3 / 4;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;text-align:center;">Team</div> <div style="grid-area: 3 / 1 / 4 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">All options win</div> <div style="grid-area: 3 / 2 / 4 / 4;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Align exactly <b>5</b> stones in a row</div> <div style="grid-area: 3 / 4 / 4 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Align exactly <b>4</b> stones in a row</div> <div style="grid-area: 4 / 1 / 5 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">Overline win</div> <div style="grid-area: 4 / 2 / 5 / 4;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">May align more than <b>5</b> stones in a row</div> <div style="grid-area: 4 / 4 / 5 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">May align more than <b>4</b> stones in a row</div> <div style="grid-area: 5 / 1 / 6 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">Capture win</div> <div style="grid-area: 5 / 2 / 6 / 4;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Make <b>5</b> captures</div> <div style="grid-area: 5 / 4 / 6 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Make <b>4</b> captures</div> <div style="grid-area: 6 / 1 / 7 / 2;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;">Capture three</div> <div style="grid-area: 6 / 2 / 7 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">May capture two <b>or three</b> stones (Keryo Pente)</div> <div style="grid-area: 7 / 1 / 10 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">Self-capture</div> <div style="grid-area: 7 / 2 / 8 / 6;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;">No effect: a stone may be placed in a capture position</div> <div style="grid-area: 8 / 2 / 9 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Self-capture: results in <b>self-capture!</b> (Poof Pente)</div> <div style="grid-area: 9 / 2 / 10 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Forbidden: a stone may <b>not</b> be placed in a capture position</b></div> <div style="grid-area:10 / 1 / 12 / 2;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;">Overtime capture</div> <div style="grid-area:10 / 2 / 11 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Break the line: may capture to break a winning line (Boat Pente)</div> <div style="grid-area:11 / 2 / 12 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Capture the line: may capture an entire winning line</div> <div style="grid-area:12 / 1 / 14 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">Mixed capture</div> <div style="grid-area:12 / 3 / 13 / 6;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;">Enabled: May capture stones of mixed colour</div> <div style="grid-area:13 / 2 / 14 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Disabled: Captures of one colour only</div> </div>
{|class="wikitable" style="text-align:left;width:max-content;" border="2" |+Options |- !rowspan="2" style="text-align:left;"|# of players !rowspan="2" style="text-align:center;"|2 !colspan="2" style="text-align:center;"|4 !rowspan="2" style="text-align:center;"|3 |- !style="text-align:center;"|Team !style="text-align:center;background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|Free-for-all |- !style="text-align:left;background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|All options win |colspan="2"|Align exactly '''5''' stones in a row |colspan="2"|Align exactly '''4''' stones in a row |- !style="text-align:left;background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|Overline win |colspan="2"|May align more than '''5''' stones in a row |colspan="2"|May align more than '''4''' stones in a row |- !style="text-align:left;background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|Capture win |colspan="2"|Make '''5''' captures |colspan="2"|Make '''4''' captures |- !style="text-align:left;"|Capture three |colspan="4"|May capture two '''or three''' stones (Keryo Pente) |- !rowspan="3" style="text-align:left;background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|Self-capture |colspan="4" style="background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|No effect: a stone may be placed in a capture position |- |colspan="4"|Self-capture: results in '''self-capture!''' (Poof Pente) |- |colspan="4"|Forbidden: a stone may '''not''' be placed in a capture position |- !rowspan="2" style="text-align:left;"|Overtime capture |colspan="4"|Break the line: may capture to break a winning line (Boat Pente) |- |colspan="4"|Capture the line: may capture an entire winning line |- !rowspan="2" style="text-align:left;background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|Mixed capture | |colspan="3" style="background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|Enabled: May capture stones of mixed colour |- |colspan="4"|Disabled: Captures of one colour only |}
Blockquote
Issues
common.css
rulesblockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul { margin: 0; /*removes inline and block margins*/ padding: 0; /*removes list indentation*/ }
- Margins and padding are removed on BoardGameArena.com.
- No left border.
Workarounds
<blockquote>
formattingWiki text | Wiki | BGA |
---|---|---|
<blockquote style=" margin:1em 0; margin-inline:40px; padding:8px 32px; border-left:4px solid #eaecf0; "> This is a <blockquote> </blockquote> |
|
|
Wiki templates
Template:InfoBox
Customisable container(s) responsive to screen size.
Create your own icons
https://en.doc.boardgamearena.com /Template:YourIcon
Fill in the parameters:
{{gameIcon |tooltip= |imageFileName= |scale=1 |width= |height= |x=0 |y=0 |={{{1|​}}} |textColor=black |outlineColor=white }}<noinclude> [[Category:YourIcons]] <noinclude>
{{YourIcon}}
See Examples
Category:GameIconTemplates
Wiki text | Result |
---|---|
{{redCylinder|1}}
|
|
{{orangeCylinder|2}}
|
|
{{yellowCylinder|3}}
|
|
{{greenCylinder|4}}
|
|
{{blueCylinder|5}}
|
|
{{purpleCylinder|6}}
|
|
{{whiteCylinder|7}}
|
|
{{greyCylinder|8}}
|
|
{{blackCylinder|9}}
|
|
{{creamCylinder|10}}
|
Wiki text | Result |
---|---|
{{meeple|red|1}}
|
|
{{meeple|orange|2}}
|
|
{{meeple|yellow|3}}
|
|
{{meeple|green|4}}
|
|
{{meeple|blue|5}}
|
|
{{meeple|purple|6}}
|
|
{{meeple|white|7}}
|
|
{{meeple|grey|8}}
|
|
{{meeple|black|9}}
|
Wiki text | Result |
---|---|
{{whiteDie|1}}
|
|
{{yellowDie|2}}
|
|
{{orangeDie|3}}
|
|
{{blackDie|4}}
|
Category:Card_templates
Wiki text | Result |
---|---|
{{card|A}}
|
A |
{{club|K}}
|
K♣ |
{{spade|Q}}
|
Q♠ |
{{heart|J}}
|
J♥ |
{{diamond|10}}
|
10♦ |
{{cardBack}}
|
🟔 |
{{club|color=green}}
|
♣ |
Wiki text | Result |
---|---|
{{cardholder|{{diamond|A}}{{club|A}}{{heart|A}}{{spade|A}} |Alice}}
|
A♦A♣A♥A♠ Alice |
Wiki text | Result |
---|---|
{{Beginner}} {{Beginner|0}}
|
Beginner 0 |
{{Apprentice}} {{Apprentice|1}}
|
Apprentice 1 |
{{Average}} {{Average|100}}
|
Average 100 |
{{Good}} {{Good|200}}
|
Good 200 |
{{Strong}} {{Strong|300}}
|
Strong 300 |
{{Expert}} {{Expert|500}}
|
Expert 500 |
{{Master}} {{Master|700}}
|
Master 700 |
Wiki text | Result |
---|---|
{{player|2}}
|
2players |
{{hand|4}}
|
4cards in hand |
Category:GameBoardTemplates
{{Goboard9}}
{{Quoridorboard}}