Possible to redesign cards with css?

[Tafffy]

Not a huge fan of the card design in 6 nimmt, would like something simpler for just myself. Is it possible to add my own images for each card with css or am I insane?

[Paul_Chelsfield]

Technically yes, you can override images loaded via CSS, in fact for 6 Nimmt it's as easy as downloading the cards image https://x.boardgamearena.net/data/theme ... /cards.jpg and using it to make your replacement (cards must be the same size / position) and then adding some custom CSS to load the new image (after hosting it somewhere like GitHub):

Code: Select all

#player_hand > div {
    background-image: url('https://your.new.image.here') !important;
}

However, there's a bit of a snag... You can't target ONLY 6 Nimmt because there doesn't seem to be a unique identifier per game in the HTML to allow this. So this CSS would load in EVERY game.

If you really wanted to do this, you'd have to load it back in using a browser extension (anything that allows you to mess with the styles would do).

[pjt33]

Code: Select all

#player_hand > div {
    background-image: url('https://your.new.image.here') !important;
}

However, there's a bit of a snag... You can't target ONLY 6 Nimmt because there doesn't seem to be a unique identifier per game in the HTML to allow this. So this CSS would load in EVERY game.

It's also necessary to target the cards on the table. Something like

Code: Select all

#player_hand .stockitem, .card_content { ... }

A paranoid approach would be to target

Code: Select all

#player_hand_item_1, #player_hand_item_2, ..., #player_hand_item_104,
#card_1, #card_2, ..., #card_104 { ... }

There is a feature request to add a high-level CSS ID to allow more precise targetting. The more people who vote for it, the more likely it is to be implemented. https://boardgamearena.com/bug?id=13845

[Paul_Chelsfield]

I've voted for the issue now... It's something absolutely trivial (code wise), but it would allow the community to make the tweaks that it clearly wants to!

[pjt33]

Tafffy, I don't know whether you also voted for the bug. Those who did got a notification today that it's been fixed, so you can now target your custom CSS by prefixing

Code: Select all

.bgagame-sechsnimmt

to the selectors.

[Tafffy]

Yep, voted for it and am happy to see it has been approved. Up until now I've just been using my custom design for cards on the table (it's worked very well) and keeping the old design for my hand. This hasn't caused any issues with other games.