ChessFlash

HTML Options for the ChessFlash PGN Viewer

These options are all specified in the html that embeds the ChessFlash PGN Viewer. Since the tool that generates the html to embed the Viewer generates these automatically based on the options you select you never need to modify these manually. However, if you want more fine grained control over the appearance or operation of the viewer you will want to refer to this list of possible options.

Each of these settings are listed twice in the html that embeds the viewer to accomodate differences in FireFox and Internet Explorer. So, if you manually add or tweak any of these, make sure you modify both sets.

Object and Embed Tags
SIZE

  • width
  • height

This sets the entire size of the ChessFlash PGN Viewer area. Each value may be specified in pixels or as a percentage of the available space (as determined by where it is positioned and the clients browser). 100 means 100 pixels and 100% means 100% of the available space. For horizontal layouts I often use 100% for the width. About 400 by 400 is a moderate size. You may want to experiment with these settings to see what works well for your blog or website.

FlashVars Values
Each of these must be seperated by an ampersand (&).

PGN

  • pgnurl

This is the url for the pgn file to display from your user upload directory at ChessFlash. The url is relative to the users directory, so for example I might use: "pgnurl=Glenn Wilson/gorckat-NoTB-LEPer.pgn".

MODES
For these the value should be true (any case) or 1 to be set. Anything else is false.
The possible values for each mode are shown below separated by a vertical bar with the default value first.

  • tabmode=false|true (show variations tab or not)
  • twoboards=false|true (show two chess boards or one chess board)
  • boardonly=false|true (show only the chess board(s) with no MoveText area or show both)

The value set for tabmode will be overridden if it is incompatble with the other mode settings. Tabmode is not allowed if twoboards=false and boardonly=true. It is required if twoboards=true and boardonly=true.

ORIENTATION
The possible values for orientation are shown below separated by a vertical bar with the default value first.

  • orientation=horizontal|vertical (only first character matters; case does not matter)

When the MoveText area is displayed (boardonly=false) this refers to the relative position of the boards area to the MoveText area. Horizontal places the board or boards horiontally to the left of the MoveText area. Vertical places the board(s) above the MoveText area.

When the MoveText area is not displayed (boardonly=true) this refers to the relative position of the two boards to each other. Horizontal places the horizontally and Vertical places the boards vertically (one above the other). If there is no MoveText area displayed (boardonly=false) and there is only one board, this setting has no effect.

COLORS
Colors are specified as 6 digit hexadecimal values. See http://en.wikipedia.org/wiki/Web_colors or http://www.w3schools.com/Html/html_colors.asp for an explanation. For color choosers try http://www.visibone.com/colorlab/ or http://www.colorschemer.com/online.html.

Colors that may be set and their default values are shown below.

  • light=f4f4fF (light squares color for board 1)
  • dark=0072b9 (dark squares color for board 1)
  • bordertext=494949(border text color for board 1)
  • border=light(border color for board 1)
  • background=ffffff(background color for the viewer)
  • headerforeground=ffffff(text color in the MoveText Header area)
  • mtforeground=000000(normal text color in the MoveText area)
  • mtvariations=ff0000(selected variation text color in the MoveText area)
  • mtmainline=000000(main line text color in the MoveText area)
  • light2=(board2:defaults to the same color as light)
  • dark2=(board2:defaults to the same as dark)
  • border2=(board2:defaults to the same color as border)
  • bordertext2=(board2:defaults to the same color as borderText)
  • headerbackground=(background color for the MoveText Header area:defaults to the same color as dark)
  • mtbackground=(background color for the MoveText area:defaults to the same color as background)
  • scrollbar=(Scrollbar base color:defaults to the same color as headerbackground)

EXAMPLE
<div><object width="100%" height="400"><param name="movie" value="http://chessflash.com/prototype/ChessFlashV0-044.swf" /><param name="FlashVars" value="pgnurl=Glenn%20Wilson/NoTB-Rhuiden-LEPer.pgn&orientation=horizontal&tabmode=false&twoboards=false&light=eeeeee&dark=BF5C00&border=F5E39E&bordertext=0&background=BF5C00&headerbackground=E89E47&mtbackground=eeeeee" /><embed src="http://chessflash.com/prototype/ChessFlashV0-044.swf" width="100%" height="400" quality="best" FlashVars="pgnurl=Glenn%20Wilson/NoTB-Rhuiden-LEPer.pgn&orientation=horizontal&tabmode=false&twoboards=false&light=eeeeee&dark=BF5C00&border=F5E39E&bordertext=0&background=BF5C00&headerbackground=E89E47&mtbackground=eeeeee"></embed></object></div>
<a href="http://chessflash.com/sites/default/files/users/Glenn%20Wilson/NoTB-Rhuiden-LEPer.pgn" title="Download PGN file">NoTB-Rhuiden-LEPer.pgn</a>