Page 1 of 1

Differentiating between habitat and species diversity icons on conservation project cards: a hack/workaround/solution

Posted: 16 March 2025, 19:23
by Impeccable Nonsense
If you are like me--you are getting old, and your eyes don't work like they used to, and you just can't tell the difference between the habitat and species diversity icons on a small or even modest screen--or if you are just frustrated in general that they are practically indistinguishable from one another without zooming in, or if you just hate change, then I have a solution for you that restores the habitat diversity icon from before the Marine World update. (If you are none of those things, then move along, there is nothing to see here.)

This requires the excellent BGA Extension, because it's silly to write a whole extension just for this. Just add this CSS to the "Custom CSS" window in the extension's options:

Code: Select all

.arknova-icon.icon-all-continents {
    background: url(https://x.boardgamearena.net/data/themereleases/current/games/arknova/240410-1532/img/icons.png) !important;
    background-position-x: 68.3% !important;
    background-position-y: 54.5% !important;
    background-size: 1388% !important;
}

.ark-card.zoo-card.project-card .ark-card-wrapper .ark-card-bottom .project-card-slots-container .project-card-slot .project-card-slot-cube-holder[data-type=all-continents] {
    background-color: #528b43 !important;
    background-image: url(https://x.boardgamearena.net/data/themereleases/current/games/arknova/240410-1532/img/icons.png) !important;
    background-position-x: 67.7% !important;
    background-position-y: 55% !important;
    background-size: 1800% !important;
}

.icon-container .icon-all-continents {
    height: 1.4em !important;
}
Obviously, this only works for people on desktop platforms which support extensions. Sorry, phone users!

Some screenshots:

Image
Image
Image

Where to put the CSS:

Image

Re: Differentiating between habitat and species diversity icons on conservation project cards: a hack/workaround/solutio

Posted: 26 March 2025, 14:26
by Impeccable Nonsense
I made some small changes to the CSS that fix a minor visual image (Africa getting cutoff slightly at the bottom) and make the card look a bit closer to the original asset. Images and CSS updated in post 0.

Re: Differentiating between habitat and species diversity icons on conservation project cards: a hack/workaround/solutio

Posted: 10 December 2025, 19:12
by Impeccable Nonsense
I am always looking for ways to make this better/stronger/faster/more absorbent.

Here's CSS that restores the original species diversity icon as well:

Code: Select all


.arknova-icon.icon-all-continents {
    background: url(https://x.boardgamearena.net/data/themereleases/current/games/arknova/240410-1532/img/icons.png) !important;
    background-position-x: 68.3% !important;
    background-position-y: 54.5% !important;
    background-size: 1388% !important;
}

.ark-card.zoo-card.project-card .ark-card-wrapper .ark-card-bottom .project-card-slots-container .project-card-slot .project-card-slot-cube-holder[data-type=all-continents] {
    background-color: #528b43 !important;
    background-image: url(https://x.boardgamearena.net/data/themereleases/current/games/arknova/240410-1532/img/icons.png) !important;
    background-position-x: 68% !important;
    background-position-y: 55% !important;
    background-size: 1500% !important;
}

.icon-container .icon-all-animals, .icon-container .icon-all-continents {
    height: 1.6em !important;
    width: 1.6em !important;
}
.arknova-icon.icon-all-animals {
    background: url(https://x.boardgamearena.net/data/themereleases/current/games/arknova/240410-1532/img/icons.png) !important;
    background-position-x: 74.2% !important;
    background-position-y: 1% !important;
    background-size: 1400% !important;
    -webkit-filter: drop-shadow(1px 1px 0 white)
                    drop-shadow(-1px 1px 0 white)
                    drop-shadow(1px -1px 0 white)
                    drop-shadow(-1px -1px 0 white);
    filter: drop-shadow(1px 1px 0 white)
            drop-shadow(-1px 1px 0 white)
            drop-shadow(1px -1px 0 white)
            drop-shadow(-1px -1px 0 white);
}

.ark-card.zoo-card.project-card .ark-card-wrapper .ark-card-bottom .project-card-slots-container .project-card-slot .project-card-slot-cube-holder[data-type=all-animals] {
    background-color: #528b43 !important;
    background-image: url(https://x.boardgamearena.net/data/themereleases/current/games/arknova/240410-1532/img/icons.png) !important;
    background-position-x: 74.2% !important;
    background-position-y: 1.4% !important;
    background-size: 1450% !important;
}

Re: Differentiating between habitat and species diversity icons on conservation project cards: a hack/workaround/solutio

Posted: 11 December 2025, 09:25
by DaemonCleaner
Thank you! I'm not that old (he tells himself), and I despise those icons. I play mostly on my tablet and always have to hover over them to be certain.