Custom boards

[Lord_o_o_Spoon]

Hi there, i know this isnt an important suggestion by any stretch of the imagination, but I was wondering if anything was in the pipelione for more board texturs and appreareances? Or indeed, could there be a way in which a user could upload their own texturs/images, to use as boards, much in the same way a person can change their profile picture.

I ask, because I’d like to change my board, but none of the available texturs available, are at all appealing to me (Not that they are bad, becaus ive used most of them, they just no longer appeal to me)

I recognise that this is an ‘Unimportant’ suggestion, but i do think adding some level of personal customisation to the boards, would be a huge attraction as well, as offering me the oppertunity to cvhange my board as often as i wanted, to images, or different texturs.

Thakn you for your consideration.

[Vsotvep]

You can use a css injection plugin for your browser to change the background of the board:, by adding

.Goban {
    background-image: url("https://url-to-your-picture/") !important;
    background-size: cover;
}

You might have to fiddle a bit with the size if the image you pick is particularly large (“auto 100%” or “100% auto” could be better sometimes).

Example:

I haven’t figured out how to replace the stones. If someone can tell me that would be awesome!

[JulianSanchezNaranjo]

OMG that is awesome thanks for sharing the code

[Vsotvep]

You’re welcome

(I can’t ignore that the use of dark-mode is a bit redundant there )

[Lord_o_o_Spoon]

I dont know the first thing about code, or where it goes or anything. If i know how it worked, how to do it, and such, i would be super greatful!!! but im a pesant who does not understand these things XD.

Could you point me in the direction to where i can learn how to do this simple thing? or could you post up a walk through for a simpleton like me?

[Lord_o_o_Spoon]

Love the marble image you chose for that by the way… simply beautiful.

[Vsotvep]

Sure thing. It depends a bit on which browser you’re using, but generally it should be possible in any browser.

1. Get a browser extension that allows you inject css (for example this one if you use Chrome, or this one if you use Firefox, there’s ways to do it for other browsers as well, but I don’t have experience with those).
2. Find an image you want as a background, and make sure it is uploaded somewhere on the internet.
3. Find the URL of the image (e.g. by right-clicking on the image and choosing “Copy image address”).
4. Go to the OGS main site and open a game (so you can see if it works)
5. Open the css injector extension, it should give a text field where you can write css. Paste the code I wrote above in that text field, where you replace https://url-to-your-picture/ with the actual URL to your picture.
6. It should work immediately, but if it doesn’t, try reloading the page.
7. If the scaling of the image is off, try replacing the line saying background-size: cover; line with background-size: 100% auto; or with background-size: auto 100%;

[Lord_o_o_Spoon]

Sorry to keep bothering you… Below is the thingy i put together following your instructions but it does not seem to be working, after following your steps… am i doing something wrong?

Again, sorry to bother!!!

.Goban {
background-image: url(http://www.gluemovement.com/wp-content/uploads/2016/08/woodbackground-1038x692.jpeg) !important;
background-size: cover;
}

[yebellz]

@Vsotvep

Get a browser extension that allows you inject css

While a browser extension might make it easier, this is also possible to do via the developer tools built into most browsers (like Firefox and Chrome), and that might be preferable to installing an extension.

[Vsotvep]

I think you forgot to put apostrophe’s ( ’ ’ ) or double apostrophe’s ( " " ) around your URL.

.Goban {
   background-image: url("http://www.gluemovement.com/wp-content/uploads/2016/08/woodbackground-1038x692.jpeg") !important;
   background-size: cover;
}

[Lord_o_o_Spoon]

@Vsotvep

.Goban { background-image: url(“http://www.gluemovement.com/wp-content/uploads/2016/08/woodbackground-1038x692.jpeg”) !important; background-size: cover; }

That, and i wasnt checking the “Apply to domain button.” Thats right… im an idiot XD

[Lord_o_o_Spoon]

Super happy with the result too! Its beautiful! And means i can change depending on ym mood and vibe now!!! Thank you very very much!

[Napster]

But is there animated gif support?

[Vsotvep]

Yeah, sure, try

background-image: url("https://i.giphy.com/media/Y4vip84hg9BhdNidTR/giphy.webp") !important;
    

[_KoBa]

EDIT a bit better one

EDIT2

or actually idk, which one do you like?

edit3

found my favotire ^^

EDIT n+1
Had to make some modifications again in order for more readable thumbnails, i think its starting to be good now xD

[Lord_o_o_Spoon]

I descided against the first one i had because it was a little dark. I thought that this image from the movie “Spirited Away” would be a delightful scene to play go on… i was right!!!

[Lord_o_o_Spoon]

Go with the Matt stones on the first but with the black lines on the second. See how that looks?

[Napster]

I will in a bit :3 ty!

[ElZilcho]

Custom boards

I descided against the first one i had because it was a little dark. I thought that this image from the movie “Spirited Away” would be a delightful scene to play go on… i was right!!! [new board]

This is awsome!

[Go_Board]

I honestly had no idea this was even possible! I will have to give it a try at some point because there have been some backgrounds I would have liked implemented into OGS, but it seems like this is a much better alternative for very specific customizations. Thanks @Vsotvep for providing the information that makes this possible, particularly for those of us that aren’t very technical!