Thursday, 15 October 2009

How to configure the FEN viewer?

I'm going to explain how you can publish re-playable chess games on your blogspot blog without the need to use another external site. This will be done in some different steps, which will enable you to detect possible problems as early as possible (without having done a lot of work).

This first step will enable you to use the FEN viewer.

First, Go to Layout » Edit html
and make a backup of your template

Now we look for the line with the title tag. This is probably something like <title><data:blog.pageTitle/></title> and copy the following lines just before this line.
<script src='http://sites.google.com/site/viewchessgame/js/gv.js'
type='text/javascript'/>

Next you have to add the following lines to the css part
.board img{margin:0;padding:0;border:0;background:none transparent}
.board table,tr{margin:0;line-height:9px}

If you don't know where to add it an appropriate place is probably just before the line
]]></b:skin>
And now the configuration part is finished (after you have saved your template) and you are able to use the FEN-viewer in your posts, just like in the post about displaying a diagram and about the improved blogspot FEN viewer.
Use the edit html to insert this kind of code in a post. The used code (in your post) for this last mentioned diagram with the letters, figures and Black to move indication is
<script language="JavaScript">
Fen2Page('rnbqk2r/ppp2pp1/5n1p/3p2B1/1b1P4/2N5/PPQ1PPPP/R3KBNR',2,1);
</script>
  • The first argument is the FEN code of the diagram that has to be displayed
  • The second optional argument (0, 1 or 2) indicates if the White/Black-to-move indication has to be shown. No move indication: 0, White to move: 1 and Black to move:2
  • The third optional argument indicates if the figures and letters have to be shown.


The code mentioned above results in:

No comments:

Post a Comment