Board backgrounds library

Feijoa · March 24, 2021, 1:15am

It’s a work in progress, but with this custom CSS using Stylish:

/*
Configure in OGS settings:
board: 131 148 150 (base 0)
lines:   0  43  54 (base03)
black stones:   0  43  54 (base03)
white stones: 238 232 213 (base2)
*/

/* base02 */
.players .black.player-container {
    background: #073642 !important;
}

/* base2 */
.players .white.player-container {
    background: #eee8d5 !important;
}

/* default text: base0 */
#main-content div {
    color: #839496 !important;
}

/* default links: blue */
a {
    color: #268bd2 !important;
}

/* navbar links and similar: base1 */
#NavBar a, .Dock a, #NavBar .right .icon-container .fa {
    color: #93a1a1 !important;
}

/* default bg: base03 */
#main-content {
    background-color: #002b36 !important;
}

/* green highlight for your move: base02 */
.GameList .current-users-move {
    background-color: #073642 !important;
}

/* player color: blue */
body .Player {
    color: #268bd2 !important;
}

/* chat log bg: base02 */
.chat-log {
    background-color: #073642 !important;
}

/* button: base02 on base0 */
button {
    color: #002b36 !important;
    background-color: #839496 !important;
    border-color: #073642 !important;
}

/* leave zen mode: base01 */
.leave-zen-mode-button {
    color: #586e75 !important;
}

/* chat presence: base1 / blue */
.ChatPresenceIndicator {
    color: #93a1a1 !important;
    text-shadow: none !important;
}
.ChatPresenceIndicator.online {
    color: #268bd2 !important;
}

/* unread chat: blue */
.ChatIndicator.unread .fa-comment {
    color: #268bd2 !important;
}

/* friend indicator: green */
.FriendIndicator.online .fa-users {
    color: #859900 !important;
}

/* turn indicator: base02 on base0  */
#NavBar .turn-indicator .count {
    color: #002b36 !important;
    background-color: #839496 !important;
}

/* shade OGS logo */
.ogs-nav-logo {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 425.625 144.375' width='454' height='154'%3E%3Cg fill='%2393a1a1'%3E%3Cpath d='M236.509 1.153c28.915 0 47.145 13.8 57.831 30.073l-24.725 13.183c-6.496-9.681-18.439-17.302-33.106-17.302-25.354 0-43.793 19.156-43.793 45.109 0 25.953 18.439 45.109 43.793 45.109 12.781 0 24.097-5.149 30.173-10.505V90.135h-37.297V65.007h66.632v52.524c-14.249 15.654-34.154 25.953-59.508 25.953-40.859 0-74.385-28.013-74.385-71.269 0-43.461 33.526-71.062 74.385-71.062zM326.392 99.199c9.849 10.093 25.145 18.538 44.421 18.538 16.344 0 24.307-7.621 24.307-15.448 0-10.299-12.153-13.801-28.287-17.509-22.84-5.149-52.174-11.329-52.174-42.02 0-22.863 20.115-41.401 53.012-41.401 22.211 0 40.649 6.591 54.479 19.156l-16.554 21.422C394.281 31.638 379.195 26.9 365.575 26.9c-13.41 0-20.534 5.768-20.534 14.007 0 9.269 11.734 12.153 27.868 15.86 23.049 5.149 52.384 11.947 52.384 42.432 0 25.129-18.229 44.079-55.946 44.079-26.82 0-46.097-8.857-59.088-21.834z'/%3E%3C/g%3E%3Cpath d='M144.33 72.21c0 39.855-32.31 72.165-72.165 72.165C32.31 144.375 0 112.065 0 72.21h144.33z' fill='%23073642'/%3E%3Cpath d='M72.165.045c39.855 0 72.165 32.31 72.165 72.165H0C0 32.355 32.31.045 72.165.045z' fill='%2393a1a1'/%3E%3Cpath d='M9.827 64.743s-.073-.322-.144-.925c-.061-.601-.179-1.497-.206-2.624-.076-2.257.037-5.492.733-9.296.334-1.906.836-3.942 1.473-6.075.675-2.116 1.457-4.344 2.491-6.559a51.579 51.579 0 013.589-6.657c1.385-2.187 2.932-4.337 4.674-6.337.839-1.024 1.791-1.96 2.703-2.916.936-.936 1.93-1.811 2.903-2.683 2.018-1.676 4.112-3.195 6.251-4.477 2.132-1.294 4.307-2.341 6.404-3.204 1.072-.39 2.095-.789 3.103-1.123 1.033-.28 2.016-.563 2.967-.799a42.764 42.764 0 015.262-.868c1.591-.099 2.944-.215 4.086-.155 1.135.035 2.029.137 2.628.176.602.053.923.102.923.102s-.273.193-.785.516c-.515.309-1.255.807-2.199 1.345-.944.543-2.042 1.304-3.307 2.052-.636.367-1.278.832-1.961 1.281-.673.473-1.42.86-2.125 1.413-.719.52-1.475 1.027-2.243 1.563l-2.31 1.737a103.765 103.765 0 00-4.738 3.89c-.8.683-1.565 1.439-2.373 2.148-.787.738-1.537 1.537-2.337 2.283l-2.29 2.4c-.722.85-1.524 1.625-2.222 2.505a69.037 69.037 0 00-2.155 2.579 87.914 87.914 0 00-2.082 2.63l-1.987 2.666c-.616.912-1.274 1.784-1.878 2.679-1.234 1.771-2.376 3.54-3.476 5.231-1.075 1.704-2.114 3.332-3.037 4.873-1.88 3.066-3.431 5.724-4.55 7.614a3466.645 3466.645 0 00-1.785 3.015z' fill='%23eee8d5'/%3E%3Cg%3E%3Cpath d='M84.164 131.848l2.84-2.055c1.779-1.289 4.282-3.079 7.162-5.233 1.449-1.06 2.975-2.245 4.572-3.473 1.583-1.252 3.239-2.551 4.889-3.943.835-.684 1.643-1.419 2.494-2.117l2.472-2.224a89.632 89.632 0 002.427-2.316 69.185 69.185 0 002.37-2.384c.812-.776 1.51-1.647 2.29-2.444l2.179-2.501c.669-.866 1.396-1.687 2.058-2.538.632-.87 1.314-1.701 1.921-2.561 1.234-1.71 2.38-3.413 3.437-5.077l1.516-2.46c.463-.814.898-1.613 1.35-2.377.486-.753.802-1.532 1.211-2.246.384-.722.787-1.404 1.094-2.071.629-1.329 1.285-2.492 1.739-3.482.449-.99.876-1.772 1.136-2.314.274-.54.441-.829.441-.829s.079.316.187.91c.095.593.279 1.473.418 2.601.165 1.131.175 2.49.223 4.083a42.778 42.778 0 01-.379 5.32c-.148.969-.339 1.974-.522 3.029-.24 1.034-.543 2.09-.832 3.193-.667 2.168-1.508 4.43-2.601 6.672-1.08 2.248-2.399 4.474-3.882 6.638-.779 1.05-1.559 2.12-2.404 3.138-.868.995-1.712 2.03-2.654 2.96-1.832 1.919-3.829 3.658-5.88 5.238a51.679 51.679 0 01-6.298 4.187c-2.11 1.234-4.257 2.218-6.301 3.085-2.066.831-4.047 1.518-5.914 2.026-3.724 1.043-6.935 1.454-9.189 1.587-1.126.077-2.028.042-2.632.037a10.034 10.034 0 01-.938-.059z' fill='%23002b36'/%3E%3C/g%3E%3C/svg%3E") !important;
}

Update: maybe I’m getting carried away here, but:

dragon-devourer · March 24, 2021, 7:49am

Not possible! Keep it coming dude

bugcat · March 25, 2021, 12:11pm

Combining the Solarized green and white (darker shade) on the soft grey board makes all my thumbnails look like RPG pixel art of lichen-covered dungeons.

… It’s great.

Lys · March 25, 2021, 12:13pm

Pics!!!

bugcat · March 25, 2021, 12:44pm

One of my recent games.

When I want to focus on the individual groups rather than appreciate the whole-board effect, the colour contrast starts to look insufficient. I might play around with it a bit more.

It’s more in its element in the endgame:

Lys · March 25, 2021, 12:51pm

I actually wanted to see a profile page looking like a dungeon

bugcat · March 27, 2021, 8:45pm

After using that scheme for a while, I’ve found that the white is a little too bright for my taste.

Solarized calls for a luminosity of 212, but I’m currently trying it on 185, which looks like this:

I call it the “pistacchio theme” ^^

Actually, I’m leaning towards an even darker version, with a luminosity of 180.

I’m also considering going as dark as 175. At the moment I’m feeling the colours out. I think my ideal luminosity is going to be in this 175–185 range.

dragon-devourer · March 28, 2021, 11:01pm

Great name! But I can’t see any difference between the colours on those images

Paige · March 28, 2021, 11:12pm

I actually didn’t know we could add custom board backgrounds as an artist this inspires me.

mark5000 · March 28, 2021, 11:35pm

Board: #001334
Lines: #467793
Black: #0D4D6F
White: #FAFFFF

Colors from https://www.youtube.com/watch?v=vFr3K2DORc8

Black: 51518A (courtesy of @bugcat)

bugcat · March 29, 2021, 6:34am

Those stones are a bit too blue for me.

How do they look with the DeepMind indigo?

Indigo, 51518A
R81 G81 B138

dragon-devourer · March 30, 2021, 9:22am

This is my favourite one. Once applied, cannot go back to regular board.

How did you apply the tree image to wood texture? What’s the source for the wood texture? I’m interested to try just the wood texture on its own.

ronin3 · March 30, 2021, 11:06am

With 92 posts, the page is already very slow to load
Am thinking to start a parallel thread, for links only… and a textual description of what will be there.

Anyhow, I would like to contribute two blue backgrounds:
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcDhVkIS4P_b16xuQgry2VGLUZChBx2cKXEkRpYfMepNyMG7uKvO3yXX3gCCVozwtWrPY&usqp=CAU#
sky1

and

https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFQk_S8ASSthZHTMpviYFQKS5AzXTjrrHf2MyQ4Bs4xDEYDUdW6tQefYrSrQLWl0NNZIQ&usqp=CAU

sky2
(hope those links work)

Edit: and a green background
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQO3huZx9ZGsNWYVU942jAvOeJZhWSHuJhENDXjlzogfWI2g8Xfw5MQMTW0hKD4cZPSNRY&usqp=CAU
green

g-g-g-g-g-g-Go · May 2, 2021, 10:46am

I was using the GIMP, but I imagine other graphics applications are similar.
I made the image a separate layer and then adjusted the transparency (opacity 70%).
But first I increased the contrast by going to Colo[u]rs | Levels and using the dropper to pick the lightest and darkest parts of the image.

The Oak was from a site selling flooring. The original image was smaller so I rotated, reflected and tiled to make it bigger. Here it is:

https://ogs-forums.s3.dualstack.us-east-1.amazonaws.com/original/3X/1/2/12ab7e015edf0b4c616a1b84d578aa7d7ad3597c.jpeg
I think that’s the one. If not, I used the bamboo one that I uploaded earlier in this thread.
If you need the image to be smaller (it’s 2036), I would recommend cropping, rather than resizing, to maintain the detail. You may wish to play with saturation and colour levels (or not).

torusle · May 6, 2021, 6:43pm

I tried a lot of the backgrounds presented here, but this one is just perfect for my needs. Looks like real wood but is not distracting in any way.

MrEntropy · May 10, 2021, 10:05pm

https://ogs-forums.s3.dualstack.us-east-1.amazonaws.com/original/3X/0/3/03fec2fdeca3798fa83306826b697c77f97a4120.jpeg

dragon-devourer · July 4, 2021, 10:24am

As previously noted, this is my favourite:

Also as previously noted, I was interested in using this without the trees as the bare wood has such a nice grain, colour, lighting, etc. So thank you to @g-g-g-g-g-g-Go for uploading the original

I have cropped it to select the lower left quadrant to remove the unnatural reflection and to get the benefit of the light centre at the top right so it looks like room lighting:

https://ogs-forums.s3.dualstack.us-east-1.amazonaws.com/original/3X/6/2/62a860ea8851a3032cf4c318cd48ff3440b5ef37.jpeg

Then I have played with the saturation, contrast, sharpness, etc to get something that I find very appealing:

https://ogs-forums.s3.dualstack.us-east-1.amazonaws.com/original/3X/7/0/70c83b5f1e0dc95be4386ed8c72b69a0bdc64607.jpeg

Enjoy!

g-g-g-g-g-g-Go · July 13, 2021, 3:55pm

UK vaccination rates 13th July 2021

Dark Blue - Doubled vaxxed
Light Blue - Just the one

Looking forwards to freedom Monday!

https://ogs-forums.s3.dualstack.us-east-1.amazonaws.com/original/3X/0/4/04225dde2951696cf72e25a044ad21c06def07c6.gif

g-g-g-g-g-g-Go · July 13, 2021, 4:25pm

It’s not a good look
Bad

shinuito · July 13, 2021, 4:35pm

And you need to make the line color match the background color.