Template:Chessboard

Basic {{chessboard}} template

A

B

C

D

E

F

G

H

8

8

7

7

6

6

5

5

4

4

3

3

2

2

1

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= 
}}

Available parameters

Parameter

Default value

Example

Description

a8

{{emptySquare}}

{{chessboard | a8={{BlackRook}}}}

Optional: place an image in any square using [letter][digit]=[[File:ImageFileName|Image Tooltip]] or [letter][digit]={{templateName}} where [letter][digit] is the algebraic coordinate
Upload your game piece image here

highlighta8

null

{{chessboard | highlighta8=red}}

Optional: highlight any square using highlight[letter][digit]=[string] where [string] is any valid style="background:[string];" e.g. blue or rgba(0,0,255,0.5) for semi-transparency

squareSize

46

{{chessboard | squareSize=50}}

Optional: specify the square dimensions in px units

lightSquareColour

#fff (white)

{{chessboard | lightSquareColour=lightgreen}}

Optional: specify the light square colour as [string] where [string] is any valid style="background:[string];"

darkSquareColour

#ddd (grey)

{{chessboard | darkSquareColour=darkblue}}

Optional: specify the dark square colour as [string] where [string] is any valid style="background:[string];"

borderThickness

2

{{chessboard | borderThickness=3}}

Optional: specify the border thickness in px units

cornerRadius

8

{{chessboard | cornerRadius=10}}

Optional: specify the corner radius in px units

hideNotation

[A-H]/[1-8]

{{chessboard | hideNotation=}}

Optional: hide algebraic notation

gridlineThickness

0

{{chessboard | gridlineThickness=2}}

Optional: specify the gridline thickness in px units

gridColour

null

{{chessboard | gridColour=black}}

Optional: specify the grid colour as [string] where [string] is any valid style="background:[string];"

Examples

Chess

A

B

C

D

E

F

G

H

8

8

7

7

6

6

5

5

4

4

3

3

2

2

1

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}}
}}

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

B

C

D

E

F

G

H

8

​

​

​

​

​

8

7

​

​

7

6

​

​

6

5

​

​

5

4

​

​

​

4

3

​

​

3

2

​

​

2

1

​

​

​

​

​

​

1

A

B

C

D

E

F

G

H

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).

A

B

C

D

E

F

G

H

8

​

​

​

​

8

7

​

​

7

6

​

​

6

5

​

​

​

5

4

​

​

​

4

3

​

​

3

2

​

​

2

1

​

​

​

​

​

​

1

A

B

C

D

E

F

G

H

A piece may capture an enemy piece

For example, White may play h3-f1, capturing the red piece on f1.

A

B

C

D

E

F

G

H

8

​

​

​

​

8

7

​

​

7

6

​

​

6

5

​

​

​

5

4

​

​

​

4

3

​

3

2

​

​

2

1

​

​

​

​

​

​

1

A

B

C

D

E

F

G

H

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