Stylus client-side customized chess.com screen for your Twitch or YouTube streams

Hi All

Using the Stylus chrome extension, I managed to shift the bottom-row player data to the top of the screen. I did this because I needed both rows of player information to share roughly the same hue background. If I didn't do this, then with the custom background image that I am using on Chess.com, the bottom row player data's data would have been darker compared to the top row player's data. As they are now, both rows are in the same area of background color, which is what I wanted to achieve.

This allows me to display the player avatar/ user name / rating / national flag / connectivity status and timers to the top of the screen in my Streamlabs OBS desktop program. With a little trick of displaying the chess.com custom background on the right side of my StreamLabs OBS scene, I am able to concoct an illusion that the right-half of the scene (with me in it) is one whole background. When in actual fact it is two sections - top of the right section is the players' data, and bottom of the right-section is an exact duplicate of my chess.com background.

You will notice too that I have customized the national flags displayed. They are larger, bolder more colorful and curvier. I've also customized the timers and the overall font of the screen.


My stylus code also includes this set of Leipzig Chess pieces. The Leipzig chess set is not part of the standard stable of chess pieces within chess.com. It is an old-fashioned chess piece set used in many early Twentieth Century chess books. As in the original Chess Fundamentals book by Capablanca.

A bonus feature of my Stylus code is I am able to insert a live wallpaper (an animated gif image) as the background of the chess board. The screenshot above shows a sunrise sea front scene. Distracting or art? Or both? Is it effective or a waste of time to have? You decide.

So far I have assisted one Twitch chess streamer and one chess.com user to achieve the same look by sharing my Stylus style codes with them. Would you like to achieve the same thing too?

Stylus code also includes changing the background of the Chess.com page to a live wallpaper (animated gif). 

OK, here's the deal. If I get at least 50 responses from chess.com users or streamers or anyone in this forum, asking for me to share my Stylus code, I will post, in this forum thread, the download links to my COMPLETE set of stylus codes, including instructions how to set it up on your Windows computer. If you want my code, please reply to this email thread with "Yes, please". 

Sharing is caring. 

Regards
Frankie "Durian Defense" Kam
twitch.tv/durian_defense
 

can I have code pls

or just the image link without the chess pieces...

Here you go. Because you were the only one who asked.

/* ==UserStyle== 
@name TRY THIS 
@namespace github.com/openstyles/stylus 
@version 1.0.0 
@description A new userstyle 
@author Me
==/UserStyle== */
@-moz-document domain("chess.com") {
    body {
        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/cefl-my.sharepoint.com/personal/frankie_cambridgeforlife_org/Documents/frankie/ripplewater/https/013273ac4c.gif") !important;
        color: #EEE;
        background-size: cover!important;
        ;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .purple .is2d coords {
        --cg-ccw: #4ee77f75!important;
        --cg-ccb: #11331c94!important;
        --cg-cs: none!important;
    }

    .purple .is2d .cg-board {
        background-image: url(https://i.imgur.com/9p4Aqb3.png)!important;
        /* Ukraine Gaps! */
    }

    .is2d cg-board {
        background-image: url("https://images.chesscomfiles.com/proxy/i.imgur.com/9p4Aqb3/https/76269f4be0.png")!important;
    }
    .number.coords-dark {
        font-weight: 350!important;
    }
    .number.coords-light {
        color: rgb(62, 80, 42)!important;
        font-weight: 380!important;
    }

    .letter.coords-light {
        color: rgb(17, 22, 12)!important;
        font-weight: 380!important;
    }

    .letter.coords-dark {
        font-weight: 300!important;
    }

    .chessboard-component {
        background-image: url(https://i.imgur.com/9p4Aqb3.png)!important;
        background-position: left;
        /* Center the image */
        background-size: contain;
    }
    .board {
        background-image: url(https://i.imgur.com/9p4Aqb3.png)!important;

        background-position: center;
        /* Center the image */
        background-size: cover;
    }

    div [style*="bp.png"],
    div [class^="piece bp"] {
        background-image: url("https://images.chesscomfiles.com/proxy/i.imgur.com/9yA7ykp/https/506c5af439.png")!important;
    }
    .piece.bp .promotion-piece.bp {
        background-image: url("https://images.chesscomfiles.com/proxy/i.imgur.com/9yA7ykp/https/506c5af439.png")!important;
    }

    div [style*="br.png"],
    div [class^="piece br"] {
        background-image: url("https://images.chesscomfiles.com/proxy/i.imgur.com/x6CigHa/https/bc6ba9c106.png")!important;
    }
    .piece.br .promotion-piece.br {
        background-image: url("https://images.chesscomfiles.com/proxy/i.imgur.com/x6CigHa/https/bc6ba9c106.png")!important;
    }

    div [style*="bn.png"],
    div [class^="piece bn"] {
        background-image: url("https://images.chesscomfiles.com/proxy/i.imgur.com/WOLwZJ6/https/165da429d0.pngg")!important;
    }
    .piece.bn .promotion-piece.bn {
        background-image: url("https://images.chesscomfiles.com/proxy/i.imgur.com/WOLwZJ6/https/d263c81762.png")!important;
    }

    div [style*="bb.png"],
    div [class^="piece bb"] {
        background-image: url("https://images.chesscomfiles.com/proxy/i.imgur.com/lTqG1Oy/https/3960fcb95b.png")!important;
    }
    .piece.bb .promotion-piece.bb {
        background-image: url("https://images.chesscomfiles.com/proxy/i.imgur.com/lTqG1Oy/https/3960fcb95b.png")!important;
    }

    div [style*="bq.png"],
    div [class^="piece bq"] {
        background-image: url("https://images.chesscomfiles.com/proxy/i.imgur.com/rsT9Fkb/https/a600d9e609.png")!important;
    }
    .piece.bq .promotion-piece.bq {
        background-image: url("https://images.chesscomfiles.com/proxy/i.imgur.com/rsT9Fkb/https/a600d9e609.png")!important;
    }

    div [style*="bk.png"],
    div [class^="piece bk"] {
        background-image: url("https://images.chesscomfiles.com/proxy/i.imgur.com/GGzuBOA/https/bec75bec74.png")!important;
    }
    .piece.bk .promotion-piece.bk {
        background-image: url(https://i.imgur.com/GGzuBOA.png)!important;
    }

    div [style*="wp.png"],
    div [class^="piece wp"] {
        background-image: url("https://images.chesscomfiles.com/proxy/i.imgur.com/RJiwbb1/https/33ce45f5d8.png")!important;
    }

    .piece.wp .promotion-piece.wp {
        background-image: url("https://images.chesscomfiles.com/proxy/i.imgur.com/RJiwbb1/https/33ce45f5d8.png")!important;
    }

    div [style*="wr.png"],
    div [class^="piece wr"] {
        background-image: url("https://images.chesscomfiles.com/proxy/i.imgur.com/T1h8G0z/https/cdc3a15337.png")!important;
    }

    .piece.wr .promotion-piece.wr {
        background-image: url("https://images.chesscomfiles.com/proxy/i.imgur.com/T1h8G0z/https/cdc3a15337.png")!important;
    }

    div [style*="wn.png"],
    div [class^="piece wn"] {
        background-image: url("https://images.chesscomfiles.com/proxy/i.imgur.com/Y0j5npi/https/d766eba9c4.png")!important;
    }

    .piece.wn .promotion-piece.wn {
        background-image: url("https://images.chesscomfiles.com/proxy/i.imgur.com/Y0j5npi/https/d766eba9c4.png")!important;
    }

    div [style*="wb.png"],
    div [class^="piece wb"] {
        background-image: url("https://images.chesscomfiles.com/proxy/i.imgur.com/TvlrA0Q/https/54b362b9a5.png")!important;
    }

    .piece.wb .promotion-piece.wb {
        background-image: url("https://images.chesscomfiles.com/proxy/i.imgur.com/TvlrA0Q/https/54b362b9a5.png")!important;
    }

    div [style*="wq.png"],
    div [class^="piece wq"] {
        background-image: url("https://images.chesscomfiles.com/proxy/i.imgur.com/c7i9kBH/https/c06dcccf31.png")!important;
    }

    #board-single .piece.wq,
    #board-single .promotion-piece.wq {
        background-image: url("https://images.chesscomfiles.com/proxy/i.imgur.com/c7i9kBH/https/c06dcccf31.png")!important;
    }

    div [style*="wk.png"],
    div [class^="piece wk"] {
        background-image: url("https://images.chesscomfiles.com/proxy/i.imgur.com/lAr1XSB/https/68f1a9bd65.png")!important;
    }

    .piece.wk .promotion-piece.wk {
        background-image: url("https://images.chesscomfiles.com/proxy/i.imgur.com/lAr1XSB/https/68f1a9bd65.png")!important;
    }

    #board-layout-chessboard {
        cursor: url(https://cefl4u.org/images/mma02_pink_s.cur), default!important;
    }
    #board-play-board {
        cursor: url(https://cefl4u.org/images/mma02_pink_s.cur), default!important;
    }
    #board-single {
        cursor: url(https://cefl4u.org/images/mma02_pink_s.cur), default!important;
    }
    #game-board {
        cursor: url(https://cefl4u.org/images/mma02_pink_s.cur), default!important;
    }
    .piece {
        cursor: url(https://cefl4u.org/images/mma01_pink_s.cur), grab!important;
    }

    .piece.dragging {
        cursor: url(https://cefl4u.org/images/mma03_pink_s.cur), grab!important;
    }
}

What elements of chess.com have I modded in the code above?
(1) Animated background 
(2) Custom green chessboard
(3) Custom pieces with shadow
(4) Custom mouse cursor (you have to try Stylus with the code above to see my custom mouse pointers. Drag around the chessboard, hover over a piece, grab a piece...all new mouse pointers. The screenshot does not capture the mouse pointers)

Enjoy!

Related information on tools that I used: https://www.youtube.com/watch?v=nBgyqs6UWiw

This really looks cool! I want this animated background 

But, I have a doubt that changing these things will affect the speed of the interface while playing? 

@Bheshmaparva In most cases, if you were to convert an MP4 into an animated GIF, the resulting size of the gif files will be hundreds of Mbs in size. Now THOSE gif files will slow down your processor, especially if you are streaming on Twitch or Youtube. However, with the right tools (I use Acethinker Video Editor - it converts MP4 files into Gif files that are smaller in size compared to other free or commercial software that I know), you can optimize the gif files so that they do not exceed 100Mb. If you go to my animated GIF file folder here:
https://cefl-my.sharepoint.com/:f:/g/personal/frankie_cambridgeforlife_org/EqMsKsTBRbJPoUs90T2vmh8BXQQ02mxDD_owGPQLDrp1sQ?e=MzVf9x
you will see that the majority of my animated GIF files are around 30Mb to 70Mb. So it is important to compress the GIF files to minimise their file sizes.

Amazing. Thanks for the information. Let me give it a try!