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) (removed notationSpacing variable) |
Sammy McSam (talk | contribs) (hideNotation also hides whitespace) |
||
Line 2: | Line 2: | ||
== Basic empty chessboard == | == Basic empty chessboard == | ||
</noinclude> | </noinclude> | ||
<div style="display:grid;grid:repeat( | <div style="display:grid;grid:{{{hideNotation|1.5rem}}} repeat(8,{{{squareSize|46}}}px) {{{hideNotation|1.5rem}}} / {{{hideNotation|1.5rem}}} repeat(8, {{{squareSize|46}}}px) {{{hideNotation|1.5rem}}};width:calc({{{hideNotation|3rem + }}}8 * {{{squareSize|46}}}px);height:calc({{{hideNotation|3rem + }}}8 * {{{squareSize|46}}}px);">{{{hideNotation| | ||
<div></div> | <div></div> | ||
<div style="align-self:end;text-align:center;"> | <div style="align-self:end;text-align:center;">A</div> | ||
<div style="align-self:end;text-align:center;"> | <div style="align-self:end;text-align:center;">B</div> | ||
<div style="align-self:end;text-align:center;"> | <div style="align-self:end;text-align:center;">C</div> | ||
<div style="align-self:end;text-align:center;"> | <div style="align-self:end;text-align:center;">D</div> | ||
<div style="align-self:end;text-align:center;"> | <div style="align-self:end;text-align:center;">E</div> | ||
<div style="align-self:end;text-align:center;"> | <div style="align-self:end;text-align:center;">F</div> | ||
<div style="align-self:end;text-align:center;"> | <div style="align-self:end;text-align:center;">G</div> | ||
<div style="align-self:end;text-align:center;"> | <div style="align-self:end;text-align:center;">H</div> | ||
<div></div> | <div></div> | ||
<div style="align-self:center;text-align:right;padding-right:4px;"> | <div style="align-self:center;text-align:right;padding-right:4px;">8</div>}}} | ||
<div style="display:grid | <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="position:absolute;">{{{a8|{{emptySquare}}}}}</div> | <div style="position:absolute;">{{{a8|{{emptySquare}}}}}</div> | ||
Line 53: | Line 53: | ||
<div style="position:absolute;">{{{h8|{{emptySquare}}}}}</div> | <div style="position:absolute;">{{{h8|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">8</div> | ||
<div style="align-self:center;text-align:left ;padding-left :4px;"> | <div style="align-self:center;text-align:right;padding-right:4px;">7</div>}}} | ||
<div style="align-self:center;text-align:right;padding-right:4px;"> | |||
<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|}}};"> | ||
Line 95: | Line 94: | ||
<div style="position:absolute;">{{{h7|{{emptySquare}}}}}</div> | <div style="position:absolute;">{{{h7|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">7</div> | ||
<div style="align-self:center;text-align:left ;padding-left :4px;"> | <div style="align-self:center;text-align:right;padding-right:4px;">6</div>}}} | ||
<div style="align-self:center;text-align:right;padding-right:4px;"> | |||
<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|}}};"> | ||
Line 137: | Line 135: | ||
<div style="position:absolute;">{{{h6|{{emptySquare}}}}}</div> | <div style="position:absolute;">{{{h6|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">6</div> | ||
<div style="align-self:center;text-align:left ;padding-left :4px;"> | <div style="align-self:center;text-align:right;padding-right:4px;">5</div>}}} | ||
<div style="align-self:center;text-align:right;padding-right:4px;"> | |||
<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|}}};"> | ||
Line 179: | Line 176: | ||
<div style="position:absolute;">{{{h5|{{emptySquare}}}}}</div> | <div style="position:absolute;">{{{h5|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">5</div> | ||
<div style="align-self:center;text-align:left ;padding-left :4px;"> | <div style="align-self:center;text-align:right;padding-right:4px;">4</div>}}} | ||
<div style="align-self:center;text-align:right;padding-right:4px;"> | |||
<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|}}};"> | ||
Line 221: | Line 217: | ||
<div style="position:absolute;">{{{h4|{{emptySquare}}}}}</div> | <div style="position:absolute;">{{{h4|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">4</div> | ||
<div style="align-self:center;text-align:left ;padding-left :4px;"> | <div style="align-self:center;text-align:right;padding-right:4px;">3</div>}}} | ||
<div style="align-self:center;text-align:right;padding-right:4px;"> | |||
<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|}}};"> | ||
Line 263: | Line 258: | ||
<div style="position:absolute;">{{{h3|{{emptySquare}}}}}</div> | <div style="position:absolute;">{{{h3|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">3</div> | ||
<div style="align-self:center;text-align:left ;padding-left :4px;"> | <div style="align-self:center;text-align:right;padding-right:4px;">2</div>}}} | ||
<div style="align-self:center;text-align:right;padding-right:4px;"> | |||
<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|}}};"> | ||
Line 305: | Line 299: | ||
<div style="position:absolute;">{{{h2|{{emptySquare}}}}}</div> | <div style="position:absolute;">{{{h2|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">2</div> | ||
<div style="align-self:center;text-align:left ;padding-left :4px;"> | <div style="align-self:center;text-align:right;padding-right:4px;">1</div>}}} | ||
<div style="align-self:center;text-align:right;padding-right:4px;"> | |||
<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|}}};"> | ||
Line 347: | Line 340: | ||
<div style="position:absolute;">{{{h1|{{emptySquare}}}}}</div> | <div style="position:absolute;">{{{h1|{{emptySquare}}}}}</div> | ||
</div> | </div> | ||
</div> | </div>{{{hideNotation|<div style="align-self:center;text-align:left;padding-left:4px;">1</div> | ||
<div style="align-self:center;text-align:left;padding-left:4px;"> | |||
<div></div> | <div></div> | ||
<div style="align-self:start;text-align:center;">A</div> | |||
<div style="align-self:start;text-align:center;">B</div> | |||
<div style="align-self:start;text-align:center;">C</div> | |||
<div style="align-self:start;text-align:center;">D</div> | |||
<div style="align-self:start;text-align:center;">E</div> | |||
<div style="align-self:start;text-align:center;">F</div> | |||
<div style="align-self:start;text-align:center;">G</div> | |||
<div style="align-self:start;text-align:center;">H</div> | |||
<div></div>}}} | |||
</div> | </div> | ||
<noinclude> | <noinclude> | ||
Line 437: | Line 429: | ||
== Chess starting position == | == Chess starting position == | ||
{{chessboard | lightSquareColour=#efe | darkSquareColour=#cdc | {{chessboard | lightSquareColour=#efe | darkSquareColour=#cdc | hideNotation= | ||
| a8={{blackRook}} | b8={{blackKnight}}| c8={{blackBishop}}| d8={{blackQueen}} | e8={{blackKing}} | f8={{blackBishop}}| g8={{blackKnight}}| h8={{blackRook}} | | 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}} | | a7={{blackPawn}} | b7={{blackPawn}} | c7={{blackPawn}} | d7={{blackPawn}} | e7={{blackPawn}} | f7={{blackPawn}} | g7={{blackPawn}} | h7={{blackPawn}} |
Revision as of 17:06, 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}} }}