This is a documentation for Board Game Arena: play board games online !
Css Customization: Difference between revisions
No edit summary |
m (typos) |
||
| (9 intermediate revisions by 7 users not shown) | |||
| Line 4: | Line 4: | ||
= Why this feature? = | = Why this feature? = | ||
Firstly, 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. | 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? = | |||
= How it | |||
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. | 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 ? = | = 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. | 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. | ||
= Reset CSS = | = 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. | 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. | ||
= Modify images = | = 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 [http://imgur.com/ imgur]. | 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]. | ||
= Sharing customization = | = Sharing customization (currently disabled) = | ||
Using the link above the CSS customization form, you can share your customization with anyone. | Using the link above the CSS customization form, you can share your customization with anyone. | ||
Please DO NOT send a link that | 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. | ||
= Troubleshooting = | = Troubleshooting = | ||
| Line 37: | Line 36: | ||
== The CSS code I wrote is not taken into account == | == The CSS code I wrote is not taken into account == | ||
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. | |||
If it appears, then it should be an error in one of your declaration (ex: wrong #id). | If it appears, then it should be an error in one of your declaration (ex: wrong #id). | ||
Latest revision as of 18:43, 23 October 2024
This feature allows you to customize Board Game Arena with some CSS.
Why this feature?
Firstly, 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. You can learn CSS (Cascading Style Sheets) on coding sites such as codecademy and free codecamp.
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 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 imgur.
Sharing customization (currently disabled)
Using the link above the CSS customization form, you can share your customization with anyone.
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.
Troubleshooting
The CSS code I wrote is not taken into account
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.
If it appears, then it should be an error in one of your declaration (ex: wrong #id).