How to customize boards for each tournament/ladder/game

This was originally in the thread about features that will never be implemented, but that title no longer applies so I have to start a new topic. Thanks to a recent change by @GreenAsJade, it’s now possible to customize your board backgrounds for each tournament, ladder, or game! Here’s what you do:

  1. Install a browser extension that lets you customize CSS such as Stylish.
  2. Make a new custom theme, and paste in your desired CSS (see below for an example).
  3. Set the theme to apply to URLs on the domain online-go.com.

Note: it only works on the individual game pages right now. Apparently it’s a lot harder to get the tournament/ladder/game ids onto the pages like home, groups, etc. that can show a lot of games, like in my screenshot. Post here to let the devs know if you would be excited about that!

Example theme

Here’s example CSS using artwork from the board backgrounds library thread. It customizes all ladder games to show one background, and @S_Alexander cat tournaments another. Just to show how it works, this random game gets its own unique background. I also selected some Japanese artwork for last few from the “Oza” and “Meijin” series.

/* default for all ladders - rabbit mosaic */
div.Goban[data-ladder-id] {
  background-image: url("https://ogs-forums.s3.dualstack.us-east-1.amazonaws.com/original/2X/6/65132c617a05c2703e38456f6a0236a09f78c654.jpeg") !important;
}

/* an individual game */
div.Goban[data-game-id="26487735"]
{
    background-image: url("https://i.imgur.com/cyHhCdz.png") !important;
}

/* tournaments from group "Leopard's Resting Tree" */
div.Goban[data-tournament-id="70080"],div.Goban[data-tournament-id="71553"],div.Goban[data-tournament-id="71609"],
div.Goban[data-tournament-id="71709"],div.Goban[data-tournament-id="71248"],div.Goban[data-tournament-id="70501"],
div.Goban[data-tournament-id="71715"],div.Goban[data-tournament-id="70080"],div.Goban[data-tournament-id="70082"],
div.Goban[data-tournament-id="68688"],div.Goban[data-tournament-id="67817"],div.Goban[data-tournament-id="66295"],
div.Goban[data-tournament-id="65143"],div.Goban[data-tournament-id="63733"],div.Goban[data-tournament-id="63695"],
div.Goban[data-tournament-id="62813"],div.Goban[data-tournament-id="62495"],div.Goban[data-tournament-id="62822"],
div.Goban[data-tournament-id="62381"]
{
    background-image: url("https://i.imgur.com/6wu505m.jpg") !important;
}

/* Meijin */
div.Goban[data-tournament-id="69385"],div.Goban[data-tournament-id="43368"],div.Goban[data-tournament-id="56359"],
div.Goban[data-tournament-id="64661"],div.Goban[data-tournament-id="40969"],
div.Goban[data-tournament-id="69383"],div.Goban[data-tournament-id="54440"],div.Goban[data-tournament-id="43369"]
{
    background-image: url("https://wappsite.net/assets/dist/img/japannese-wallpaper-modified.jpg") !important;
}

/* Oza */
div.Goban[data-tournament-id="69270"],div.Goban[data-tournament-id="54435"]
{
    background-image: url("https://ogs-forums.s3.dualstack.us-east-1.amazonaws.com/original/3X/9/a/9a49e756386f258b4b4c892281bfce037f025b2a.jpeg") !important;
}

Obviously we could take this a lot further - please post your suggestions/additions and I’ll add them to the example!

8 Likes

You should post a shreenshot so ppl know what is possible!

5 Likes

and host a tournament with instructions for everyone to set a specific (same) background for fun and to promote it :stuck_out_tongue:

4 Likes

It’d be cool if I could put a jpg called “pdg137.jpg” some place and magically have that as the background for pdg137’s games.

4 Likes

Can I get special permission for a 15x15 tournament? :rofl:

3 Likes

Okay! Here’s what it looks like for me now, as I click through my games.

Ladder game:

Meijin Nines game:

And… a cat tournament :grin::

We need more data attributes! Maybe you can make this happen. I’d love group-id, too, so we don’t have to copy over all the tournament ids by hand. More practically useful, though, would be something indicating the game rules, to customize default Chinese/Japanese/AGA boards.

2 Likes