This is a documentation for Board Game Arena: play board games online !
Template:Chessboard: Difference between revisions
Jump to navigation
Jump to search
Sammy McSam (talk | contribs) (added border variables) |
Sammy McSam (talk | contribs) (removed notationSpacing variable) |
||
Line 2: | Line 2: | ||
== Basic empty chessboard == | == Basic empty chessboard == | ||
</noinclude> | </noinclude> | ||
<div style="display:grid;grid | <div style="display:grid;grid:repeat(10,{{{squareSize|46}}}px) / repeat(10, {{{squareSize|46}}}px);"> | ||
<div | <div></div> | ||
<div style=" | <div style="align-self:end;text-align:center;">{{{hideNotation|A}}}</div> | ||
<div style=" | <div style="align-self:end;text-align:center;">{{{hideNotation|B}}}</div> | ||
<div style=" | <div style="align-self:end;text-align:center;">{{{hideNotation|C}}}</div> | ||
<div style=" | <div style="align-self:end;text-align:center;">{{{hideNotation|D}}}</div> | ||
<div style=" | <div style="align-self:end;text-align:center;">{{{hideNotation|E}}}</div> | ||
<div style=" | <div style="align-self:end;text-align:center;">{{{hideNotation|F}}}</div> | ||
<div style=" | <div style="align-self:end;text-align:center;">{{{hideNotation|G}}}</div> | ||
<div style=" | <div style="align-self:end;text-align:center;">{{{hideNotation|H}}}</div> | ||
<div | <div></div> | ||
<div style=" | <div style="align-self:center;text-align:right;padding-right:4px;">{{{hideNotation|8}}}</div> | ||
<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;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=" | <div style="position:absolute;">{{{a8|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-top:solid {{{borderThickness|2}}}px {{{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=" | <div style="position:absolute;">{{{b8|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};"> | <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=" | <div style="position:absolute;">{{{c8|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-top:solid {{{borderThickness|2}}}px {{{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=" | <div style="position:absolute;">{{{d8|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};"> | <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=" | <div style="position:absolute;">{{{e8|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-top:solid {{{borderThickness|2}}}px {{{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=" | <div style="position:absolute;">{{{f8|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};"> | <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=" | <div style="position:absolute;">{{{g8|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<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;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=" | <div style="position:absolute;">{{{h8|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style=" | <div style="align-self:center;text-align:left ;padding-left :4px;">{{{hideNotation|8}}}</div> | ||
<div style=" | <div style="align-self:center;text-align:right;padding-right:4px;">{{{hideNotation|7}}}</div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-left:solid {{{borderThickness|2}}}px {{{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=" | <div style="position:absolute;">{{{a7|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | <div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightb7|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightb7|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{b7|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | <div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightc7|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightc7|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{c7|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | <div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightd7|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightd7|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{d7|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | <div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlighte7|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlighte7|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{e7|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | <div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightf7|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightf7|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{f7|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | <div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightg7|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightg7|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{g7|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};"> | <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=" | <div style="position:absolute;">{{{h7|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style=" | <div style="align-self:center;text-align:left ;padding-left :4px;">{{{hideNotation|7}}}</div> | ||
<div style=" | <div style="align-self:center;text-align:right;padding-right:4px;">{{{hideNotation|6}}}</div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};"> | <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=" | <div style="position:absolute;">{{{a6|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | <div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightb6|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightb6|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{b6|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | <div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightc6|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightc6|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{c6|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | <div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightd6|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightd6|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{d6|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | <div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlighte6|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlighte6|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{e6|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | <div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightf6|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightf6|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{f6|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | <div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightg6|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightg6|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{g6|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-right:solid {{{borderThickness|2}}}px {{{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=" | <div style="position:absolute;">{{{h6|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style=" | <div style="align-self:center;text-align:left ;padding-left :4px;">{{{hideNotation|6}}}</div> | ||
<div style=" | <div style="align-self:center;text-align:right;padding-right:4px;">{{{hideNotation|5}}}</div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-left:solid {{{borderThickness|2}}}px {{{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=" | <div style="position:absolute;">{{{a5|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | <div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightb5|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightb5|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{b5|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | <div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightc5|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightc5|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{c5|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | <div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightd5|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightd5|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{d5|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | <div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlighte5|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlighte5|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{e5|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | <div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightf5|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightf5|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{f5|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | <div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightg5|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightg5|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{g5|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};"> | <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=" | <div style="position:absolute;">{{{h5|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style=" | <div style="align-self:center;text-align:left ;padding-left :4px;">{{{hideNotation|5}}}</div> | ||
<div style=" | <div style="align-self:center;text-align:right;padding-right:4px;">{{{hideNotation|4}}}</div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};"> | <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=" | <div style="position:absolute;">{{{a4|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | <div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightb4|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightb4|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{b4|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | <div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightc4|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightc4|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{c4|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | <div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightd4|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightd4|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{d4|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | <div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlighte4|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlighte4|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{e4|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | <div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightf4|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightf4|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{f4|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | <div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightg4|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightg4|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{g4|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-right:solid {{{borderThickness|2}}}px {{{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=" | <div style="position:absolute;">{{{h4|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style=" | <div style="align-self:center;text-align:left ;padding-left :4px;">{{{hideNotation|4}}}</div> | ||
<div style=" | <div style="align-self:center;text-align:right;padding-right:4px;">{{{hideNotation|3}}}</div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-left:solid {{{borderThickness|2}}}px {{{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=" | <div style="position:absolute;">{{{a3|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | <div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightb3|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightb3|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{b3|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | <div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightc3|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightc3|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{c3|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | <div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightd3|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightd3|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{d3|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | <div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlighte3|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlighte3|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{e3|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | <div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightf3|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightf3|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{f3|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | <div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightg3|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightg3|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{g3|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};"> | <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=" | <div style="position:absolute;">{{{h3|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style=" | <div style="align-self:center;text-align:left ;padding-left :4px;">{{{hideNotation|3}}}</div> | ||
<div style=" | <div style="align-self:center;text-align:right;padding-right:4px;">{{{hideNotation|2}}}</div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};"> | <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=" | <div style="position:absolute;">{{{a2|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | <div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightb2|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightb2|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{b2|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | <div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightc2|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightc2|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{c2|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | <div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightd2|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightd2|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{d2|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | <div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlighte2|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlighte2|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{e2|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | <div style="display:grid;background:{{{darkSquareColour|#ddd}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightf2|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightf2|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{f2|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | <div style="display:grid;background:{{{lightSquareColour|#fff}}};"> | ||
<div style="display:grid;place-items:center;position:relative;background:{{{highlightg2|}}};"> | <div style="display:grid;place-items:center;position:relative;background:{{{highlightg2|}}};"> | ||
<div style=" | <div style="position:absolute;">{{{g2|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-right:solid {{{borderThickness|2}}}px {{{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=" | <div style="position:absolute;">{{{h2|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style=" | <div style="align-self:center;text-align:left ;padding-left :4px;">{{{hideNotation|2}}}</div> | ||
<div style=" | <div style="align-self:center;text-align:right;padding-right:4px;">{{{hideNotation|1}}}</div> | ||
<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;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=" | <div style="position:absolute;">{{{a1|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};"> | <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=" | <div style="position:absolute;">{{{b1|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-bottom:solid {{{borderThickness|2}}}px {{{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=" | <div style="position:absolute;">{{{c1|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};"> | <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=" | <div style="position:absolute;">{{{d1|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-bottom:solid {{{borderThickness|2}}}px {{{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=" | <div style="position:absolute;">{{{e1|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};"> | <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=" | <div style="position:absolute;">{{{f1|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-bottom:solid {{{borderThickness|2}}}px {{{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=" | <div style="position:absolute;">{{{g1|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<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;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=" | <div style="position:absolute;">{{{h1|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div style=" | <div style="align-self:center;text-align:left;padding-left:4px;">{{{hideNotation|1}}}</div> | ||
<div | <div></div> | ||
<div style=" | <div style="align-self:start;text-align:center;">{{{hideNotation|A}}}</div> | ||
<div style=" | <div style="align-self:start;text-align:center;">{{{hideNotation|B}}}</div> | ||
<div style=" | <div style="align-self:start;text-align:center;">{{{hideNotation|C}}}</div> | ||
<div style=" | <div style="align-self:start;text-align:center;">{{{hideNotation|D}}}</div> | ||
<div style=" | <div style="align-self:start;text-align:center;">{{{hideNotation|E}}}</div> | ||
<div style=" | <div style="align-self:start;text-align:center;">{{{hideNotation|F}}}</div> | ||
<div style=" | <div style="align-self:start;text-align:center;">{{{hideNotation|G}}}</div> | ||
<div style=" | <div style="align-self:start;text-align:center;">{{{hideNotation|H}}}</div> | ||
<div | <div></div> | ||
</div> | </div> | ||
<noinclude> | <noinclude> | ||
Line 379: | Line 379: | ||
}} | }} | ||
</pre> | </pre> | ||
<div style="display:grid;grid-template-columns:minmax(min-content,max-content);gap: | <div style="display:grid;grid-template-columns:minmax(min-content,max-content);gap:1.5rem;overflow:hidden;text-overflow:ellipsis;"> | ||
<div style="display:flex;flex-flow:row wrap;gap:0.5rem;"> | <div style="display:flex;flex-flow:row wrap;gap:0.5rem;"> | ||
<div style="border-top:0. | <div style="border-top:0.25rem solid red ;border-left:0.15rem solid red ;border-radius:0.5rem 0.5rem 0 0;padding-left:0.2rem;font-weight:bold;width:8rem;">Parameter</div> | ||
<div style="border-top:0. | <div style="border-top:0.25rem solid orange;border-left:0.15rem solid orange;border-radius:0.5rem 0.5rem 0 0;padding-left:0.2rem;font-weight:bold;width:8rem;">Default value</div> | ||
<div style="border-top:0. | <div style="border-top:0.25rem solid green ;border-left:0.15rem solid green ;border-radius:0.5rem 0.5rem 0 0;padding-left:0.2rem;font-weight:bold;width:8rem;">Example</div> | ||
<div style="border-top:0. | <div style="border-top:0.25rem solid cyan ;border-left:0.15rem solid cyan ;border-radius:0.5rem 0.5rem 0 0;padding-left:0.2rem;font-weight:bold;width:8rem;">Description</div> | ||
</div> | </div> | ||
<div style="display:flex;flex-flow:row wrap;gap:0.5rem;"> | <div style="display:flex;flex-flow:row wrap;gap:0.5rem;"> | ||
<div style="border-top:0.2rem solid red ;"><code>a8</code></div> | <div style="border-top:0.2rem solid red ;border-left:0.15rem solid red ;border-radius:0.5rem 0.5rem 0 0;"><code>a8</code></div> | ||
<div style="border-top:0.2rem solid orange;"><code><nowiki>{{emptySquare}}</nowiki></code></div> | <div style="border-top:0.2rem solid orange;border-left:0.15rem solid orange;border-radius:0.5rem 0.5rem 0 0;"><code><nowiki>{{emptySquare}}</nowiki></code></div> | ||
<div style="border-top:0.2rem solid green ;"><code><nowiki>{{chessboard | a8={{BlackRook}}}}</nowiki></code></div> | <div style="border-top:0.2rem solid green ;border-left:0.15rem solid green ;border-radius:0.5rem 0.5rem 0 0;"><code><nowiki>{{chessboard | a8={{BlackRook}}}}</nowiki></code></div> | ||
<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> | <div style="border-top:0.2rem solid cyan ;border-left:0.15rem solid cyan ;border-radius:0.5rem 0.5rem 0 0;padding-left:0.2rem;"><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> | ||
</div> | </div> | ||
<div style="display:flex;flex-flow:row wrap;gap:0.5rem;"> | <div style="display:flex;flex-flow:row wrap;gap:0.5rem;"> | ||
<div style="border-top:0.2rem solid red ;"><code>highlighta8</code></div> | <div style="border-top:0.2rem solid red ;border-left:0.15rem solid red ;border-radius:0.5rem 0.5rem 0 0;"><code>highlighta8</code></div> | ||
<div style="border-top:0.2rem solid orange;"><code>null</code></div> | <div style="border-top:0.2rem solid orange;border-left:0.15rem solid orange;border-radius:0.5rem 0.5rem 0 0;"><code>null</code></div> | ||
<div style="border-top:0.2rem solid green ;"><code><nowiki>{{chessboard | highlighta8=red}}</nowiki></code></div> | <div style="border-top:0.2rem solid green ;border-left:0.15rem solid green ;border-radius:0.5rem 0.5rem 0 0;"><code><nowiki>{{chessboard | highlighta8=red}}</nowiki></code></div> | ||
<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> | <div style="border-top:0.2rem solid cyan ;border-left:0.15rem solid cyan ;border-radius:0.5rem 0.5rem 0 0;padding-left:0.2rem;"><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> | ||
</div> | </div> | ||
<div style="display:flex;flex-flow:row wrap;gap:0.5rem;"> | <div style="display:flex;flex-flow:row wrap;gap:0.5rem;"> | ||
<div style="border-top:0.2rem solid red ;"><code>squareSize</code></div> | <div style="border-top:0.2rem solid red ;border-left:0.15rem solid red ;border-radius:0.5rem 0.5rem 0 0;"><code>squareSize</code></div> | ||
<div style="border-top:0.2rem solid orange;"><code><nowiki>46</nowiki></code></div> | <div style="border-top:0.2rem solid orange;border-left:0.15rem solid orange;border-radius:0.5rem 0.5rem 0 0;"><code><nowiki>46</nowiki></code></div> | ||
<div style="border-top:0.2rem solid green ;"><code><nowiki>{{chessboard | squareSize=50}}</nowiki></code></div> | <div style="border-top:0.2rem solid green ;border-left:0.15rem solid green ;border-radius:0.5rem 0.5rem 0 0;"><code><nowiki>{{chessboard | squareSize=50}}</nowiki></code></div> | ||
<div style="border-top:0.2rem solid cyan ;"><b><i>Optional:</i></b> specify the square dimensions in px units</div> | <div style="border-top:0.2rem solid cyan ;border-left:0.15rem solid cyan ;border-radius:0.5rem 0.5rem 0 0;padding-left:0.2rem;"><b><i>Optional:</i></b> specify the square dimensions in px units</div> | ||
</div> | </div> | ||
<div style="display:flex;flex-flow:row wrap;gap:0.5rem;"> | <div style="display:flex;flex-flow:row wrap;gap:0.5rem;"> | ||
<div style="border-top:0.2rem solid red ;"><code>lightSquareColour</code></div> | <div style="border-top:0.2rem solid red ;border-left:0.15rem solid red ;border-radius:0.5rem 0.5rem 0 0;"><code>lightSquareColour</code></div> | ||
<div style="border-top:0.2rem solid orange;"><code>#fff</code> (white)</div> | <div style="border-top:0.2rem solid orange;border-left:0.15rem solid orange;border-radius:0.5rem 0.5rem 0 0;"><code>#fff</code> (white)</div> | ||
<div style="border-top:0.2rem solid green ;"><code><nowiki>{{chessboard | lightSquareColour=lightgreen}}</nowiki></code></div> | <div style="border-top:0.2rem solid green ;border-left:0.15rem solid green ;border-radius:0.5rem 0.5rem 0 0;"><code><nowiki>{{chessboard | lightSquareColour=lightgreen}}</nowiki></code></div> | ||
<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> | <div style="border-top:0.2rem solid cyan ;border-left:0.15rem solid cyan ;border-radius:0.5rem 0.5rem 0 0;padding-left:0.2rem;"><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> | ||
</div> | </div> | ||
<div style="display:flex;flex-flow:row wrap;gap:0.5rem;"> | <div style="display:flex;flex-flow:row wrap;gap:0.5rem;"> | ||
<div style="border-top:0.2rem solid red ;"><code>darkSquareColour</code></div> | <div style="border-top:0.2rem solid red ;border-left:0.15rem solid red ;border-radius:0.5rem 0.5rem 0 0;"><code>darkSquareColour</code></div> | ||
<div style="border-top:0.2rem solid orange;"><code>#ddd</code> (grey)</div> | <div style="border-top:0.2rem solid orange;border-left:0.15rem solid orange;border-radius:0.5rem 0.5rem 0 0;"><code>#ddd</code> (grey)</div> | ||
<div style="border-top:0.2rem solid green ;"><code><nowiki>{{chessboard | darkSquareColour=darkblue}}</nowiki></code></div> | <div style="border-top:0.2rem solid green ;border-left:0.15rem solid green ;border-radius:0.5rem 0.5rem 0 0;"><code><nowiki>{{chessboard | darkSquareColour=darkblue}}</nowiki></code></div> | ||
<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 style="border-top:0.2rem solid cyan ;border-left:0.15rem solid cyan ;border-radius:0.5rem 0.5rem 0 0;padding-left:0.2rem;"><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> | </div> | ||
<div style="display:flex;flex-flow:row wrap;gap:0.5rem;"> | <div style="display:flex;flex-flow:row wrap;gap:0.5rem;"> | ||
<div style="border-top:0.2rem solid red ;"><code>borderThickness</code></div> | <div style="border-top:0.2rem solid red ;border-left:0.15rem solid red ;border-radius:0.5rem 0.5rem 0 0;"><code>borderThickness</code></div> | ||
<div style="border-top:0.2rem solid orange;"><code>2</code></div> | <div style="border-top:0.2rem solid orange;border-left:0.15rem solid orange;border-radius:0.5rem 0.5rem 0 0;"><code>2</code></div> | ||
<div style="border-top:0.2rem solid green ;"><code><nowiki>{{chessboard | borderThickness=3}}</nowiki></code></div> | <div style="border-top:0.2rem solid green ;border-left:0.15rem solid green ;border-radius:0.5rem 0.5rem 0 0;"><code><nowiki>{{chessboard | borderThickness=3}}</nowiki></code></div> | ||
<div style="border-top:0.2rem solid cyan ;"><b><i>Optional:</i></b> specify the border thickness in px units</div> | <div style="border-top:0.2rem solid cyan ;border-left:0.15rem solid cyan ;border-radius:0.5rem 0.5rem 0 0;padding-left:0.2rem;"><b><i>Optional:</i></b> specify the border thickness in px units</div> | ||
</div> | </div> | ||
<div style="display:flex;flex-flow:row wrap;gap:0.5rem;"> | <div style="display:flex;flex-flow:row wrap;gap:0.5rem;"> | ||
<div style="border-top:0.2rem solid red ;"><code>cornerRadius</code></div> | <div style="border-top:0.2rem solid red ;border-left:0.15rem solid red ;border-radius:0.5rem 0.5rem 0 0;"><code>cornerRadius</code></div> | ||
<div style="border-top:0.2rem solid orange;"><code>8</code></div> | <div style="border-top:0.2rem solid orange;border-left:0.15rem solid orange;border-radius:0.5rem 0.5rem 0 0;"><code>8</code></div> | ||
<div style="border-top:0.2rem solid green ;"><code><nowiki>{{chessboard | cornerRadius=10}}</nowiki></code></div> | <div style="border-top:0.2rem solid green ;border-left:0.15rem solid green ;border-radius:0.5rem 0.5rem 0 0;"><code><nowiki>{{chessboard | cornerRadius=10}}</nowiki></code></div> | ||
<div style="border-top:0.2rem solid cyan ;"><b><i>Optional:</i></b> specify the corner radius in px units</div> | <div style="border-top:0.2rem solid cyan ;border-left:0.15rem solid cyan ;border-radius:0.5rem 0.5rem 0 0;padding-left:0.2rem;"><b><i>Optional:</i></b> specify the corner radius in px units</div> | ||
</div> | </div> | ||
<div style="display:flex;flex-flow:row wrap;gap:0.5rem;"> | <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 red ;border-left:0.15rem solid red ;border-radius:0.5rem 0.5rem 0 0;"><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 orange;border-left:0.15rem solid orange;border-radius:0.5rem 0.5rem 0 0;"><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 green ;border-left:0.15rem solid green ;border-radius:0.5rem 0.5rem 0 0;"><code><nowiki>{{chessboard | hideNotation=}}</nowiki></code></div> | ||
<div style="border-top:0.2rem solid cyan ; | <div style="border-top:0.2rem solid cyan ;border-left:0.15rem solid cyan ;border-radius:0.5rem 0.5rem 0 0;padding-left:0.2rem;"><b><i>Optional:</i></b> hide algebraic notation</div> | ||
</div> | </div> | ||
</div> | </div> |
Revision as of 15:07, 15 December 2021
Basic empty chessboard
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= }}
Chess starting position
{{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}} }}