Custom board picture and pieces

Just thought to share the custom board below with the community (the board is designed by myself from scratch, the pieces are recolored marble). It's running on Android so I had to 'cheat' my way into the file system and substitute board image (in PNG format) -- it was more difficult for piece images since they're being re-downloaded, so I had to overwrite in cache.

Does anybody know if there are any plans chess.com has to add custom board and piece selection to the Android as well as Apple versions of the app?

Hi! That's great! I really would like to use a custom board too!

Would you mind explaining how did you substitute the board on android? I would really appreciate it! 

Thank you!

Unfortunately it's no longer possible. New version of Android app (v4) does not allow to overwrite files (perhaps it's possible if your device is jail broken, I am not sure). It's a shame that we don't have ability to customize boards and pieces to our liking. We sure have more customization options than lichess but still, it's vexing. If anybody from the upper echelons is reading this, please give us back capability to overwrite boards and pieces png images in the file directory. Also, please add more pieces and boards available by default. I wish the user community here could convene and submit official petition to the leadership. 

Thank you so much for your reply.

Alternatively, do you know any other chess app that allwos this? I tried to find one but for the time being I couldn't. (by the way, I just want to use a board with all the squares with its code (a4, e5, etc...))

Thank you!

Well, actually it cannot be done with a custom board, as it needs diferent values for white or black orientations. It has to be done programatically.

So, for those interested in this feature I developed it  for lichess, as it is open source. Just did yesterday night, so it is still pending approval and merge.

https://github.com/veloce/lichobile/pull/1282

I really hope chess.com implements this.

Just use userstyles.org

fritz + Icy Sea for chess.com

Erwin,

I couldn't agree more, I have been begging chess.com's team to add a number of visual enhancements for years now. I use Android app so userstyles.org will not work for me (and I don't think it works on Android Chrome anyway, I hope there is some manual option we can use but I'm unaware of it). In older Android, we had a way to overwrite the actual PNG files which allowed for a nearly complete customization. Unfortunately chess.com removed this backdoor from us beginning Android v4 (so much for progress), and now we're pretty much stuck with the very limited selection of boards and pieces.

I asked for custom colors on light and dark squares, custom arbitrary colors for pieces. At least give us a dark overlay board (instead of light-squared one) -- nothing. If we can upload custom background, why can't we do the same for board and pieces? If there is a green pawn on the logo, why is it not available in the selection? If neon pieces appear green in the menu, why are they red in actuality? Okay, if the upload interface is too burdensome to engineer, can't you create like an initialization text file where users can specify URLs to images for each game element? How difficult can that be in this day and age?

There seems to be a general dismissive stance towards any suggestion at visual enhancements (I think Rensch even voiced that in passing in one of his quarterly State of the Union addresses). Chess.com is indeed an awesome platform but if the features above are implemented, it will become incalculably better, almost perfect.

I wish we could like band together and petition Erik and Daniel for these features but I don't think we have much to push with.

Derrick

I agree with this, please make an option for custom board upload

I have been doing work on this for more than week now using stylus. The only thing I can't figure out is how to change the chess pieces on chess.com. Here is a sample of my work involving animated backgrounds. 

And yes, you can pretty  much use ANY custom chessboard of your fancy as a substitute. In the river sample below, I am using a custom chessboard PNG (opacity < 1.00 for some translucency) to give a better contrast to the chessboard and to reduce the visual noise of the animated gif (a.k.a. live wallpaper) background:

You can view the longer view sample here on your browser.

I did this by using the Chrome extension named Stylus to override the CSS. Below is the code I used. The custom chessboard png file used is shown in bold text.

.chessboard-component {
background: url("https://cefl4u.org/chess/150_vodka_on_the_rocks.png") 0 0 / 100% 100% no-repeat!important;
width: 480px!important;
height: 480px!important;
}
.board {

background: url("https://cefl4u.org/chess/200_vodka_on_the_rocks.png") 0 0 / 100% 100% no-repeat!important;
}
.settings-themes-theme-preview settings-themes-default-theme {
background-image: url("https://images.chesscomfiles.com/proxy/cefl4u.org/chess/water/https/c87bbbfdf1.png") !important;
}
body:after {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("https://images.chesscomfiles.com/proxy/cefl4u.org/chess/gifs/stream/https/625d800d3e.gif") !important;
color: #EEE;
background-size: cover!important;
background-repeat: no-repeat;
background-position: center center;
}

But wait, there's more! My latest work involves overidding chess.com's Review and Analysis sections to provide a larger font viewing experience. See this? The Analysis screen is now much more viewable due to the larger font presentation.


Read my post here. 

Regards
Frankie "Durian Defense" Kam
Malaysia

Thank you Frankie for the material, it's so good to see interest in theme customization.

Do we know if chess.com is planning to introduce board/piece customization features any time soon? We already have a good set in variants, could we please have that added to regular and puzzle modes? Would somebody reading this please relay to Erik? 

I tried to ask for custom pieces and boards (and square colors) a million times, there is no traction either here on lichess. I would think it's about time we can select custom colors for light and dark squares but I guess that's too much work. 

Hi Derrick. Anything is possible now with chrome extensions like Stylus and Stylish where CSS overriding is the name of the game. Also if you are on Lichess, you can combine client-side CSS overriding with Stylus, with the Prettier Lichess and Lichess Enhancement Chrome extensions. I do it all the time and use the new look on my streams on Twitch.

Hi Derrick, I don't think Chess dot com is going to add custom pieces and boards to the selection list any time soon. BTW, if you can send me the gif/pngs of the chess board and sets which you did on your Android system some time back, see your uploaded image here, I can create the client-side custom chess set for you. Using Stylus of course.

Hey bro. There are a lot of cool custom boards and pieces for lichess.org on userstyles.org. Can you please tell me how I can use them for chess.com too? Or if you find the time, can you make those boards work on chess.com and upload it on userstyles.org? That would really be very nice of you! 

Hi Siddesh1337

Rather than cover all, it is more manageable to start with one specific board and pieces. Which chess pieces and boards that can be used in Lichess with userstles.org's scripts, would you like to use on chess.com? I'm assuming the chess pieces are not found in chess.com. For example, below is a Mayura chess set running on chess.com via CSS over-riding and using Stylish or Stylus.



Perhaps you can identify one first, and then we'll take it from there.

Regards
Frankie "Durian Defense" Kam
Malaysia

I have been doing work on this for more than week now using stylus. The only thing I can't figure out is how to change the chess pieces on chess.com. Here is a sample of my work involving animated backgrounds. 

And yes, you can pretty  much use ANY custom chessboard of your fancy as a substitute. In the river sample below, I am using a custom chessboard PNG (opacity < 1.00 for some translucency) to give a better contrast to the chessboard and to reduce the visual noise of the animated gif (a.k.a. live wallpaper) background:

You can view the longer view sample here on your browser.

I did this by using the Chrome extension named Stylus to override the CSS. Below is the code I used. The custom chessboard png file used is shown in bold text.

.chessboard-component {
background: url(""https://images.chesscomfiles.com/proxy/cefl4u.org/chess/150_vodka_on_the_rocks.png/https/5f06548b36") 0 0 / 100% 100% no-repeat!important;
width: 480px!important;
height: 480px!important;
}
.board {

background: url(""https://images.chesscomfiles.com/proxy/cefl4u.org/chess/200_vodka_on_the_rocks.png/https/83f73aa9e6") 0 0 / 100% 100% no-repeat!important;
}
.settings-themes-theme-preview settings-themes-default-theme {
background-image: url("https://images.chesscomfiles.com/proxy/cefl4u.org/chess/water/https/c87bbbfdf1.png") !important;
}
body:after {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("https://images.chesscomfiles.com/proxy/cefl4u.org/chess/gifs/stream/https/625d800d3e.gif") !important;
color: #EEE;
background-size: cover!important;
background-repeat: no-repeat;
background-position: center center;
}

But wait, there's more! My latest work involves overidding chess.com's Review and Analysis sections to provide a larger font viewing experience. See this? The Analysis screen is now much more viewable due to the larger font presentation.


Read my post here. 

Regards
Frankie "Durian Defense" Kam
Malaysia

Could you send me the first picture? The one of the northern lights. It looks really good.
Thank you in advance.

To Martin The God Of Chess

Here you go:

https://drive.google.com/file/d/1rqvalrlD88iK5YqIchKqwadWIxGoY8o2/view?usp=sharing

Sargon Chess pieces conversion Work-In-Progress:

Trying to recreate a 1980s classic 2D chess set design into a playable Chess dot com set.

Genesis of a mini-project. I will take me another 2 man-hours to complete the whole set.

Regards
Frankie Kam

I really would love to have the OP's custom board theme. It looks cool.

What's OP?

OP = Original Poster.