How to customize boards for each tournament/ladder/game

General Go Discussion
1

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!

10 Likes
2

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

6 Likes
3

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
4

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
5

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

3 Likes
6

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

Ladder game:

image
image748×543 111 KB

Meijin Nines game:

image
image747×549 91.2 KB

And… a cat tournament :grin::

image
image749×545 103 KB

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.

5 Likes
7

Hi guys, did you know that you can make your board a moving GIF! For exaple, copy this link and paste it in the URL thingy https://matrix-client.matrix.org/_matrix/media/r0/download/matrix.org/zeApoIcpQkAsNaElMwQUexQD

1 Like
8

Oh, and sorry for the edit

9

Ahhh. :frowning: I was hoping for that to be a Rick Roll.

2 Likes