Basic {{chessboard}} template
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=
}}
Available parameters
Examples
Chess
{{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}}
}}
Draughts / Checkers
<div style="display:flex; flex-flow:row wrap; gap:0.5rem;">
{{chessboard | hideNotation= | squareSize=50 | lightSquareColour=#eed | darkSquareColour=#5a5
| d8={{whiteDraughtsKing}}
| highlightd8=gold
| highlightc7=blue
| highlighte7=blue
| b4={{whiteDraughtsMan}}
| f4={{whiteDraughtsMan}}
| c3={{whiteDraughtsMan}}
| b6={{blackDraughtsMan}}
| d6={{blackDraughtsMan}}
| e1={{blackDraughtsKing}}
}}
{{chessboard | hideNotation= | squareSize=50 | lightSquareColour=#eed | darkSquareColour=#5a5
| e7={{whiteDraughtsKing}}
| highlighte7=gold
| highlightd6=red
| highlightc5=blue
| highlightb6=red
| highlighta7=blue
| b4={{whiteDraughtsMan}}
| f4={{whiteDraughtsMan}}
| c3={{whiteDraughtsMan}}
| b6={{blackDraughtsMan}}
| d6={{blackDraughtsMan}}
| f2={{blackDraughtsKing}}
}}
{{chessboard | hideNotation= | squareSize=50 | lightSquareColour=#eed | darkSquareColour=#5a5
| a7={{whiteDraughtsKing}}
| highlighte7=gold
| highlightd6=red
| highlightc5=blue
| highlightb6=red
| highlighta7=blue
| b4={{whiteDraughtsMan}}
| f4={{whiteDraughtsMan}}
| c3={{whiteDraughtsMan}}
| f2={{blackDraughtsKing}}
}}
</div>
Othello / Reversi
<div style="display:flex; flex-flow:row wrap; gap:0.25rem;">
{{chessboard | hideNotation= | squareSize=54 | lightSquareColour=darkgreen | darkSquareColour=darkgreen | cornerRadius=4 | gridlineThickness=2 | gridColour=black
| highlightc5=rgba(255,255,255,0.25)
| highlightd6=rgba(255,255,255,0.25)
| highlighte3=rgba(255,255,255,0.25)
| highlightf4=rgba(255,255,255,0.25)
| d4={{blackReversiToken}}
| e5={{blackReversiToken}}
| e4={{whiteReversiToken}}
| d5={{whiteReversiToken}}
}}
{{chessboard | hideNotation= | squareSize=54 | lightSquareColour=darkgreen | darkSquareColour=darkgreen | cornerRadius=4 | gridlineThickness=2 | gridColour=black
| d4={{blackReversiToken}}
| e5={{blackReversiToken}}
| e4={{blackReversiToken}}
| f4={{blackReversiToken}}
| d5={{whiteReversiToken}}
}}
{{chessboard | hideNotation= | squareSize=54 | lightSquareColour=darkgreen | darkSquareColour=darkgreen | cornerRadius=4 | gridlineThickness=2 | gridColour=black
| highlightc5=rgba(255,255,255,0.25)
| highlightd6=rgba(255,255,255,0.25)
| highlighte3=rgba(255,255,255,0.25)
| highlightf2=rgba(255,255,255,0.25)
| d4={{blackReversiToken}}
| e5={{blackReversiToken}}
| f4={{blackReversiToken}}
| d5={{whiteReversiToken}}
| e4={{whiteReversiToken}}
| f3={{whiteReversiToken}}
}}
</div>
Lines of Action (LOA)
A piece may not jump over an enemy piece
White cannot play a6-d6, even though there are three pieces in row 6. White might instead play a6-c4, moving two spaces because there are two pieces in the diagonal (a6-f1).
A piece may jump over friendly pieces
Red may continue with e8-b5, jumping their own piece. It moves three spaces because there are three pieces in the diagonal (a4-e8).
<div style="display:flex; flex-flow:row wrap; gap:1rem;">
<div style="display:grid; grid:repeat(2,auto)/min-content;">
<div style="padding-left:1.5rem; padding-right:1.5rem;">
<b>A piece may not jump over an enemy piece</b>
White cannot play a6-d6, even though there are three pieces in row 6. White might instead play a6-c4, moving two spaces because there are two pieces in the diagonal (a6-f1).
</div><div style="align-self:end;">
{{chessboard | lightSquareColour=#b85 | darkSquareColour=#831
| highlighta6=rgba(0,255,0,0.5)
| highlightc4=rgba(0,255,0,0.5)
| highlightd6=rgba(255,0,0,0.5)
| a2={{whiteCylinder}}
| a3={{whiteCylinder}}
| a4={{whiteCylinder}}
| a5={{whiteCylinder}}
| c4={{whiteCylinder}}
| a7={{whiteCylinder}}
| h2={{whiteCylinder}}
| h3={{whiteCylinder}}
| h4={{whiteCylinder}}
| h5={{whiteCylinder}}
| h6={{whiteCylinder}}
| h7={{whiteCylinder}}
| b1={{redCylinder}}
| c1={{redCylinder}}
| d1={{redCylinder}}
| e1={{redCylinder}}
| f1={{redCylinder}}
| g1={{redCylinder}}
| b8={{redCylinder}}
| c6={{redCylinder}}
| d8={{redCylinder}}
| e8={{redCylinder}}
| f8={{redCylinder}}
| g8={{redCylinder}}
}}
</div>
</div>
<div style="display:grid; grid:repeat(2,auto)/min-content;">
<div style="padding-left:1.5rem; padding-right:1.5rem;">
<b>A piece may jump over friendly pieces</b>
Red may continue with e8-b5, jumping their own piece. It moves three spaces because there are three pieces in the diagonal (a4-e8).
</div><div style="align-self:end;">
{{chessboard | lightSquareColour=#b85 | darkSquareColour=#831
| highlighte8=rgba(0,255,0,0.5)
| highlightb5=rgba(0,255,0,0.5)
| a2={{whiteCylinder}}
| a3={{whiteCylinder}}
| a4={{whiteCylinder}}
| a5={{whiteCylinder}}
| c4={{whiteCylinder}}
| a7={{whiteCylinder}}
| h2={{whiteCylinder}}
| h3={{whiteCylinder}}
| h4={{whiteCylinder}}
| h5={{whiteCylinder}}
| h6={{whiteCylinder}}
| h7={{whiteCylinder}}
| b1={{redCylinder}}
| c1={{redCylinder}}
| d1={{redCylinder}}
| e1={{redCylinder}}
| f1={{redCylinder}}
| g1={{redCylinder}}
| b8={{redCylinder}}
| c6={{redCylinder}}
| d8={{redCylinder}}
| b5={{redCylinder}}
| f8={{redCylinder}}
| g8={{redCylinder}}
}}
</div>
</div>
<div style="display:grid; grid:repeat(2,auto)/min-content;">
<div style="padding-left:1.5rem; padding-right:1.5rem;">
<b>A piece may capture an enemy piece</b>
For example, White may play h3-f1, capturing the red piece on f1.
</div><div style="align-self:end;">
{{chessboard | lightSquareColour=#b85 | darkSquareColour=#831
| highlighth3=rgba(0,255,0,0.5)
| highlightf1=rgba(0,255,0,0.5)
| a2={{whiteCylinder}}
| a3={{whiteCylinder}}
| a4={{whiteCylinder}}
| a5={{whiteCylinder}}
| c4={{whiteCylinder}}
| a7={{whiteCylinder}}
| h2={{whiteCylinder}}
| f1={{whiteCylinder}}
| h4={{whiteCylinder}}
| h5={{whiteCylinder}}
| h6={{whiteCylinder}}
| h7={{whiteCylinder}}
| b1={{redCylinder}}
| c1={{redCylinder}}
| d1={{redCylinder}}
| e1={{redCylinder}}
| g1={{redCylinder}}
| b8={{redCylinder}}
| c6={{redCylinder}}
| d8={{redCylinder}}
| b5={{redCylinder}}
| f8={{redCylinder}}
| g8={{redCylinder}}
}}
</div>
</div>
</div>
