Custom Chess Pieces?

Hello,

I was wondering if this following feature could be added in the future, i made some custom chess pieces in photoshop and wanted to replace them with the ones under theme. would be nice to have a feature custom pieces so it just replaces the images or something.

Hope you like the idea but not sure if its at all possible.

Thanks!

For use in actual rated games? I doubt it.  Some people would want to substitute pieces that would not have a Staunton or other pattern immediately recognizable to opponents. That would be a problem.

There's a reason you never see Lord of the Rings sets in over the board tournaments.

So i dont get it i thought what i change on the client side like the 8bit theme thats just what i see not you or the other players? And based on that i thought it would be nice to add my own custom pieces.

You are right. I suppose the only time people would see them would be in a blog or a forum.

I think that is a good idea.

I wish fairy pieces can be implemented in the near future

Here is the amazon in 3D design: 

You might look into the stylish browser plugin that lets you replace the css on website with code of your own.  I use it all the time on another chess site, but not here.  I'm sure it can be done.

link

You should use Stylus instead of Stylish which is the most up to date.

On chess.com, it is apparently not possible to replace the pieces because the site assigns them random names in the CSS rules, probably to avoid using cheat extensions. the only pieces that are not random are kings.

It's definitely possible, I've done it myself. You can create a script that replaces the pieces with whatever image you want. I've done it for both the pieces and the squares to give it a custom look

Hi nycreact

I've tried installing Tampermonkey and installing some chess.com css from userstyles.org in the hope of changing the chess.com pieces to Fritz or Chessbase. It doesn't work even after I refresh the chess.com page. Any ideas? Suggestions?

Regards
Frankie Kam

@Durian_Defense I just do it in plain javascript, I don't know what tampermonkey or userstyles.org is. Just target the element and just change how the pieces look and square color by editing the value of background-image and background-color respectively.

Once you got your script, you can save it as a "page" in the bookmark section of Chrome (I am guessing it's the same in other browsers) and with a simple click the board will look exactly how you want. This should be pretty easy if you know how to code. Oh also make sure you use png files for the images so that they are transparent or else you won't see the square in the background.

I changed the pawns to IG logos (first one I found on google lol) as an example

@nycreact I used Chrome's and Firefox's Inspect tool, but I can't detect the CSS elements that control or represent the pieces.

In the example above, I've Chrome-Inspect drilled down to the the canvas tag. But no can do beyond that. What the h@ck is the Canvas tag anyway?

Or should I examine the source code of the webpage with "View page source" (e.g. when playing live)? I've done that for the same page shown above, but even though the code yields 192 png references, there are none for the pieces. See below.


 On every chessboard of chess.com, I can't even right-click on a chess piece and choose "Inspect". Something to do with that Canvas tag thingie, I suspect.

BTW, here is my work for the past one week on overriding chess.com's CSS code: https://www.chess.com/forum/view/general/custom-board-picture-and-pieces?page=1#last_comment

Regards
Frankie "Durian Defense" Kam
Malaysia

Canvas is just an HTML element that allows you to draw graphics on a browser. Try changing your pieces to Neo and use the Play option instead of live if you're not already doing that. See if that works. And no don't view the page source, doesn't help.

And yea, I can't right click on a chess piece as well. This is because the site overrides what right click does since its how you draw arrows. What I do is just right click anywhere on the page and when the dev tools open just click on the arrow icon all the way at the very top left. Now you can hover over any element and bring it up in the dev tools. That's how you can inspect elements when a website overrides what right click does.

This is what I am seeing on my end

I am using Chrome as well. You are a Diamond Member? I'm a Gold Member. Strangely I can't see the same code as you have generously shown in your screenshots above. Here's my steps:
1. I choose Play, not Live Chess.
2. I create an unrated 3 min game and click Play.

You see? The closest I can get to where you got is 
<chess-board class="board board-webgl-2d" id="board-livegame-24417044693"> == $0
I mean why does my code have a "board-webgl-2d" code after "board" and your only has "board"? Below the code I mentioned, I don't any code references with the class .piece.bb

I've tried overidding .piece.bb with this piece of code in Sylus:

.board.board-webgl-2d.piece.bb {
   background-image: url(https://i.imgur.com/APFMlIV.png) !important;
}

but it doesn't work. I'm probably living in an alternate universe from yours.

Cheers
Frankie Kam

Haha yea perhaps this is a simulation and you're in a different server. The last thing I can think of is for you to make the board just how I have mine. Make your pieces Neo (which I think you did) and the board green. See if that helps

@Durian_Defense Oh and change your theme to standard. I'm thinking the closer we have our setups exactly the same the easier it would be to narrow down what is the difference

Yes. I believe that is the key! I was using a Custom Theme (which accounts for my gradiented green backgrounds) all the while.
I was using a Custom Theme (which accounts for my gradiented green backgrounds) all the while. In fact, I just discovered that by changing my theme to standard, the chess.com styles on userstyles.org are now working with my Stylus chrome extension. See image above. By installing this style https://userstyles.org/styles/134558/chess-com-pieces-fritz I now have Fritz set running on my Chess.com set.

I will give the Inspect code another go, now that I'm back to the Standard chess.com theme.

Regards
Frankie Kam

Nice! so it seems like everything is working for you now

Hi nycreact

Bingo!

At last!

Many thanks.

Frankie Kam