Page 1 of 1
Replace Background for specific games
Posted: 17 November 2023, 22:20
by Weasy Mac
Hi, I want to change the background picture of specific games with some custom CSS. I know how to replace it for the whole website but how do you apply it for only one specific game.
I found in the browsers dev tools that BGA has some special rules that are crossed out and the main background is, in this case, replaced by the Splendor one (see picture).
https://i.imgur.com/0YSFeSH.png
Simply copying the rules in the BGA custom CSS box doesn't work.
Anyone know how to do this? Thanks.
Re: Replace Background for specific games
Posted: 17 November 2023, 23:26
by vurtan
Hi,
add the css content in the css-file of your project to change the background-image.
I just tried on one of my games and it worked with that example:
Code: Select all
html {
background-image: url(img/LR_Rift_Cards.png);
}
The css-files are loaeded in sequence and will overwrite settings from previous loaded once. In your image the common.css is on the bottom and loaded first. At second gameserver.css was loaded and settings from common.css are overwritten. At last that settings are replaced with splendor.css.
Re: Replace Background for specific games
Posted: 17 November 2023, 23:32
by Weasy Mac
vurtan wrote: ↑17 November 2023, 23:26
Hi,
add the css content in the css-file of your project to change the background-image.
I just tried on one of my games and it worked with that example:
Code: Select all
html {
background-image: url(img/LR_Rift_Cards.png);
}
The css-files are loaeded in sequence and will overwrite settings from previous loaded once. In your image the common.css is on the bottom and loaded first. At second gameserver.css was loaded and settings from common.css are overwritten. At last that settings are replaced with splendor.css.
Yes that replaces the background on the main page and every other game as well. I want it to apply to only 1 game specifically.
Re: Replace Background for specific games
Posted: 18 November 2023, 14:28
by Weasy Mac
Please someone. Im losing my mind over this haha
Re: Replace Background for specific games
Posted: 18 November 2023, 15:28
by Jonathan2004
Hello,
If you are not a BGA game deveoper, I think you confused other devs by posting here, because your are not going to add css to
your game.
If you are (as I think) only a BGA player wanting to modify the custom advanced CSS (in player prefs), the lowest DOM element specifying the game is "leftright_page_wrapper" with the class "bgagame-XXXX" ("bgagame-splendor" for Splendor in your example)
Example to override background for Splendor : (only if your browser is
modern enough ...)
Code: Select all
html:has(.bgagame-splendor) {
background-image:url('https://x.boardgamearena.net/data/themereleases/231110-1000/img/layout/back-main_games.jpg');
}
PS: you may also have some ideas while looking at this unofficial dark theme :
https://github.com/bastien09/bga-dark-t ... /style.css.
Re: Replace Background for specific games
Posted: 18 November 2023, 16:27
by Weasy Mac
Jonathan2004 wrote: ↑18 November 2023, 15:28
Hello,
If you are not a BGA game deveoper, I think you confused other devs by posting here, because your are not going to add css to
your game.
If you are (as I think) only a BGA player wanting to modify the custom advanced CSS (in player prefs), the lowest DOM element specifying the game is "leftright_page_wrapper" with the class "bgagame-XXXX" ("bgagame-splendor" for Splendor in your example)
Example to override background for Splendor : (only if your browser is
modern enough ...)
Code: Select all
html:has(.bgagame-splendor) {
background-image:url('https://x.boardgamearena.net/data/themereleases/231110-1000/img/layout/back-main_games.jpg');
}
PS: you may also have some ideas while looking at this unofficial dark theme :
https://github.com/bastien09/bga-dark-t ... /style.css.
Omg I think I figured it out. I was testing it in chrome and it works somehow. Unbelievable that firefox doesn't support this...
I want to make redesigns of games and share them with everyone. I guess FF users wont get custom backgrounds haha
But thanks dude, I was wasting hours on this!
Re: Replace Background for specific games
Posted: 18 November 2023, 17:26
by xiongmao1298
:has has to be explicitly enabled in Firefox by going to about:config and searching for "layout.css.has-selector.enabled"
