Single post in Site Skins: How-To, and Helpful CSS

You can use this: The original sprite is pkmn/h/c/7.png and we're replacing it with /upload/DrWho/fire_red_eevee.png (39px wide, 40px high) Note that you have to set the width and height of the replacement image specifically.

---

/* shelter, fields */ .fieldmon > img[src*='pkmn/h/c/7.png'], .pokemon > img[src*='pkmn/h/c/7.png'] { /*place the original image far away*/ -o-object-position: 9999px; object-position: 9999px; background: url('/upload/DrWho/fire_red_eevee.png') top left no-repeat; /*Width and height of the replacement image*/ width: 39px; height: 40px; } /* platforms, pokedex, party */ div[style*='pkmn/h/c/7.png'] { background-image: url('/upload/DrWho/fire_red_eevee.png') !important; }

---

This is how it works.

Pokedex, platforms, parties

The sprite is the background image of a div, set via inline style. We can identify divs with the Eevee background and set the background-image to the gen 3 sprite. !important is needed to override inline styles. /* platforms, pokedex, party */ div[style*='pkmn/h/c/7.png'] { background-image: url('/upload/DrWho/fire_red_eevee.png') !important; }

Fields, shelter

This bit is tricker because sprites are loaded via img elements, i.e. <img src='/pkmn/eevee.png'/> With CSS you cannot modify the value of src. Neither can you add :before or :after elements to img elements. But there's someting we can do: You can think of img as a wrapper that takes up some space and width. The url it points to in src is the actual graphic. We can apply styles to the wrapper and the graphic separately. For the wrapper, we set the background-image to the new sprite and set the width and height to match it. Now we have two overlapping sprites though, so how do we get rid of the old sprite? Usually, a graphic is positioned at coordinate (0,0) in the wrapper. We move it to (9999px,9999px) through the object-position property so it's still there, just far away and not visible. The result is this part of the code: /* shelter, fields */ .fieldmon > img[src*='pkmn/h/c/7.png'], .pokemon > img[src*='pkmn/h/c/7.png'] { /*place the original image far away*/ -o-object-position: 9999px; object-position: 9999px; background: url('/upload/DrWho/fire_red_eevee.png') top left no-repeat; /*Width and height of the replacement image*/ width: 39px; height: 40px; }