<base href=" for images and site.css

[ZenLearner]

It seems to me that incorporating site.css and <base href".......> really affects EXISTING web sites.

I have omitted site.css and every things works fine and modified chessboard.js to have a different cfg.PieceTheme . I would suggest that the cfg.PieceTheme points to an ImageSourceUrl variable.

The current behaviour assumes the img folder is going to be on the webpage folder, which ruins a scenario of multiple webpages in different folders.

[user14159]

The site2.css looks to be meant for the examples page. All you need is the chessboard-0.3.0.css file.

Speaking of customizing piece themes, anyone have any idea where I'm going wrong here?

<button id=\"alpha\">Alpha Pieces</button>
<button id=\"wiki\">Wikipedia Pieces</button>

<script type='text/javascript'>
$('#alpha').on('click', function(){
 cfg.pieceTheme=\"img/chesspieces/alpha/{piece}.png\";
});

$('#wiki').on('click', function(){
 cfg.pieceTheme=\"img/chesspieces/wikipedia/{piece}.png\";
});
</script>

The buttons do change the piece themes, but only after a piece has been clicked, not instantaneously.

[user14159]

To answer my question, adding board.resize() after changing cfg.pieceTheme seems to do the trick for refreshing the pieces. Not sure that it's the proper solution, though.

[siansell]

@user14159 I'm about to do something similar and was investigating how the user can select a piece set.

Just setting cfg.pieceTheme won't do anything on it's own, but board.resize() calls the internal chessboard.js function drawBoard(), which redraws the pieces with the current pieceTheme given in cfg.

I'd like to see drawBoard() exposed as a public API method for cases like this.