Okay! I managed to do the custom chess pieces, custom chessboard (with branding overlays) and custom animated gif (live wallpaper) using CSS code and Stylus. See below:
1. Custom Chessboard with branding logos on a1 and h8 squares.
This is the Mayura chess pieces with Mayura pastel-colored chessboard. IMHO, it goes nicely with the Light theme of chess.com.
Here's my Twitch channel mascot, Duri.
Using Paint.NET, I've added him in two layers of a .PDN file and reduced the opacity to -76. The effect is an opaque logo at the a1 and h8 squares. For branding purposes.
2. To top it off, I've added an animated gif to the background.
Will use this interface on a cold, grey, raining day. Now I am complete.
Regards
Frankie Kam
#board-liveGame-24430899331 .piece.bp, #board-liveGame-24430899331 .promotion-piece.bp {
background-image: url(https://i.imgur.com/APFMlIV.png);
}
The above CSS code works, but only for this instance of the game. It seems that chess.com creates the ID with a trailing set of digits (the 24430899331 part of the #board-liveGame-24430899331 CSS code) which is different every time.
.piece.bp, .promotion-piece.bp {
background-image: url(https://i.imgur.com/APFMlIV.png);
}
I tried removing the ID, leaving just the classes, but now it doesn't work.