how to do your own custom board, pieces • page 2/2 • General Chess Discussion • lichess.org

scarpentus

#11

I recently did this for chess com neo pieces using the stylebot chrome css extension.

For example:

https://images.chesscomfiles.com/chess-themes/pieces/neo/150/bp.png

Converting the png to svg:

https://www.aconvert.com/image/png-to-svg/

Base64 encoding the svg:

https://www.base64encode.org/

And then adding this black pawn css to style bot for lichess.org:

piece.pawn.black { background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE1MHB4IiBoZWlnaHQ9IjE1MHB4IiB2aWV3Qm94PSIwIDAgMTUwIDE1MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTUwIDE1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+ICA8aW1hZ2UgaWQ9ImltYWdlMCIgd2lkdGg9IjE1MCIgaGVpZ2h0PSIxNTAiIHg9IjAiIHk9IjAiCiAgICBocmVmPSJkYXRhOmltYWdlL3BuZztiYXNlNjQsaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUpZQUFBQ1dDQU1BQUFBTDM0SFFBQUFBQkdkQlRVRUFBTEdQQy94aEJRQUFBQ0JqU0ZKTgpBQUI2SmdBQWdJUUFBUG9BQUFDQTZBQUFkVEFBQU9wZ0FBQTZtQUFBRjNDY3VsRThBQUFBTTFCTVZFVk1hWEVrSkNRbEpTVWxKU1VsCkpTVWxKU1VsSlNVbEpTVXNMQ3NtSmlaRlFrSldVMUptWTJJNk9UbDNkSFJOU2tuLy8vOFgyUS9vQUFBQUNYUlNUbE1BSHpkV28rREUKZXZ2cERlZ2FBQUFBQVdKTFIwUVFsYklOTEFBQUFBZDBTVTFGQitVS0ZnNGNDODZrbWF3QUFBUGZTVVJCVkhqYTdadnJjdU1nRElWagpmSUdBSGQ3L2JUY0lZb05qd0YxanFkUFIrZG51ekg1ekpBdEowTWVEeFdLeFdDd1dpOFZpc1Znc0ZvdkZZdjFXZGFMdlJVZE5rYWdmCnhtZlFKQVUxalZjblZ5YXZVVklqdlNYVjgwdUtHa3g0cDVRMjh6d2JvNWNBT1pGbVdROFVpM205WG04b0x3MC9VejBkbFFTQU9ZWUMKTURDTWpBdW85QnZxWlhaU2hGeTkrNy9OM2lxdnhmMk9wRlIwS2s5bHJPTWFLZkorS2xDRnhCL3dxVndJbDZPOENuWUJGMzRZblZsNQpLbGZDWFBtaU1NdG1RMGhtMStETnlsSzlzVno1d2o2RmxLOVlKaS90N0JweHFjVGJpYmxrbHNOeTJZVmJJNlNQb1NsaWFmUlNQMEIxCm1PdFl1TWsxUVdyVnNCUjJSUjJoUEpnNkZtN2xBcXlac2M0SmNxdElaU2x5Qzc3RW1sbjRYNktyVzlVWTR0Y3RWK1dyTWNTdjh1NU0KWENwVUJHY2lkQkNWRUdxQy9oU2EweklWU1h2cXhtbGJDaUZKZDFxeVM5T1o1WnQ1bmJOS1UwMCtmazdVT1NxeU9kRlAxZm9RU3ROTgoxV0VIRWVXWC9VQnB5aDNFUS9pVjBRcTFDbjVPRThKZzFuTTVPQm85RjhsT1VFemVxc00rQWpZakZEdEJiMVcybncvcGhXeVlYNW5DCkhqQmI1L0VOVzYzS0R6L3I5NGhtV0xkWlZWallyTlVMeXpBb294YWdTZ3VicllEaGxGWFlJYzFtOXF2NE1oWVlob01sQ2kzTnJvdkEKYkp5N1RPdVF4VUtoZ2c1d3FWREZweU5XUHo5VW8yaGpzN0FxaEhoVzdGcXA0RXRFSzZoVGNrMm45MXFTWCtPMXFLS01wWk83UmNUVApaemlQaFhsWWR6Sm9kRmVjUjFqVDUxK1FOSU91VnRndkxQUUYwbDd3VGRvRExPemxReUxoQy82ZWkyQlZrMGlHQlluOXhpSzhxM2FwCnBjd0JGOUZFSFJTVmU3dFBMa1dISmFQRDBmNmVLS3B0ZU4xeGtTeVJJck1PRDJqTXB2UmJMdUhuREJlZFhXRFdmTnpRUUVkRGtsMXUKdjZWMm80OU43Q0o4QjdHYmZXeVNYUVMxUy9xNXV0eVlvdTlzM0xDb2pxWnFHNGNSTzcxZzQ1YTVRNC9EcUZDcmhQZzgrNm5PaUpoYwpRR1d6bTVGa2hZckgxWjlhSTMyNHNQSkxiaHViN0tTWWNHRjhqOTIwVVJVdU9tM01kZitHeXo4ek5hK3lXWkZoQzhLN1NtOVZXQVJXCmJ2YmphNVo3RGZQUFRQWHJGSlZKVjRMM2ZaRXl0cW9Td2crWTNReTdLWkF5dHVxRVZ6SFpmWldpajNMOW5GVXgybklUbDRpcFRsdTEKYWJsbmV6TmVvL0pjemZ0b3VlWFZmMEVGcnNZRnZ3dnQxUVVxWTlxSGNmRHQxWTl6UFZIenAwQmRyV1U0cDlZN0FCbk11a1psYkdPNwpSditzK2lJVjJOWHdZeFNsRnZrbmFydVBPL0g0OVh3VTI1WDZDYXJENVJENktMYWJhVlg5M2VUNUtEWmI5bmFRV2kyb29IUzFTaTdYCk84eE56SUxrYXRVUFFzWTNvV3FhODlKbGZCc3MwN0NnRHJ1dDN5L0Nha1RsS2tSTHJLV1JHaTdqa3R2RDYvcnJXR05UVWY4RktvdkYKWXJGWXJMK3FmLzV3eGQzRWlVa3dBQUFBSlhSRldIUmtZWFJsT21OeVpXRjBaUUF5TURJeExURXdMVEl5VkRFME9qSTRPakV4S3pBdwpPakF3VVovMUx3QUFBQ1YwUlZoMFpHRjBaVHB0YjJScFpua0FNakF5TVMweE1DMHlNbFF4TkRveU9Eb3hNU3N3TURvd01DRENUWk1BCkFBQUFTVVZPUks1Q1lJST0iIC8+Cjwvc3ZnPg==') }

And then so on for all the pieces...

A bit of a futzy activity but I'm very happy with how it turned out.

I recently did this for chess com neo pieces using the stylebot chrome css extension. For example: https://images.chesscomfiles.com/chess-themes/pieces/neo/150/bp.png Converting the png to svg: https://www.aconvert.com/image/png-to-svg/ Base64 encoding the svg: https://www.base64encode.org/ And then adding this black pawn css to style bot for lichess.org: piece.pawn.black { background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE1MHB4IiBoZWlnaHQ9IjE1MHB4IiB2aWV3Qm94PSIwIDAgMTUwIDE1MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTUwIDE1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+ICA8aW1hZ2UgaWQ9ImltYWdlMCIgd2lkdGg9IjE1MCIgaGVpZ2h0PSIxNTAiIHg9IjAiIHk9IjAiCiAgICBocmVmPSJkYXRhOmltYWdlL3BuZztiYXNlNjQsaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUpZQUFBQ1dDQU1BQUFBTDM0SFFBQUFBQkdkQlRVRUFBTEdQQy94aEJRQUFBQ0JqU0ZKTgpBQUI2SmdBQWdJUUFBUG9BQUFDQTZBQUFkVEFBQU9wZ0FBQTZtQUFBRjNDY3VsRThBQUFBTTFCTVZFVk1hWEVrSkNRbEpTVWxKU1VsCkpTVWxKU1VsSlNVbEpTVXNMQ3NtSmlaRlFrSldVMUptWTJJNk9UbDNkSFJOU2tuLy8vOFgyUS9vQUFBQUNYUlNUbE1BSHpkV28rREUKZXZ2cERlZ2FBQUFBQVdKTFIwUVFsYklOTEFBQUFBZDBTVTFGQitVS0ZnNGNDODZrbWF3QUFBUGZTVVJCVkhqYTdadnJjdU1nRElWagpmSUdBSGQ3L2JUY0lZb05qd0YxanFkUFIrZG51ekg1ekpBdEowTWVEeFdLeFdDd1dpOFZpc1Znc0ZvdkZZdjFXZGFMdlJVZE5rYWdmCnhtZlFKQVUxalZjblZ5YXZVVklqdlNYVjgwdUtHa3g0cDVRMjh6d2JvNWNBT1pGbVdROFVpM205WG04b0x3MC9VejBkbFFTQU9ZWUMKTURDTWpBdW85QnZxWlhaU2hGeTkrNy9OM2lxdnhmMk9wRlIwS2s5bHJPTWFLZkorS2xDRnhCL3dxVndJbDZPOENuWUJGMzRZblZsNQpLbGZDWFBtaU1NdG1RMGhtMStETnlsSzlzVno1d2o2RmxLOVlKaS90N0JweHFjVGJpYmxrbHNOeTJZVmJJNlNQb1NsaWFmUlNQMEIxCm1PdFl1TWsxUVdyVnNCUjJSUjJoUEpnNkZtN2xBcXlac2M0SmNxdElaU2x5Qzc3RW1sbjRYNktyVzlVWTR0Y3RWK1dyTWNTdjh1NU0KWENwVUJHY2lkQkNWRUdxQy9oU2EweklWU1h2cXhtbGJDaUZKZDFxeVM5T1o1WnQ1bmJOS1UwMCtmazdVT1NxeU9kRlAxZm9RU3ROTgoxV0VIRWVXWC9VQnB5aDNFUS9pVjBRcTFDbjVPRThKZzFuTTVPQm85RjhsT1VFemVxc00rQWpZakZEdEJiMVcybncvcGhXeVlYNW5DCkhqQmI1L0VOVzYzS0R6L3I5NGhtV0xkWlZWallyTlVMeXpBb294YWdTZ3VicllEaGxGWFlJYzFtOXF2NE1oWVlob01sQ2kzTnJvdkEKYkp5N1RPdVF4VUtoZ2c1d3FWREZweU5XUHo5VW8yaGpzN0FxaEhoVzdGcXA0RXRFSzZoVGNrMm45MXFTWCtPMXFLS01wWk83UmNUVApaemlQaFhsWWR6Sm9kRmVjUjFqVDUxK1FOSU91VnRndkxQUUYwbDd3VGRvRExPemxReUxoQy82ZWkyQlZrMGlHQlluOXhpSzhxM2FwCnBjd0JGOUZFSFJTVmU3dFBMa1dISmFQRDBmNmVLS3B0ZU4xeGtTeVJJck1PRDJqTXB2UmJMdUhuREJlZFhXRFdmTnpRUUVkRGtsMXUKdjZWMm80OU43Q0o4QjdHYmZXeVNYUVMxUy9xNXV0eVlvdTlzM0xDb2pxWnFHNGNSTzcxZzQ1YTVRNC9EcUZDcmhQZzgrNm5PaUpoYwpRR1d6bTVGa2hZckgxWjlhSTMyNHNQSkxiaHViN0tTWWNHRjhqOTIwVVJVdU9tM01kZitHeXo4ek5hK3lXWkZoQzhLN1NtOVZXQVJXCmJ2YmphNVo3RGZQUFRQWHJGSlZKVjRMM2ZaRXl0cW9Td2crWTNReTdLWkF5dHVxRVZ6SFpmWldpajNMOW5GVXgybklUbDRpcFRsdTEKYWJsbmV6TmVvL0pjemZ0b3VlWFZmMEVGcnNZRnZ3dnQxUVVxWTlxSGNmRHQxWTl6UFZIenAwQmRyV1U0cDlZN0FCbk11a1psYkdPNwpSditzK2lJVjJOWHdZeFNsRnZrbmFydVBPL0g0OVh3VTI1WDZDYXJENVJENktMYWJhVlg5M2VUNUtEWmI5bmFRV2kyb29IUzFTaTdYCk84eE56SUxrYXRVUFFzWTNvV3FhODlKbGZCc3MwN0NnRHJ1dDN5L0Nha1RsS2tSTHJLV1JHaTdqa3R2RDYvcnJXR05UVWY4RktvdkYKWXJGWXJMK3FmLzV3eGQzRWlVa3dBQUFBSlhSRldIUmtZWFJsT21OeVpXRjBaUUF5TURJeExURXdMVEl5VkRFME9qSTRPakV4S3pBdwpPakF3VVovMUx3QUFBQ1YwUlZoMFpHRjBaVHB0YjJScFpua0FNakF5TVMweE1DMHlNbFF4TkRveU9Eb3hNU3N3TURvd01DRENUWk1BCkFBQUFTVVZPUks1Q1lJST0iIC8+Cjwvc3ZnPg==') } And then so on for all the pieces... A bit of a futzy activity but I'm very happy with how it turned out.