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
(removed notationSpacing variable)
(hideNotation also hides whitespace)
Line 2: Line 2:
== Basic empty chessboard ==
== Basic empty chessboard ==
</noinclude>
</noinclude>
<div style="display:grid;grid:repeat(10,{{{squareSize|46}}}px) / repeat(10, {{{squareSize|46}}}px);">
<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;">{{{hideNotation|A}}}</div>
<div style="align-self:end;text-align:center;">A</div>
<div style="align-self:end;text-align:center;">{{{hideNotation|B}}}</div>
<div style="align-self:end;text-align:center;">B</div>
<div style="align-self:end;text-align:center;">{{{hideNotation|C}}}</div>
<div style="align-self:end;text-align:center;">C</div>
<div style="align-self:end;text-align:center;">{{{hideNotation|D}}}</div>
<div style="align-self:end;text-align:center;">D</div>
<div style="align-self:end;text-align:center;">{{{hideNotation|E}}}</div>
<div style="align-self:end;text-align:center;">E</div>
<div style="align-self:end;text-align:center;">{{{hideNotation|F}}}</div>
<div style="align-self:end;text-align:center;">F</div>
<div style="align-self:end;text-align:center;">{{{hideNotation|G}}}</div>
<div style="align-self:end;text-align:center;">G</div>
<div style="align-self:end;text-align:center;">{{{hideNotation|H}}}</div>
<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;">{{{hideNotation|8}}}</div>
<div style="align-self:center;text-align:right;padding-right:4px;">8</div>}}}
<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;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;">{{{hideNotation|8}}}</div>
<div style="align-self:center;text-align:right;padding-right:4px;">7</div>}}}
<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|}}};">
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;">{{{hideNotation|7}}}</div>
<div style="align-self:center;text-align:right;padding-right:4px;">6</div>}}}
<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|}}};">
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;">{{{hideNotation|6}}}</div>
<div style="align-self:center;text-align:right;padding-right:4px;">5</div>}}}
<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|}}};">
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;">{{{hideNotation|5}}}</div>
<div style="align-self:center;text-align:right;padding-right:4px;">4</div>}}}
<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|}}};">
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;">{{{hideNotation|4}}}</div>
<div style="align-self:center;text-align:right;padding-right:4px;">3</div>}}}
<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|}}};">
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;">{{{hideNotation|3}}}</div>
<div style="align-self:center;text-align:right;padding-right:4px;">2</div>}}}
<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|}}};">
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;">{{{hideNotation|2}}}</div>
<div style="align-self:center;text-align:right;padding-right:4px;">1</div>}}}
<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|}}};">
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;">{{{hideNotation|1}}}</div>
<div></div>
<div style="align-self:start;text-align:center;">{{{hideNotation|A}}}</div>
<div style="align-self:start;text-align:center;">{{{hideNotation|B}}}</div>
<div style="align-self:start;text-align:center;">{{{hideNotation|C}}}</div>
<div style="align-self:start;text-align:center;">{{{hideNotation|D}}}</div>
<div style="align-self:start;text-align:center;">{{{hideNotation|E}}}</div>
<div style="align-self:start;text-align:center;">{{{hideNotation|F}}}</div>
<div style="align-self:start;text-align:center;">{{{hideNotation|G}}}</div>
<div style="align-self:start;text-align:center;">{{{hideNotation|H}}}</div>
<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

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

Chess starting position

Rook
Knight
Bishop
Queen
King
Bishop
Knight
Rook
Pawn
Pawn
Pawn
Pawn
Pawn
Pawn
Pawn
Pawn
Pawn
Pawn
Pawn
Pawn
Pawn
Pawn
Pawn
Pawn
Rook
Knight
Bishop
Queen
King
Bishop
Knight
Rook
{{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}}
}}