Replace Background for specific games

[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.

[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.

[Weasy Mac]

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.

[Weasy Mac]

Please someone. Im losing my mind over this haha

[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.

[Weasy Mac]

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!

[xiongmao1298]

:has has to be explicitly enabled in Firefox by going to about:config and searching for "layout.css.has-selector.enabled"