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) (Converted wiki markup to HTML) |
Sammy McSam (talk | contribs) (added hideNotation option) |
||
Line 4: | Line 4: | ||
<div style="display: grid; grid-template: {{{notationBorder|20px}}} repeat(8,{{{squareSize|45px}}}) {{{notationBorder|20px}}} / {{{notationBorder|20px}}} repeat(8,{{{squareSize|45px}}}) {{{notationBorder|20px}}}; place-items: center;"> | <div style="display: grid; grid-template: {{{notationBorder|20px}}} repeat(8,{{{squareSize|45px}}}) {{{notationBorder|20px}}} / {{{notationBorder|20px}}} repeat(8,{{{squareSize|45px}}}) {{{notationBorder|20px}}}; place-items: center;"> | ||
<div></div> | <div></div> | ||
<div>A</div> | <div>{{{hideNotation|A}}}</div> | ||
<div>B</div> | <div>{{{hideNotation|B}}}</div> | ||
<div>C</div> | <div>{{{hideNotation|C}}}</div> | ||
<div>D</div> | <div>{{{hideNotation|D}}}</div> | ||
<div>E</div> | <div>{{{hideNotation|E}}}</div> | ||
<div>F</div> | <div>{{{hideNotation|F}}}</div> | ||
<div>G</div> | <div>{{{hideNotation|G}}}</div> | ||
<div>H</div> | <div>{{{hideNotation|H}}}</div> | ||
<div></div> | <div></div> | ||
<div>8</div> | <div>{{{hideNotation|8}}}</div> | ||
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{a8|{{emptySquare}}}}}</div>{{{highlighta8|{{emptySquare}}}}}</div></div> | <div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{a8|{{emptySquare}}}}}</div>{{{highlighta8|{{emptySquare}}}}}</div></div> | ||
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{b8|{{emptySquare}}}}}</div>{{{highlightb8|{{emptySquare}}}}}</div></div> | <div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{b8|{{emptySquare}}}}}</div>{{{highlightb8|{{emptySquare}}}}}</div></div> | ||
Line 22: | Line 22: | ||
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{g8|{{emptySquare}}}}}</div>{{{highlightg8|{{emptySquare}}}}}</div></div> | <div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{g8|{{emptySquare}}}}}</div>{{{highlightg8|{{emptySquare}}}}}</div></div> | ||
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{h8|{{emptySquare}}}}}</div>{{{highlighth8|{{emptySquare}}}}}</div></div> | <div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{h8|{{emptySquare}}}}}</div>{{{highlighth8|{{emptySquare}}}}}</div></div> | ||
<div>8</div> | <div>{{{hideNotation|8}}}</div> | ||
<div>7</div> | <div>{{{hideNotation|7}}}</div> | ||
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{a7|{{emptySquare}}}}}</div>{{{highlighta7|{{emptySquare}}}}}</div></div> | <div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{a7|{{emptySquare}}}}}</div>{{{highlighta7|{{emptySquare}}}}}</div></div> | ||
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{b7|{{emptySquare}}}}}</div>{{{highlightb7|{{emptySquare}}}}}</div></div> | <div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{b7|{{emptySquare}}}}}</div>{{{highlightb7|{{emptySquare}}}}}</div></div> | ||
Line 32: | Line 32: | ||
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{g7|{{emptySquare}}}}}</div>{{{highlightg7|{{emptySquare}}}}}</div></div> | <div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{g7|{{emptySquare}}}}}</div>{{{highlightg7|{{emptySquare}}}}}</div></div> | ||
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{h7|{{emptySquare}}}}}</div>{{{highlighth7|{{emptySquare}}}}}</div></div> | <div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{h7|{{emptySquare}}}}}</div>{{{highlighth7|{{emptySquare}}}}}</div></div> | ||
<div>7</div> | <div>{{{hideNotation|7}}}</div> | ||
<div>6</div> | <div>{{{hideNotation|6}}}</div> | ||
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{a6|{{emptySquare}}}}}</div>{{{highlighta6|{{emptySquare}}}}}</div></div> | <div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{a6|{{emptySquare}}}}}</div>{{{highlighta6|{{emptySquare}}}}}</div></div> | ||
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{b6|{{emptySquare}}}}}</div>{{{highlightb6|{{emptySquare}}}}}</div></div> | <div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{b6|{{emptySquare}}}}}</div>{{{highlightb6|{{emptySquare}}}}}</div></div> | ||
Line 42: | Line 42: | ||
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{g6|{{emptySquare}}}}}</div>{{{highlightg6|{{emptySquare}}}}}</div></div> | <div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{g6|{{emptySquare}}}}}</div>{{{highlightg6|{{emptySquare}}}}}</div></div> | ||
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{h6|{{emptySquare}}}}}</div>{{{highlighth6|{{emptySquare}}}}}</div></div> | <div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{h6|{{emptySquare}}}}}</div>{{{highlighth6|{{emptySquare}}}}}</div></div> | ||
<div>6</div> | <div>{{{hideNotation|6}}}</div> | ||
<div>5</div> | <div>{{{hideNotation|5}}}</div> | ||
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{a5|{{emptySquare}}}}}</div>{{{highlighta5|{{emptySquare}}}}}</div></div> | <div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{a5|{{emptySquare}}}}}</div>{{{highlighta5|{{emptySquare}}}}}</div></div> | ||
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{b5|{{emptySquare}}}}}</div>{{{highlightb5|{{emptySquare}}}}}</div></div> | <div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{b5|{{emptySquare}}}}}</div>{{{highlightb5|{{emptySquare}}}}}</div></div> | ||
Line 52: | Line 52: | ||
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{g5|{{emptySquare}}}}}</div>{{{highlightg5|{{emptySquare}}}}}</div></div> | <div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{g5|{{emptySquare}}}}}</div>{{{highlightg5|{{emptySquare}}}}}</div></div> | ||
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{h5|{{emptySquare}}}}}</div>{{{highlighth5|{{emptySquare}}}}}</div></div> | <div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{h5|{{emptySquare}}}}}</div>{{{highlighth5|{{emptySquare}}}}}</div></div> | ||
<div>5</div> | <div>{{{hideNotation|5}}}</div> | ||
<div>4</div> | <div>{{{hideNotation|4}}}</div> | ||
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{a4|{{emptySquare}}}}}</div>{{{highlighta4|{{emptySquare}}}}}</div></div> | <div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{a4|{{emptySquare}}}}}</div>{{{highlighta4|{{emptySquare}}}}}</div></div> | ||
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{b4|{{emptySquare}}}}}</div>{{{highlightb4|{{emptySquare}}}}}</div></div> | <div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{b4|{{emptySquare}}}}}</div>{{{highlightb4|{{emptySquare}}}}}</div></div> | ||
Line 62: | Line 62: | ||
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{g4|{{emptySquare}}}}}</div>{{{highlightg4|{{emptySquare}}}}}</div></div> | <div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{g4|{{emptySquare}}}}}</div>{{{highlightg4|{{emptySquare}}}}}</div></div> | ||
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{h4|{{emptySquare}}}}}</div>{{{highlighth4|{{emptySquare}}}}}</div></div> | <div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{h4|{{emptySquare}}}}}</div>{{{highlighth4|{{emptySquare}}}}}</div></div> | ||
<div>4</div> | <div>{{{hideNotation|4}}}</div> | ||
<div>3</div> | <div>{{{hideNotation|3}}}</div> | ||
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{a3|{{emptySquare}}}}}</div>{{{highlighta3|{{emptySquare}}}}}</div></div> | <div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{a3|{{emptySquare}}}}}</div>{{{highlighta3|{{emptySquare}}}}}</div></div> | ||
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{b3|{{emptySquare}}}}}</div>{{{highlightb3|{{emptySquare}}}}}</div></div> | <div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{b3|{{emptySquare}}}}}</div>{{{highlightb3|{{emptySquare}}}}}</div></div> | ||
Line 72: | Line 72: | ||
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{g3|{{emptySquare}}}}}</div>{{{highlightg3|{{emptySquare}}}}}</div></div> | <div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{g3|{{emptySquare}}}}}</div>{{{highlightg3|{{emptySquare}}}}}</div></div> | ||
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{h3|{{emptySquare}}}}}</div>{{{highlighth3|{{emptySquare}}}}}</div></div> | <div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{h3|{{emptySquare}}}}}</div>{{{highlighth3|{{emptySquare}}}}}</div></div> | ||
<div>3</div> | <div>{{{hideNotation|3}}}</div> | ||
<div>2</div> | <div>{{{hideNotation|2}}}</div> | ||
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{a2|{{emptySquare}}}}}</div>{{{highlighta2|{{emptySquare}}}}}</div></div> | <div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{a2|{{emptySquare}}}}}</div>{{{highlighta2|{{emptySquare}}}}}</div></div> | ||
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{b2|{{emptySquare}}}}}</div>{{{highlightb2|{{emptySquare}}}}}</div></div> | <div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{b2|{{emptySquare}}}}}</div>{{{highlightb2|{{emptySquare}}}}}</div></div> | ||
Line 82: | Line 82: | ||
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{g2|{{emptySquare}}}}}</div>{{{highlightg2|{{emptySquare}}}}}</div></div> | <div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{g2|{{emptySquare}}}}}</div>{{{highlightg2|{{emptySquare}}}}}</div></div> | ||
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{h2|{{emptySquare}}}}}</div>{{{highlighth2|{{emptySquare}}}}}</div></div> | <div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{h2|{{emptySquare}}}}}</div>{{{highlighth2|{{emptySquare}}}}}</div></div> | ||
<div>2</div> | <div>{{{hideNotation|2}}}</div> | ||
<div>1</div> | <div>{{{hideNotation|1}}}</div> | ||
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{a1|{{emptySquare}}}}}</div>{{{highlighta1|{{emptySquare}}}}}</div></div> | <div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{a1|{{emptySquare}}}}}</div>{{{highlighta1|{{emptySquare}}}}}</div></div> | ||
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{b1|{{emptySquare}}}}}</div>{{{highlightb1|{{emptySquare}}}}}</div></div> | <div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{b1|{{emptySquare}}}}}</div>{{{highlightb1|{{emptySquare}}}}}</div></div> | ||
Line 92: | Line 92: | ||
<div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{g1|{{emptySquare}}}}}</div>{{{highlightg1|{{emptySquare}}}}}</div></div> | <div style="background:{{{darkSquareColour |#ddd}}};"><div style="position:relative;"><div style="position:absolute;">{{{g1|{{emptySquare}}}}}</div>{{{highlightg1|{{emptySquare}}}}}</div></div> | ||
<div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{h1|{{emptySquare}}}}}</div>{{{highlighth1|{{emptySquare}}}}}</div></div> | <div style="background:{{{lightSquareColour|#fff}}};"><div style="position:relative;"><div style="position:absolute;">{{{h1|{{emptySquare}}}}}</div>{{{highlighth1|{{emptySquare}}}}}</div></div> | ||
<div>1</div> | <div>{{{hideNotation|1}}}</div> | ||
<div></div> | <div></div> | ||
<div>A</div> | <div>{{{hideNotation|A}}}</div> | ||
<div>B</div> | <div>{{{hideNotation|B}}}</div> | ||
<div>C</div> | <div>{{{hideNotation|C}}}</div> | ||
<div>D</div> | <div>{{{hideNotation|D}}}</div> | ||
<div>E</div> | <div>{{{hideNotation|E}}}</div> | ||
<div>F</div> | <div>{{{hideNotation|F}}}</div> | ||
<div>G</div> | <div>{{{hideNotation|G}}}</div> | ||
<div>H</div> | <div>{{{hideNotation|H}}}</div> | ||
<div></div> | <div></div> | ||
</div> | </div> | ||
Line 126: | Line 126: | ||
{| style="vertical-align: top; text-align: left;" | {| style="vertical-align: top; text-align: left;" | ||
! Parameter !! Default value !! Example !! Description | ! Parameter !! Default value !! Example !! Description | ||
|- style="vertical-align: top; text-align: left;" | |||
| <code>hideNotation</code> | |||
| <code>[A-H][1-8]</code> | |||
| <code><nowiki>{{chessboard | hideNotation=}}</nowiki></code> | |||
| <i>optional:</i> hide algebraic notation | |||
|- style="vertical-align: top; text-align: left;" | |- style="vertical-align: top; text-align: left;" | ||
| <code>notationBorder</code> | | <code>notationBorder</code> |
Revision as of 11:44, 12 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= }}
Parameter | Default value | Example | Description |
---|---|---|---|
hideNotation
|
[A-H][1-8]
|
{{chessboard | hideNotation=}}
|
optional: hide algebraic notation |
notationBorder
|
20px
|
{{chessboard | notationBorder=30px}}
|
optional: specify the size of the algebraic notation border |
squareSize
|
45px
|
{{chessboard | squareSize=50px}}
|
optional: specify the square dimensions |
lightSquareColour
|
#fff
|
{{chessboard | lightSquareColour=#fee}}
|
optional: specify the light square colour |
darkSquareColour
|
#ddd
|
{{chessboard | darkSquareColour=#dcc}}
|
optional: specify the dark square colour |
a8
|
{{emptySquare}}
|
{{chessboard | a8={{blackRook}}}}
|
optional: place an image in any square using:
|
highlighta8
|
{{emptySquare}}
|
{{chessboard | highlighta8={{redSquare}}}}
|
optional: highlight any square using:
|
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}} }}