Add ability to highlight specific fields by changing the background color about gchessboard HOT 3 CLOSED

Yep, this is achievable using "slots" - basically in gchessboard, any DOM element can be placed on a specific square by assigning the "slot" attribute.

In this case, your "background color of a specific square" can be achieved by thinking of it as a div overlay, with 100% width and height within a square, and styling that div with CSS.

Here's a quick CodePen with an example: https://codepen.io/mganjoo/pen/gOyGeOP

Is that what you were looking for?

from gchessboard.

Oh wow, thank you very much!
That's exactly what I'm looking for.

The documentation about the slots sounded to me like a layer above the pieces. So I though if I'm using this, the whole field is red and the piece will not be visible anymore because it's under the red layer.

But now it's a layer between the piece and the real background. So this is exactly what I'm looking for. Thanks a lot!

from gchessboard.

Yes, that's a good point! I should make that clear in the documentation - that was indeed the thinking when I designed this, that pieces would always be on top (though even with the slot element, you could manually "hack" it to show above pieces, with a high enough z-index actually this won't work - but also I don't yet have a situation where we'd want the piece to appear below a slotted overlay. If that need arises I'll look into it later).

Thanks for checking out the library!

from gchessboard.