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

Template:Chessboard: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
(adjustments for any board size)
(added border variables)
Line 2: Line 2:
== Basic empty chessboard ==
== Basic empty chessboard ==
</noinclude>
</noinclude>
<div style="display:grid; grid-template:{{{notationBorder|20px}}} repeat(8,{{{squareSize|45px}}}) {{{notationBorder|20px}}} / {{{notationBorder|20px}}} repeat(8,{{{squareSize|45px}}}) {{{notationBorder|20px}}};">
<div style="display:grid;grid-template:{{{notationSpacing|1.25}}}rem repeat(8,{{{squareSize|46}}}px) {{{notationSpacing|1.25}}}rem / {{{notationSpacing|1.25}}}rem repeat(8,{{{squareSize|46}}}px) {{{notationSpacing|1.25}}}rem;">
<div style="display:grid;place-items:center;"></div>
<div style="display:grid;place-items:center;"></div>
<div style="display:grid;place-items:center;">{{{hideNotation|A}}}</div>
<div style="display:grid;place-items:center;">{{{hideNotation|A}}}</div>
Line 14: Line 14:
<div style="display:grid;place-items:center;"></div>
<div style="display:grid;place-items:center;"></div>
<div style="display:grid;place-items:center;">{{{hideNotation|8}}}</div>
<div style="display:grid;place-items:center;">{{{hideNotation|8}}}</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};border-top-left-radius:{{{cornerRadius|8}}}px;">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta8|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta8|}}};">
   <div style="display:grid;position:absolute;">{{{a8|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{a8|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightb8|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightb8|}}};">
   <div style="display:grid;position:absolute;">{{{b8|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{b8|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightc8|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightc8|}}};">
   <div style="display:grid;position:absolute;">{{{c8|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{c8|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightd8|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightd8|}}};">
   <div style="display:grid;position:absolute;">{{{d8|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{d8|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighte8|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighte8|}}};">
   <div style="display:grid;position:absolute;">{{{e8|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{e8|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightf8|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightf8|}}};">
   <div style="display:grid;position:absolute;">{{{f8|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{f8|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightg8|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightg8|}}};">
   <div style="display:grid;position:absolute;">{{{g8|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{g8|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};border-right:solid 0.125rem {{{darkSquareColour|#ddd}}};border-top-right-radius:{{{cornerRadius|0.5}}}rem;">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth8|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth8|}}};">
   <div style="display:grid;position:absolute;">{{{h8|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{h8|{{emptySquare}}}}}</div>
Line 56: Line 56:
<div style="display:grid;place-items:center;">{{{hideNotation|8}}}</div>
<div style="display:grid;place-items:center;">{{{hideNotation|8}}}</div>
<div style="display:grid;place-items:center;">{{{hideNotation|7}}}</div>
<div style="display:grid;place-items:center;">{{{hideNotation|7}}}</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta7|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta7|}}};">
   <div style="display:grid;position:absolute;">{{{a7|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{a7|{{emptySquare}}}}}</div>
Line 91: Line 91:
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth7|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth7|}}};">
   <div style="display:grid;position:absolute;">{{{h7|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{h7|{{emptySquare}}}}}</div>
Line 98: Line 98:
<div style="display:grid;place-items:center;">{{{hideNotation|7}}}</div>
<div style="display:grid;place-items:center;">{{{hideNotation|7}}}</div>
<div style="display:grid;place-items:center;">{{{hideNotation|6}}}</div>
<div style="display:grid;place-items:center;">{{{hideNotation|6}}}</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta6|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta6|}}};">
   <div style="display:grid;position:absolute;">{{{a6|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{a6|{{emptySquare}}}}}</div>
Line 133: Line 133:
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth6|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth6|}}};">
   <div style="display:grid;position:absolute;">{{{h6|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{h6|{{emptySquare}}}}}</div>
Line 140: Line 140:
<div style="display:grid;place-items:center;">{{{hideNotation|6}}}</div>
<div style="display:grid;place-items:center;">{{{hideNotation|6}}}</div>
<div style="display:grid;place-items:center;">{{{hideNotation|5}}}</div>
<div style="display:grid;place-items:center;">{{{hideNotation|5}}}</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta5|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta5|}}};">
   <div style="display:grid;position:absolute;">{{{a5|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{a5|{{emptySquare}}}}}</div>
Line 175: Line 175:
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth5|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth5|}}};">
   <div style="display:grid;position:absolute;">{{{h5|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{h5|{{emptySquare}}}}}</div>
Line 182: Line 182:
<div style="display:grid;place-items:center;">{{{hideNotation|5}}}</div>
<div style="display:grid;place-items:center;">{{{hideNotation|5}}}</div>
<div style="display:grid;place-items:center;">{{{hideNotation|4}}}</div>
<div style="display:grid;place-items:center;">{{{hideNotation|4}}}</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta4|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta4|}}};">
   <div style="display:grid;position:absolute;">{{{a4|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{a4|{{emptySquare}}}}}</div>
Line 217: Line 217:
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth4|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth4|}}};">
   <div style="display:grid;position:absolute;">{{{h4|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{h4|{{emptySquare}}}}}</div>
Line 224: Line 224:
<div style="display:grid;place-items:center;">{{{hideNotation|4}}}</div>
<div style="display:grid;place-items:center;">{{{hideNotation|4}}}</div>
<div style="display:grid;place-items:center;">{{{hideNotation|3}}}</div>
<div style="display:grid;place-items:center;">{{{hideNotation|3}}}</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta3|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta3|}}};">
   <div style="display:grid;position:absolute;">{{{a3|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{a3|{{emptySquare}}}}}</div>
Line 259: Line 259:
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth3|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth3|}}};">
   <div style="display:grid;position:absolute;">{{{h3|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{h3|{{emptySquare}}}}}</div>
Line 266: Line 266:
<div style="display:grid;place-items:center;">{{{hideNotation|3}}}</div>
<div style="display:grid;place-items:center;">{{{hideNotation|3}}}</div>
<div style="display:grid;place-items:center;">{{{hideNotation|2}}}</div>
<div style="display:grid;place-items:center;">{{{hideNotation|2}}}</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta2|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta2|}}};">
   <div style="display:grid;position:absolute;">{{{a2|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{a2|{{emptySquare}}}}}</div>
Line 301: Line 301:
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth2|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth2|}}};">
   <div style="display:grid;position:absolute;">{{{h2|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{h2|{{emptySquare}}}}}</div>
Line 308: Line 308:
<div style="display:grid;place-items:center;">{{{hideNotation|2}}}</div>
<div style="display:grid;place-items:center;">{{{hideNotation|2}}}</div>
<div style="display:grid;place-items:center;">{{{hideNotation|1}}}</div>
<div style="display:grid;place-items:center;">{{{hideNotation|1}}}</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};border-bottom-left-radius:{{{cornerRadius|8}}}px;">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta1|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta1|}}};">
   <div style="display:grid;position:absolute;">{{{a1|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{a1|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightb1|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightb1|}}};">
   <div style="display:grid;position:absolute;">{{{b1|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{b1|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightc1|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightc1|}}};">
   <div style="display:grid;position:absolute;">{{{c1|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{c1|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightd1|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightd1|}}};">
   <div style="display:grid;position:absolute;">{{{d1|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{d1|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighte1|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighte1|}}};">
   <div style="display:grid;position:absolute;">{{{e1|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{e1|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightf1|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightf1|}}};">
   <div style="display:grid;position:absolute;">{{{f1|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{f1|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightg1|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightg1|}}};">
   <div style="display:grid;position:absolute;">{{{g1|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{g1|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};border-bottom-right-radius:{{{cornerRadius|8}}}px;">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth1|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth1|}}};">
   <div style="display:grid;position:absolute;">{{{h1|{{emptySquare}}}}}</div>
   <div style="display:grid;position:absolute;">{{{h1|{{emptySquare}}}}}</div>
Line 379: Line 379:
}}
}}
</pre>
</pre>
 
<div style="display:grid;grid-template-columns:minmax(min-content,max-content);gap:1rem;overflow:hidden;text-overflow:ellipsis;">
{| style="vertical-align: top; text-align: left;"
<div style="display:flex;flex-flow:row wrap;gap:0.5rem;">
! Parameter !! Default value !! Example !! Description
  <div style="border-top:0.2rem solid red  ;font-weight:bold;width:8rem;">Parameter</div>
|- style="vertical-align: top; text-align: left;"
  <div style="border-top:0.2rem solid orange;font-weight:bold;width:8rem;">Default value</div>
| <code>hideNotation</code>
  <div style="border-top:0.2rem solid green ;font-weight:bold;width:8rem;">Example</div>
| <code>[A-H][1-8]</code>
  <div style="border-top:0.2rem solid cyan  ;font-weight:bold;width:8rem;">Description</div>
| <code><nowiki>{{chessboard | hideNotation=}}</nowiki></code>
</div>
| <i>optional:</i> hide algebraic notation
<div style="display:flex;flex-flow:row wrap;gap:0.5rem;">
|- style="vertical-align: top; text-align: left;"
  <div style="border-top:0.2rem solid red  ;"><code>a8</code></div>
| <code>notationBorder</code>
  <div style="border-top:0.2rem solid orange;"><code><nowiki>{{emptySquare}}</nowiki></code></div>
| <code>20px</code>
  <div style="border-top:0.2rem solid green ;"><code><nowiki>{{chessboard | a8={{BlackRook}}}}</nowiki></code></div>
| <code><nowiki>{{chessboard | notationBorder=30px}}</nowiki></code>
  <div style="border-top:0.2rem solid cyan  ;"><b><i>Optional:</i></b> place an image in any square using <code><b>[letter][digit]</b>=<nowiki>[[</nowiki>File:<b>ImageFileName</b>|<b>Image Tooltip</b><nowiki>]]</nowiki></code> or <code><b>[letter][digit]</b>=<nowiki>{{</nowiki><b>templateName</b><nowiki>}}</nowiki></code> where <code><b>[letter][digit]</b></code> is the algebraic coordinate<br><b>[[Special:Upload|Upload your game piece image here]]</b></div>
| <i>optional:</i> specify the size of the algebraic notation border
</div>
|- style="vertical-align: top; text-align: left;"
<div style="display:flex;flex-flow:row wrap;gap:0.5rem;">
| <code>squareSize</code>
  <div style="border-top:0.2rem solid red  ;"><code>highlighta8</code></div>
| <code>45px</code>
  <div style="border-top:0.2rem solid orange;"><code>null</code></div>
| <code><nowiki>{{chessboard | squareSize=50px}}</nowiki></code>
  <div style="border-top:0.2rem solid green ;"><code><nowiki>{{chessboard | highlighta8=red}}</nowiki></code></div>
| <i>optional:</i> specify the square dimensions
  <div style="border-top:0.2rem solid cyan  ;"><b><i>Optional:</i></b> highlight any square using <code>highlight<b>[letter][digit]</b>=<b>[string]</b></code> where <code><b>[string]</b></code> is any valid <code>style="background:<b>[string]</b>;"</code> e.g. <code>blue</code> or <code>rgba(0,0,255,0.5)</code> for semi-transparency</div>
|- style="vertical-align: top; text-align: left;"
</div>
| <code>lightSquareColour</code>
<div style="display:flex;flex-flow:row wrap;gap:0.5rem;">
| <code>#fff</code>
  <div style="border-top:0.2rem solid red  ;"><code>squareSize</code></div>
| <code><nowiki>{{chessboard | lightSquareColour=#fee}}</nowiki></code>
  <div style="border-top:0.2rem solid orange;"><code><nowiki>46</nowiki></code></div>
| <i>optional:</i> specify the light square colour
  <div style="border-top:0.2rem solid green ;"><code><nowiki>{{chessboard | squareSize=50}}</nowiki></code></div>
|- style="vertical-align: top; text-align: left;"
  <div style="border-top:0.2rem solid cyan  ;"><b><i>Optional:</i></b> specify the square dimensions in px units</div>
| <code>darkSquareColour</code>
</div>
| <code>#ddd</code>
<div style="display:flex;flex-flow:row wrap;gap:0.5rem;">
| <code><nowiki>{{chessboard | darkSquareColour=#dcc}}</nowiki></code>
  <div style="border-top:0.2rem solid red  ;"><code>lightSquareColour</code></div>
| <i>optional:</i> specify the dark square colour
  <div style="border-top:0.2rem solid orange;"><code>#fff</code> (white)</div>
|- style="vertical-align: top; text-align: left;"
  <div style="border-top:0.2rem solid green ;"><code><nowiki>{{chessboard | lightSquareColour=lightgreen}}</nowiki></code></div>
| <code>a8</code>
  <div style="border-top:0.2rem solid cyan  ;"><b><i>Optional:</i></b> specify the light square colour as <code><b>[string]</b></code> where <code><b>[string]</b></code> is any valid <code>style="background:<b>[string]</b>;"</code></div>
| <code><nowiki>{{emptySquare}}</nowiki></code>
</div>
| <code><nowiki>{{chessboard | a8={{blackRook}}}}</nowiki></code>
<div style="display:flex;flex-flow:row wrap;gap:0.5rem;">
| <i>optional:</i> place an image in any square using:
  <div style="border-top:0.2rem solid red  ;"><code>darkSquareColour</code></div>
<code><b>[letter][digit]</b>=<nowiki>[[</nowiki>File:<b>ImageFileName</b>|<b>Image Tooltip</b><nowiki>]]</nowiki></code> or <code><nowiki>{{</nowiki><b>templateName</b><nowiki>}}</nowiki></code>
  <div style="border-top:0.2rem solid orange;"><code>#ddd</code> (grey)</div>
 
  <div style="border-top:0.2rem solid green ;"><code><nowiki>{{chessboard | darkSquareColour=darkblue}}</nowiki></code></div>
where <code><b>[letter][digit]</b></code> is the algebraic coordinate
  <div style="border-top:0.2rem solid cyan  ;"><b><i>Optional:</i></b> specify the dark square colour as <code><b>[string]</b></code> where <code><b>[string]</b></code> is any valid <code>style="background:<b>[string]</b>;"</code></div>
 
</div>
<b>[[Special:Upload|Upload your game piece image here]]</b>
<div style="display:flex;flex-flow:row wrap;gap:0.5rem;">
|- style="vertical-align: top; text-align: left;"
  <div style="border-top:0.2rem solid red  ;"><code>borderThickness</code></div>
| <code>highlighta8</code>
  <div style="border-top:0.2rem solid orange;"><code>2</code></div>
| <code>null</code>
  <div style="border-top:0.2rem solid green ;"><code><nowiki>{{chessboard | borderThickness=3}}</nowiki></code></div>
| <code><nowiki>{{chessboard | highlighta8=red}}</nowiki></code>
  <div style="border-top:0.2rem solid cyan  ;"><b><i>Optional:</i></b> specify the border thickness in px units</div>
| <i>optional:</i> highlight any square using:
</div>
<code>highlight<b>[letter][digit]</b>=<b>[string]</b></code>
<div style="display:flex;flex-flow:row wrap;gap:0.5rem;">
 
  <div style="border-top:0.2rem solid red  ;"><code>cornerRadius</code></div>
where <code><b>[string]</b></code> is any valid <code>style="background:<b>[string]</b>;"</code>
  <div style="border-top:0.2rem solid orange;"><code>8</code></div>
 
  <div style="border-top:0.2rem solid green ;"><code><nowiki>{{chessboard | cornerRadius=10}}</nowiki></code></div>
e.g. <code>blue</code> or <code>rgba(0,0,255,0.5)</code> for semi-transparency
  <div style="border-top:0.2rem solid cyan  ;"><b><i>Optional:</i></b> specify the corner radius in px units</div>
|}
</div>
<div style="display:flex;flex-flow:row wrap;gap:0.5rem;">
  <div style="border-top:0.2rem solid red  ;"><code>hideNotation</code></div>
  <div style="border-top:0.2rem solid orange;"><code>[A-H]</code>/<code>[1-8]</code></div>
  <div style="border-top:0.2rem solid green ;"><code><nowiki>{{chessboard | hideNotation=}}</nowiki></code></div>
  <div style="border-top:0.2rem solid cyan  ;"><b><i>Optional:</i></b> hide algebraic notation</div>
</div>
<div style="display:flex;flex-flow:row wrap;gap:0.5rem;">
  <div style="border-top:0.2rem solid red  ;"><code>notationSpacing</code></div>
  <div style="border-top:0.2rem solid orange;"><code>1.25</code></div>
  <div style="border-top:0.2rem solid green ;"><code><nowiki>{{chessboard | notationSpacing=2}}</nowiki></code></div>
  <div style="border-top:0.2rem solid cyan  ;"><b><i>Optional:</i></b> specify the size of the algebraic notation spacing in rem units</div>
</div>
</div>
== Chess starting position ==
== Chess starting position ==



Revision as of 22:17, 13 December 2021

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

To insert this chessboard template into a BGA wiki page, simply type {{chessboard}} when editing the page, or alternatively copy one of the examples below.

Note: Game Help pages (e.g. 'GameHelpChess') also display on BGA's Rules Summary pages e.g. https://boardgamearena.com/gamepanel?game=chess under HOW TO PLAY? > See More > RULES SUMMARY

Empty board template:

{{chessboard
| a8= | b8= | c8= | d8= | e8= | f8= | g8= | h8= 
| a7= | b7= | c7= | d7= | e7= | f7= | g7= | h7= 
| a6= | b6= | c6= | d6= | e6= | f6= | g6= | h6= 
| a5= | b5= | c5= | d5= | e5= | f5= | g5= | h5= 
| a4= | b4= | c4= | d4= | e4= | f4= | g4= | h4= 
| a3= | b3= | c3= | d3= | e3= | f3= | g3= | h3= 
| a2= | b2= | c2= | d2= | e2= | f2= | g2= | h2= 
| a1= | b1= | c1= | d1= | e1= | f1= | g1= | h1= 
}}
Parameter
Default value
Example
Description
a8
{{emptySquare}}
{{chessboard | a8={{BlackRook}}}}
Optional: place an image in any square using [letter][digit]=[[File:ImageFileName|Image Tooltip]] or [letter][digit]={{templateName}} where [letter][digit] is the algebraic coordinate
Upload your game piece image here
highlighta8
null
{{chessboard | highlighta8=red}}
Optional: highlight any square using highlight[letter][digit]=[string] where [string] is any valid style="background:[string];" e.g. blue or rgba(0,0,255,0.5) for semi-transparency
squareSize
46
{{chessboard | squareSize=50}}
Optional: specify the square dimensions in px units
lightSquareColour
#fff (white)
{{chessboard | lightSquareColour=lightgreen}}
Optional: specify the light square colour as [string] where [string] is any valid style="background:[string];"
darkSquareColour
#ddd (grey)
{{chessboard | darkSquareColour=darkblue}}
Optional: specify the dark square colour as [string] where [string] is any valid style="background:[string];"
borderThickness
2
{{chessboard | borderThickness=3}}
Optional: specify the border thickness in px units
cornerRadius
8
{{chessboard | cornerRadius=10}}
Optional: specify the corner radius in px units
hideNotation
[A-H]/[1-8]
{{chessboard | hideNotation=}}
Optional: hide algebraic notation
notationSpacing
1.25
{{chessboard | notationSpacing=2}}
Optional: specify the size of the algebraic notation spacing in rem units

Chess starting position

A
B
C
D
E
F
G
H
8
Rook
Knight
Bishop
Queen
King
Bishop
Knight
Rook
8
7
Pawn
Pawn
Pawn
Pawn
Pawn
Pawn
Pawn
Pawn
7
6
6
5
5
4
4
3
3
2
Pawn
Pawn
Pawn
Pawn
Pawn
Pawn
Pawn
Pawn
2
1
Rook
Knight
Bishop
Queen
King
Bishop
Knight
Rook
1
A
B
C
D
E
F
G
H
{{chessboard | lightSquareColour=#efe | darkSquareColour=#cdc
| a8={{blackRook}}  | b8={{blackKnight}}| c8={{blackBishop}}| d8={{blackQueen}} | e8={{blackKing}}  | f8={{blackBishop}}| g8={{blackKnight}}| h8={{blackRook}}
| a7={{blackPawn}}  | b7={{blackPawn}}  | c7={{blackPawn}}  | d7={{blackPawn}}  | e7={{blackPawn}}  | f7={{blackPawn}}  | g7={{blackPawn}}  | h7={{blackPawn}}
| a6=               | b6=               | c6=               | d6=               | e6=               | f6=               | g6=               | h6=               
| a5=               | b5=               | c5=               | d5=               | e5=               | f5=               | g5=               | h5=               
| a4=               | b4=               | c4=               | d4=               | e4=               | f4=               | g4=               | h4=               
| a3=               | b3=               | c3=               | d3=               | e3=               | f3=               | g3=               | h3=               
| a2={{whitePawn}}  | b2={{whitePawn}}  | c2={{whitePawn}}  | d2={{whitePawn}}  | e2={{whitePawn}}  | f2={{whitePawn}}  | g2={{whitePawn}}  | h2={{whitePawn}}
| a1={{whiteRook}}  | b1={{whiteKnight}}| c1={{whiteBishop}}| d1={{whiteQueen}} | e1={{whiteKing}}  | f1={{whiteBishop}}| g1={{whiteKnight}}| h1={{whiteRook}}
}}