(Last updated: March 31, 2021)

Like many Board Game geeks, the COVID-19 pandemic has brought me to appreciate the wonderful Board Game Arena, a website which allows people to play a ton of board games via web browser with friends (or strangers).

One of the features available on BGA is putting in custom CSS which loads on the site, so you can customize the site (or individual games) to your liking. This can obviously also just be accomplished with browser plugins like Stylish, but having custom CSS integrated on the site makes sharing those modifications with non-technical friends super easy.

In general I've not felt the need to alter any CSS on the site, but there's a couple of games that I've tweaked, now, and so I figured I'd put up a page for them. This is that page!

Installation

To use these, head to your BGA account and go to Preferences -> Advanced. There'll be a big ol' textbox there. Just paste in the CSS that you want! After you submit the CSS, you may end up seeing the CSS printed at the very top of the page (above the header) for a bit, but that seems to go away after awhile. BGA has their own documentation about the custom CSS functionality on their wiki as well.

Note that any CSS comments will get stripped out, so don't bother trying to annotate your rules. They'll also strip out a lot of whitespace, so don't bother trying to make it too pretty, either.

Also note that you're not allowed to view or submit bugs on BGA's Bug Tracker if you have any custom CSS active, since they don't want to contend with bugs which stem from having custom CSS. If you do want to report a bug, you'll have to disable all your custom CSS, and make sure that the bug still happens with your changes disabled.

Marrakech

Marrakech (BGG link) is a pretty basic game we mostly use as filler, but I find it enjoyable. My group really dislikes the brown carpet tiles, though, so I made carpet tile replacements based on some Google Image Search results. I'm afraid I didn't make a note of any of the sources for the updated images, but in my defense, they're scaled down super tiny anyway.

The CSS (copy this into the Preferences -> Advanced textbox):

.carpet {
    background-image:url(https://apocalyptech.com/bga/marrakech/marrakech_rugs_real.png);
}

.carpet_info {
    background-image:url(https://apocalyptech.com/bga/marrakech/marrakech_rugs_real_small.png);
}
Screenshot of Changes

Stone Age

Stone Age (BGG link) is a great worker placement game that I've become quite fond of. Its one problem is that the yellow meeples often blend in to the board/card images, to the point where even when you're aware of it, it can be easy to lose track of where they are. This CSS modification turns the yellow meeples white, instead, which makes them far more visible.

The CSS (copy this into the Preferences -> Advanced textbox):

#sta_board .workerplace .worker, .sta_counter .sa_icon, .sta_cube_ffa500 {
    background-image:url(https://apocalyptech.com/bga/stoneage/iconsnew.png);
}
Screenshot of Changes

Notes for Writing Custom CSS

So long as you're already familiar with modifying pages with CSS, there's not much to say here. Mostly I just wanted to mention that there's currently no global way to make sure that your CSS edits apply to only a specific game. See this bug report for instance.

Some games, like Stone Age above, prefix all their CSS IDs and classes with sta_, which is nice, but others (like Marrakech) do not. If some other game on BGA has a carpet or carpet_info CSS class, the custom CSS for Marrakech will start applying to that game as well. So watch out for that! This is one area where a browser plugin like Stylish is a clear winner, since that can apply itself based on URL, but being able to share these CSS tweaks easily still makes up for it, IMO.

Changelog

March 31, 2021
  • Initial post (with Marrakech and Stone Age)