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
m (parameters section)
(Converted wiki markup to HTML)
Line 2: Line 2:
== Basic empty chessboard ==
== Basic empty chessboard ==
</noinclude>
</noinclude>
{| style="text-align:center; max-width:{{{maxWidth|400px}}};"
<div style="display: grid; grid-template: {{{notationBorder|20px}}} repeat(8,{{{squareSize|45px}}}) {{{notationBorder|20px}}} / {{{notationBorder|20px}}} repeat(8,{{{squareSize|45px}}}) {{{notationBorder|20px}}}; place-items: center;">
|-
<div></div>
| style="width: {{{numbersColumnWidth|20px}}}; height: {{{numbersColumnWidth|20px}}};"|
<div>A</div>
| style="width: {{{squareSize|45px}}}; height: {{{numbersColumnWidth|20px}}};"| A
<div>B</div>
| style="width: {{{squareSize|45px}}}; height: {{{numbersColumnWidth|20px}}};"| B
<div>C</div>
| style="width: {{{squareSize|45px}}}; height: {{{numbersColumnWidth|20px}}};"| C
<div>D</div>
| style="width: {{{squareSize|45px}}}; height: {{{numbersColumnWidth|20px}}};"| D
<div>E</div>
| style="width: {{{squareSize|45px}}}; height: {{{numbersColumnWidth|20px}}};"| E
<div>F</div>
| style="width: {{{squareSize|45px}}}; height: {{{numbersColumnWidth|20px}}};"| F
<div>G</div>
| style="width: {{{squareSize|45px}}}; height: {{{numbersColumnWidth|20px}}};"| G
<div>H</div>
| style="width: {{{squareSize|45px}}}; height: {{{numbersColumnWidth|20px}}};"| H
<div></div>
| style="width: {{{numbersColumnWidth|20px}}}; height: {{{numbersColumnWidth|20px}}};"|
<div>8</div>
|-
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{a8|{{emptySquare}}}}}</div>{{{highlighta8|{{emptySquare}}}}}</div></div>
| style="width: {{{numbersColumnWidth|20px}}}; height: {{{squareSize|45px}}};| 8
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{b8|{{emptySquare}}}}}</div>{{{highlightb8|{{emptySquare}}}}}</div></div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{a8|{{emptySquare}}}}}</div>{{{highlighta8|{{emptySquare}}}}}</div>
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{c8|{{emptySquare}}}}}</div>{{{highlightc8|{{emptySquare}}}}}</div></div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{b8|{{emptySquare}}}}}</div>{{{highlightb8|{{emptySquare}}}}}</div>
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{d8|{{emptySquare}}}}}</div>{{{highlightd8|{{emptySquare}}}}}</div></div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{c8|{{emptySquare}}}}}</div>{{{highlightc8|{{emptySquare}}}}}</div>
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{e8|{{emptySquare}}}}}</div>{{{highlighte8|{{emptySquare}}}}}</div></div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{d8|{{emptySquare}}}}}</div>{{{highlightd8|{{emptySquare}}}}}</div>
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{f8|{{emptySquare}}}}}</div>{{{highlightf8|{{emptySquare}}}}}</div></div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{e8|{{emptySquare}}}}}</div>{{{highlighte8|{{emptySquare}}}}}</div>
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{g8|{{emptySquare}}}}}</div>{{{highlightg8|{{emptySquare}}}}}</div></div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{f8|{{emptySquare}}}}}</div>{{{highlightf8|{{emptySquare}}}}}</div>
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{h8|{{emptySquare}}}}}</div>{{{highlighth8|{{emptySquare}}}}}</div></div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{g8|{{emptySquare}}}}}</div>{{{highlightg8|{{emptySquare}}}}}</div>
<div>8</div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{h8|{{emptySquare}}}}}</div>{{{highlighth8|{{emptySquare}}}}}</div>
<div>7</div>
| 8
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{a7|{{emptySquare}}}}}</div>{{{highlighta7|{{emptySquare}}}}}</div></div>
|-
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{b7|{{emptySquare}}}}}</div>{{{highlightb7|{{emptySquare}}}}}</div></div>
| style="width: {{{numbersColumnWidth|20px}}}; height: {{{squareSize|45px}}};"| 7
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{c7|{{emptySquare}}}}}</div>{{{highlightc7|{{emptySquare}}}}}</div></div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{a7|{{emptySquare}}}}}</div>{{{highlighta7|{{emptySquare}}}}}</div>
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{d7|{{emptySquare}}}}}</div>{{{highlightd7|{{emptySquare}}}}}</div></div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{b7|{{emptySquare}}}}}</div>{{{highlightb7|{{emptySquare}}}}}</div>
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{e7|{{emptySquare}}}}}</div>{{{highlighte7|{{emptySquare}}}}}</div></div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{c7|{{emptySquare}}}}}</div>{{{highlightc7|{{emptySquare}}}}}</div>
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{f7|{{emptySquare}}}}}</div>{{{highlightf7|{{emptySquare}}}}}</div></div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{d7|{{emptySquare}}}}}</div>{{{highlightd7|{{emptySquare}}}}}</div>
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{g7|{{emptySquare}}}}}</div>{{{highlightg7|{{emptySquare}}}}}</div></div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{e7|{{emptySquare}}}}}</div>{{{highlighte7|{{emptySquare}}}}}</div>
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{h7|{{emptySquare}}}}}</div>{{{highlighth7|{{emptySquare}}}}}</div></div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{f7|{{emptySquare}}}}}</div>{{{highlightf7|{{emptySquare}}}}}</div>
<div>7</div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{g7|{{emptySquare}}}}}</div>{{{highlightg7|{{emptySquare}}}}}</div>
<div>6</div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{h7|{{emptySquare}}}}}</div>{{{highlighth7|{{emptySquare}}}}}</div>
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{a6|{{emptySquare}}}}}</div>{{{highlighta6|{{emptySquare}}}}}</div></div>
| 7
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{b6|{{emptySquare}}}}}</div>{{{highlightb6|{{emptySquare}}}}}</div></div>
|-
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{c6|{{emptySquare}}}}}</div>{{{highlightc6|{{emptySquare}}}}}</div></div>
| style="width: {{{numbersColumnWidth|20px}}}; height: {{{squareSize|45px}}};"| 6
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{d6|{{emptySquare}}}}}</div>{{{highlightd6|{{emptySquare}}}}}</div></div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{a6|{{emptySquare}}}}}</div>{{{highlighta6|{{emptySquare}}}}}</div>
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{e6|{{emptySquare}}}}}</div>{{{highlighte6|{{emptySquare}}}}}</div></div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{b6|{{emptySquare}}}}}</div>{{{highlightb6|{{emptySquare}}}}}</div>
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{f6|{{emptySquare}}}}}</div>{{{highlightf6|{{emptySquare}}}}}</div></div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{c6|{{emptySquare}}}}}</div>{{{highlightc6|{{emptySquare}}}}}</div>
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{g6|{{emptySquare}}}}}</div>{{{highlightg6|{{emptySquare}}}}}</div></div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{d6|{{emptySquare}}}}}</div>{{{highlightd6|{{emptySquare}}}}}</div>
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{h6|{{emptySquare}}}}}</div>{{{highlighth6|{{emptySquare}}}}}</div></div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{e6|{{emptySquare}}}}}</div>{{{highlighte6|{{emptySquare}}}}}</div>
<div>6</div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{f6|{{emptySquare}}}}}</div>{{{highlightf6|{{emptySquare}}}}}</div>
<div>5</div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{g6|{{emptySquare}}}}}</div>{{{highlightg6|{{emptySquare}}}}}</div>
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{a5|{{emptySquare}}}}}</div>{{{highlighta5|{{emptySquare}}}}}</div></div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{h6|{{emptySquare}}}}}</div>{{{highlighth6|{{emptySquare}}}}}</div>
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{b5|{{emptySquare}}}}}</div>{{{highlightb5|{{emptySquare}}}}}</div></div>
| 6
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{c5|{{emptySquare}}}}}</div>{{{highlightc5|{{emptySquare}}}}}</div></div>
|-
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{d5|{{emptySquare}}}}}</div>{{{highlightd5|{{emptySquare}}}}}</div></div>
| style="width: {{{numbersColumnWidth|20px}}}; height: {{{squareSize|45px}}};"| 5
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{e5|{{emptySquare}}}}}</div>{{{highlighte5|{{emptySquare}}}}}</div></div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{a5|{{emptySquare}}}}}</div>{{{highlighta5|{{emptySquare}}}}}</div>
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{f5|{{emptySquare}}}}}</div>{{{highlightf5|{{emptySquare}}}}}</div></div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{b5|{{emptySquare}}}}}</div>{{{highlightb5|{{emptySquare}}}}}</div>
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{g5|{{emptySquare}}}}}</div>{{{highlightg5|{{emptySquare}}}}}</div></div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{c5|{{emptySquare}}}}}</div>{{{highlightc5|{{emptySquare}}}}}</div>
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{h5|{{emptySquare}}}}}</div>{{{highlighth5|{{emptySquare}}}}}</div></div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{d5|{{emptySquare}}}}}</div>{{{highlightd5|{{emptySquare}}}}}</div>
<div>5</div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{e5|{{emptySquare}}}}}</div>{{{highlighte5|{{emptySquare}}}}}</div>
<div>4</div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{f5|{{emptySquare}}}}}</div>{{{highlightf5|{{emptySquare}}}}}</div>
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{a4|{{emptySquare}}}}}</div>{{{highlighta4|{{emptySquare}}}}}</div></div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{g5|{{emptySquare}}}}}</div>{{{highlightg5|{{emptySquare}}}}}</div>
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{b4|{{emptySquare}}}}}</div>{{{highlightb4|{{emptySquare}}}}}</div></div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{h5|{{emptySquare}}}}}</div>{{{highlighth5|{{emptySquare}}}}}</div>
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{c4|{{emptySquare}}}}}</div>{{{highlightc4|{{emptySquare}}}}}</div></div>
| 5
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{d4|{{emptySquare}}}}}</div>{{{highlightd4|{{emptySquare}}}}}</div></div>
|-
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{e4|{{emptySquare}}}}}</div>{{{highlighte4|{{emptySquare}}}}}</div></div>
| style="width: {{{numbersColumnWidth|20px}}}; height: {{{squareSize|45px}}};"| 4
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{f4|{{emptySquare}}}}}</div>{{{highlightf4|{{emptySquare}}}}}</div></div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{a4|{{emptySquare}}}}}</div>{{{highlighta4|{{emptySquare}}}}}</div>
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{g4|{{emptySquare}}}}}</div>{{{highlightg4|{{emptySquare}}}}}</div></div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{b4|{{emptySquare}}}}}</div>{{{highlightb4|{{emptySquare}}}}}</div>
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{h4|{{emptySquare}}}}}</div>{{{highlighth4|{{emptySquare}}}}}</div></div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{c4|{{emptySquare}}}}}</div>{{{highlightc4|{{emptySquare}}}}}</div>
<div>4</div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{d4|{{emptySquare}}}}}</div>{{{highlightd4|{{emptySquare}}}}}</div>
<div>3</div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{e4|{{emptySquare}}}}}</div>{{{highlighte4|{{emptySquare}}}}}</div>
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{a3|{{emptySquare}}}}}</div>{{{highlighta3|{{emptySquare}}}}}</div></div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{f4|{{emptySquare}}}}}</div>{{{highlightf4|{{emptySquare}}}}}</div>
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{b3|{{emptySquare}}}}}</div>{{{highlightb3|{{emptySquare}}}}}</div></div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{g4|{{emptySquare}}}}}</div>{{{highlightg4|{{emptySquare}}}}}</div>
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{c3|{{emptySquare}}}}}</div>{{{highlightc3|{{emptySquare}}}}}</div></div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{h4|{{emptySquare}}}}}</div>{{{highlighth4|{{emptySquare}}}}}</div>
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{d3|{{emptySquare}}}}}</div>{{{highlightd3|{{emptySquare}}}}}</div></div>
| 4
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{e3|{{emptySquare}}}}}</div>{{{highlighte3|{{emptySquare}}}}}</div></div>
|-
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{f3|{{emptySquare}}}}}</div>{{{highlightf3|{{emptySquare}}}}}</div></div>
| style="width: {{{numbersColumnWidth|20px}}}; height: {{{squareSize|45px}}};"| 3
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{g3|{{emptySquare}}}}}</div>{{{highlightg3|{{emptySquare}}}}}</div></div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{a3|{{emptySquare}}}}}</div>{{{highlighta3|{{emptySquare}}}}}</div>
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{h3|{{emptySquare}}}}}</div>{{{highlighth3|{{emptySquare}}}}}</div></div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{b3|{{emptySquare}}}}}</div>{{{highlightb3|{{emptySquare}}}}}</div>
<div>3</div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{c3|{{emptySquare}}}}}</div>{{{highlightc3|{{emptySquare}}}}}</div>
<div>2</div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{d3|{{emptySquare}}}}}</div>{{{highlightd3|{{emptySquare}}}}}</div>
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{a2|{{emptySquare}}}}}</div>{{{highlighta2|{{emptySquare}}}}}</div></div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{e3|{{emptySquare}}}}}</div>{{{highlighte3|{{emptySquare}}}}}</div>
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{b2|{{emptySquare}}}}}</div>{{{highlightb2|{{emptySquare}}}}}</div></div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{f3|{{emptySquare}}}}}</div>{{{highlightf3|{{emptySquare}}}}}</div>
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{c2|{{emptySquare}}}}}</div>{{{highlightc2|{{emptySquare}}}}}</div></div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{g3|{{emptySquare}}}}}</div>{{{highlightg3|{{emptySquare}}}}}</div>
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{d2|{{emptySquare}}}}}</div>{{{highlightd2|{{emptySquare}}}}}</div></div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{h3|{{emptySquare}}}}}</div>{{{highlighth3|{{emptySquare}}}}}</div>
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{e2|{{emptySquare}}}}}</div>{{{highlighte2|{{emptySquare}}}}}</div></div>
| 3
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{f2|{{emptySquare}}}}}</div>{{{highlightf2|{{emptySquare}}}}}</div></div>
|-
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{g2|{{emptySquare}}}}}</div>{{{highlightg2|{{emptySquare}}}}}</div></div>
| style="width: {{{numbersColumnWidth|20px}}}; height: {{{squareSize|45px}}};"| 2
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{h2|{{emptySquare}}}}}</div>{{{highlighth2|{{emptySquare}}}}}</div></div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{a2|{{emptySquare}}}}}</div>{{{highlighta2|{{emptySquare}}}}}</div>
<div>2</div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{b2|{{emptySquare}}}}}</div>{{{highlightb2|{{emptySquare}}}}}</div>
<div>1</div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{c2|{{emptySquare}}}}}</div>{{{highlightc2|{{emptySquare}}}}}</div>
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{a1|{{emptySquare}}}}}</div>{{{highlighta1|{{emptySquare}}}}}</div></div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{d2|{{emptySquare}}}}}</div>{{{highlightd2|{{emptySquare}}}}}</div>
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{b1|{{emptySquare}}}}}</div>{{{highlightb1|{{emptySquare}}}}}</div></div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{e2|{{emptySquare}}}}}</div>{{{highlighte2|{{emptySquare}}}}}</div>
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{c1|{{emptySquare}}}}}</div>{{{highlightc1|{{emptySquare}}}}}</div></div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{f2|{{emptySquare}}}}}</div>{{{highlightf2|{{emptySquare}}}}}</div>
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{d1|{{emptySquare}}}}}</div>{{{highlightd1|{{emptySquare}}}}}</div></div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{g2|{{emptySquare}}}}}</div>{{{highlightg2|{{emptySquare}}}}}</div>
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{e1|{{emptySquare}}}}}</div>{{{highlighte1|{{emptySquare}}}}}</div></div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{h2|{{emptySquare}}}}}</div>{{{highlighth2|{{emptySquare}}}}}</div>
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{f1|{{emptySquare}}}}}</div>{{{highlightf1|{{emptySquare}}}}}</div></div>
| 2
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{g1|{{emptySquare}}}}}</div>{{{highlightg1|{{emptySquare}}}}}</div></div>
|-
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{h1|{{emptySquare}}}}}</div>{{{highlighth1|{{emptySquare}}}}}</div></div>
| style="width: {{{numbersColumnWidth|20px}}}; height: {{{squareSize|45px}}};"| 1
<div>1</div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{a1|{{emptySquare}}}}}</div>{{{highlighta1|{{emptySquare}}}}}</div>
<div></div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{b1|{{emptySquare}}}}}</div>{{{highlightb1|{{emptySquare}}}}}</div>
<div>A</div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{c1|{{emptySquare}}}}}</div>{{{highlightc1|{{emptySquare}}}}}</div>
<div>B</div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{d1|{{emptySquare}}}}}</div>{{{highlightd1|{{emptySquare}}}}}</div>
<div>C</div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{e1|{{emptySquare}}}}}</div>{{{highlighte1|{{emptySquare}}}}}</div>
<div>D</div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{f1|{{emptySquare}}}}}</div>{{{highlightf1|{{emptySquare}}}}}</div>
<div>E</div>
| style="background: {{{darkSquareColour |#ddd}}};"| <div style="position:relative;"><div style="position:absolute;">{{{g1|{{emptySquare}}}}}</div>{{{highlightg1|{{emptySquare}}}}}</div>
<div>F</div>
| style="background: {{{lightSquareColour|#fff}}};"| <div style="position:relative;"><div style="position:absolute;">{{{h1|{{emptySquare}}}}}</div>{{{highlighth1|{{emptySquare}}}}}</div>
<div>G</div>
| 1
<div>H</div>
|-
<div></div>
| style="width: {{{numbersColumnWidth|20px}}}; height: {{{numbersColumnWidth|20px}}};"| 
</div>
| A
| B
| C
| D
| E
| F
| G
| H  
|
|}
<noinclude>
<noinclude>
To insert this chessboard template into a BGA wiki page, simply type <code><nowiki>{{chessboard}}</nowiki></code> when editing the page, or alternatively copy one of the examples below.
To insert this chessboard template into a BGA wiki page, simply type <code><nowiki>{{chessboard}}</nowiki></code> when editing the page, or alternatively copy one of the examples below.
Line 137: Line 127:
! Parameter !! Default value !! Example !! Description
! Parameter !! Default value !! Example !! Description
|- style="vertical-align: top; text-align: left;"
|- style="vertical-align: top; text-align: left;"
| <code>maxWidth</code>
| <code>notationBorder</code>
| <code>400px</code>
| <code><nowiki>{{chessboard | maxWidth=500px}}</nowiki></code>
| <i>optional:</i> specify the maximum width of the chessboard
|- style="vertical-align: top; text-align: left;"
| <code>numbersColumnWidth</code>
| <code>20px</code>
| <code>20px</code>
| <code><nowiki>{{chessboard | numbersColumnWidth=30px}}</nowiki></code>
| <code><nowiki>{{chessboard | notationBorder=30px}}</nowiki></code>
| <i>optional:</i> specify the width of the side columns
| <i>optional:</i> specify the size of the algebraic notation border
|- style="vertical-align: top; text-align: left;"
|- style="vertical-align: top; text-align: left;"
| <code>squareSize</code>
| <code>squareSize</code>
| <code>45px</code>
| <code>45px</code>
| <code><nowiki>{{chessboard | squareSize=50px}}</nowiki></code>
| <code><nowiki>{{chessboard | squareSize=50px}}</nowiki></code>
| <i>optional:</i> specify the square dimensions - 45px minimum
| <i>optional:</i> specify the square dimensions
|- style="vertical-align: top; text-align: left;"
|- style="vertical-align: top; text-align: left;"
| <code>lightSquareColour</code>
| <code>lightSquareColour</code>
Line 163: Line 148:
|- style="vertical-align: top; text-align: left;"
|- style="vertical-align: top; text-align: left;"
| <code>a8</code>
| <code>a8</code>
| <code>null</code>
| <code><nowiki>{{emptySquare}}</nowiki></code>
| <code><nowiki>{{chessboard | a8={{blackRook}}}}</nowiki></code>
| <code><nowiki>{{chessboard | a8={{blackRook}}}}</nowiki></code>
| <i>optional:</i> place an image in any square using:
| <i>optional:</i> place an image in any square using:

Revision as of 02:31, 12 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
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
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
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
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
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
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
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
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
notationBorder 20px {{chessboard | notationBorder=30px}} optional: specify the size of the algebraic notation border
squareSize 45px {{chessboard | squareSize=50px}} optional: specify the square dimensions
lightSquareColour #fff {{chessboard | lightSquareColour=#fee}} optional: specify the light square colour
darkSquareColour #ddd {{chessboard | darkSquareColour=#dcc}} optional: specify the dark square colour
a8 {{emptySquare}} {{chessboard | a8={{blackRook}}}} optional: place an image in any square using:

[letter][digit]=[[File:ImageFileName|Image Tooltip]] or {{templateName}}

Upload your game piece image here

highlighta8 {{emptySquare}} {{chessboard | highlighta8={{redSquare}}}} optional: highlight any square using:

highlight[letter][digit]={{redSquare}} or {{greenSquare}} or {{blueSquare}}

Chess starting position

A
B
C
D
E
F
G
H
8
Rook
Empty Square
Knight
Empty Square
Bishop
Empty Square
Queen
Empty Square
King
Empty Square
Bishop
Empty Square
Knight
Empty Square
Rook
Empty Square
8
7
Pawn
Empty Square
Pawn
Empty Square
Pawn
Empty Square
Pawn
Empty Square
Pawn
Empty Square
Pawn
Empty Square
Pawn
Empty Square
Pawn
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
Pawn
Empty Square
Pawn
Empty Square
Pawn
Empty Square
Pawn
Empty Square
Pawn
Empty Square
Pawn
Empty Square
Pawn
Empty Square
Pawn
Empty Square
2
1
Rook
Empty Square
Knight
Empty Square
Bishop
Empty Square
Queen
Empty Square
King
Empty Square
Bishop
Empty Square
Knight
Empty Square
Rook
Empty Square
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}}
}}