couldn’t have said it better
1 Like
I was just looking for something like this, so the topic was perfect timing… I like the flat style of GoKibitz, for some reason I find it calm and peaceful and friendly, so I wanted to replicate it in OGS. Specifically I really wanted the flat edges on the white stones, but since the OGS plain style has a black border on the white stones, and uses HTML canvas to draw the board, I had to make some JavaScript changes. In order for this to work, you will need to use Tampermonkey which injects a user script into the page. Here is the script.
I tested it with a quick bot game and a demo board, but I’m usually a backend programmer so there definitely might be bugs 
just a warning, if something looks wrong in the middle of a game, turn off Tampermonkey and refresh the page
edit: Oh and by the way I also found out you can do something like user scripts in iOS (I usually play on my iPad)… there is something called “Shortcuts” that can inject Javascript. It’s a lot harder to get it working but if anyone wants I can help
16 Likes
I think that looks wonderful my dude! i like the more simple style like that. Often where there is too much going on in the backround it can make focusing on the game quite difficult. So i can certainly see the appeal!
2 Likes
That’s amazing! I’m playing around with it now, finally I can change how the stones look!
Edit: Just realised how horrible the above must look for a red/green colourblind person 
It’s not easy to play with either, still needs some improvement.
22 Likes
OMG! when you get this down, and simplified for the code simpletons like me, then please. please, PLEASE!!! let us know how! Then we can turn this thread in to a board and stones appriciation page XD
5 Likes
Wouldn’t it be easier to just add it to the main site?
I don’t have time to actually program it, by the way. Nor do I have the skills.
3 Likes
Okay, it took me way to long to recognize the game.
3 Likes
I finally started playing 19x19 last week … I think I’m getting distracted from learning how to play the big board… After I saw this post on Reddit, I just had to try 
I wanted to make the bottom of the board like the screenshot but my pixel art + CSS skills are pretty bad. anyway here is the script again if anyone wants to try it or improve
https://greasyfork.org/en/scripts/405417-ogs-8-bit-style
Oh and I meant to agree with Vsotvep, I think it would be easier to add to the main site, otherwise any plugin is just going to break eventually. But the front end of OGS is open source, maybe they would accept a pull request … Unfortunately I also don’t have the skills or time to do it, or at least not do it right
16 Likes
I am pretty sure anoek would accept a pull like this 
Actually uploading images might be troublesome as it would require backend support and would open the risks of running out of storage and stuff, but perhaps simple link to an outside source stored in a cookie might work for starters?
A good chance for glory and eternal gratefullnes of the community for anyone who picks it up Would be fun to then share usable images…
If no one goes for it I will try to finally also start contributing code next month and make this my first project, but no promises.
10 Likes
If someone’s already doing this, would it be difficult to add options to make the “last move” circle more prominent, possibly looking like a 75% size stone, and the black and white stones set with transparency 100% so that blind go could be played?
OMG thats awesome! I love i!
This is legitimatly amazing.
THank you @Vsotvep & @okonomichiyaki for helping code free people such as myself easily create a customised setup. I managed to make it look like this which I’m pretty happy with.
13 Likes
oh wow nice one, i really like the combination background image and top bar! i’m glad it worked for you 
3 Likes
On the off chance, someone else was considering coding a PR for this, as not to double our efforts, I have looked at it today and think I can make it happen. So find something else to work on 
I think it should be doable? Will keep it in mind.
13 Likes
Just happen to be watching a couple of wonderful players and testing out my new bamboo board style. Thanks @Vsotvep! I look forward to putting it to the real test with a live game here in a little while.
7 Likes
Having fun with this.
Can you guys help by posting the tags for the elements?
I’ve figured out .Goban and .black.player-container but I would also like to control the color of the timers, lines, stone images, last move color, ect…
If we have a .class list it will make it easier for everyone I think.
.Goban
.black.player-container
.white.player-container
or both
.player-container
9 Likes
The best way is to right click anything and use “inspect element” which should help find CSS classes or IDs. You can then override easily with !important in your user stylesheet.
The stones and lines are drawn with HTML canvas so I’m not sure if it’s easy to swap images using CSS alone. But here’s a quick script that will hopefully help, it does nothing but replace the stones with gems … https://greasyfork.org/en/scripts/405885-ogs-custom-stones
To swap with some other images, just install with Tampermonkey, open the dashboard and open the script source code, then replace the two imgur URLs in the script with your own images, and save the script. It should work… but if it doesn’t I can try to help
(actually I thought this would be ugly but I think I kind of like it with the dark background 
)
Changing the color of the lines I think is as simple as this Javascript:
data.setDefault("custom.line", "pink");
(data is a global from OGS source I think so this can go anywhere)
edit: I think custom line color only works with the “plain” style so best if you are also overloading the background… probably a better way but too sleepy to read more OGS source for tonight
I’m not sure where the color for the circle on the last moved stone is but I think it’s also Javascript
13 Likes
It took me a while, but OGS now supports custom board background! (I am still keeping custom stones and “blind/one-color” versions in mind, will add that later hopefully)
To add your own background:
- Click your upper right avatar.
- Select “custom” board option, and 3 new elements will appear.
- Paste an external link to your desired image. This setting will be saved locally and is device specific.
The link provided needs to be a direct image link (with no other elements on the page, just the image)
The simplest way to achieve this is to right-click any image you are viewing (or uploaded to some image hosting website) and selecting “copy image address” or “copy image link” (or something similar depending on your browser). Now just paste (ctrl+v) into the OGS form, all boards should immediately update with the selected image.
Pretty much any format is supported, the images can be transparent or vector or animated gif as well and do not need to be square, but in that case part of the image that stretches over the goban will be cut-off.
If you have some unique pick, you can brag here
21 Likes