https://en.doc.boardgamearena.com/api.php?action=feedcontributions&feedformat=atom&user=FireFairy42Board Game Arena - User contributions [en]2026-09-25T14:49:58ZUser contributionsMediaWiki 1.39.0https://en.doc.boardgamearena.com/index.php?title=Css_Customization&diff=24541Css Customization2025-04-02T03:53:11Z<p>FireFairy42: </p>
<hr />
<div># '''[[This]]''' '''feature allows you to customize Board Game Arena with some CSS.'''<br />
<br />
= '''Why this feature?''' =<br />
<br />
'''Firstly, because this is cool :)'''<br />
<br />
'''Then, a lot of players told us that BGA should look bet'''ter, 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.<br />
<br />
= How does it work? =<br />
<br />
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.<br />
<br />
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.<br />
<br />
= What is CSS ? =<br />
<br />
Well... if you don't know what CSS is, sorry but you shouldn't try to customize BGA appearance with this tool. You can learn CSS (Cascading Style Sheets) on coding sites such as codecademy and free codecamp.<br />
<br />
= Reset CSS =<br />
<br />
Just above the CSS customization form, there is a link to reset all your changes and get back to the normal BGA. Please '''[http://boardgamearena.com/?use_custom_style=0 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.<br />
<br />
= Modify images =<br />
<br />
Most of the 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 [http://imgur.com/ imgur].<br />
<br />
= Sharing customization (currently disabled) =<br />
<br />
Using the link above the CSS customization form, you can share your customization with anyone.<br />
<br />
Please DO NOT send a link that breaks the website. If we detect some attempt to fool users, we will immediately take action against you.<br />
<br />
= Troubleshooting =<br />
<br />
== The CSS code I wrote is not taken into account ==<br />
<br />
Firstly, 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.<br />
<br />
If it appears, then it should be an error in one of your declaration (ex: wrong #id).</div>FireFairy42