Css Customization

This feature allows you to customize Board Game Arena with some CSS.

Why this feature?

At first, because this is cool :)

Then, a lot of players told us that BGA should look better, and we constantly tried to make it look much better. But as it is a community-based website, we found out that we should allow YOU to participate. So this is why you can customize BGA appearance and share your customization with others.

How does it work?

From your account preferences, "advanced" tab, you can write some CSS. As soon as you click on "save", it is integrated to BGA CSS for your account.

You should use your browser developer tools (F12 on Chrome and Firefox) to get the ids/classes of the element that you want to change, and try to change them with these tools first. Finally, you can copy/paste your updates on the CSS customization form.

What is CSS ?

Well... if you don't know what CSS is, sorry but you shouldn't try to customize BGA appearance with this tool.

Reset CSS

Just above the CSS customization form, there is a link to reset all your changes and get back to the normal BGA. Please bookmark this link before doing any change to your CSS code. If you break the website by any manner, you'll be able to restore the original BGA instantly.

Modify images

Most of images on BGA are loaded through "background-image" CSS command. This way, you can update it and load any image. You can host image on any server, or on a website like imgur.

Sharing customization

Using the link above the CSS customization form, you can share your customization with anyone.

Please DO NOT send a link that break the website. If we detect some attempt to fool users, we will immediately take action against you.

Troubleshooting

The CSS code I wrote is not taken into account

At first, check the sourcecode of the BGA page. If your CSS code does not appear there, then the most probable reason is that you did a syntax error in your CSS code, so we didn't take a part of your code into account.

If it appears, then it should be an error in one of your declaration (ex: wrong #id).