Fen position

A chess board for a fen position can be displayed easily by inserting a [fen] tag into your posts.

Example:

[fen width="50%" float="left" theme="wood8" css="padding-right:8px"]r1bqr3/pp1kn1pp/2pp4/6B1/1P6/PBp5/2P2PPP/R2QR1K1 w - - 0 1[/fen]

The fen position has been inserted between the start and end of the [fen] tag.

As you can see, the fen tag also supports attributes for styling. In this example, I have set the width attribute to 50%. float is set to left to allow this text to wrap around the board. As mentioned in other posts, the width and float attributes are only set on large screens.

Finally, I’m using the css attribute to get some spacing around the board, and the theme attribute to display this board using a different theme than default.

Arrows and Highlighted Squares

When using the fen tag, you can also highlight squares and add arrows. This is done by setting the properties

arrows="<from and to squares>"
squares="<squares>"

 
Example:

[fen width="50%" highlight="c4,d5,e6,f7,g8" arrows="d1d6,g5f4;#669900" float="left" theme="wood8" css="padding-right:8px"]r1bqr3/pp1kn1pp/2pp4/6B1/1P6/PBp5/2P2PPP/R2QR1K1 w - - 0 1[/fen]

which gives this result:

highlight squares and arrows are created in a comma-separated string. For squares, you only define the squares(like e4). For arrows you define from and to squares(like e2e4).

You can also override the default colors used by specifying colors after a semicolon. example:

highlight="e4;#440000,e5"

to highlight the square in a red color. When a color is defined, all subsequence squares will be styled with the same color. The syntax is the same for arrows

arrows="e2e4;#440000"

Set default styling

Default styling of highlight squares can be set in your theme’s css(Appearance->Customise).

There, you need to override the css class dhtml-chess-highlight-square. The default styling is:

.dhtml-chess-highlight-square{
    opacity:0.5;
    background-color:#D32F2F;
}

Default styling of arrows can be customised on the DHTML Chess config page.

Share This:

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.