Recolor sprites

rbrahmson

I'm running Vanilla 2.1.11 with the VBS3 theme which has a horizontal navigation bar in a dark blue (which I'd like to keep as it matches other elements in the theme). I enabled the Sprites plugin which add sprites in various places and changes the default ones on the theme from white to black. Black is barely visible on the nav bar, so I'd like ot know if there is a that changes the color of sprites.

When I looked at the plugin's CSS I see a reference to a url pointing to a png file that has all the sprites, not surprisingly in black.

(1) Is there a CSS attribute to display sprites a different colors than the original png file has?
(2) If not, can anyone suggest a free windows based utility that would allow me to change the sprites colors of that png?

Bleistivt

^ See the attached image.

hgtonight

@rbrahmson said:

The idea is you can change the spritesheet as you see fit. Vanilla also provides a white version (https://images.v-cdn.net/sprites-14-fff.png).

EDIT:

@rbrahmson said:
But does that mean that there is no CSS attribute that can override the sprite color (wherever it is hosted)?

CSS can't really override colors. There are some image filters you can apply, but it seems easier to edit the spritesheet.

Bleistivt

I put it in a quote so you can see it:

https://us.v-cdn.net/5018160/uploads/editor/8m/w5nuitjsnx2o.png

No it can't be done with css. Pretty much every image editing program lets you invert color, which is what I did.

x00

css would be used to over style to use your own image you host.

gimp you can use to save your own sprites.png

personally I'm not a huge fan of the vanilla cdn being used for sprites on the non hosted version, but whatevs

Bleistivt

^ See the attached image.

rbrahmson

Sorry @Bleistivt, I don't see an attached image to your response...

And thanks @x00 - If I understand you correctly on this TGIF you advise to host my own png and use gimp to edit it, and that I should use css to override the url that points to the hosted version.

But does that mean that there is no CSS attribute that can override the sprite color (wherever it is hosted)?

hgtonight

@rbrahmson said:

The idea is you can change the spritesheet as you see fit. Vanilla also provides a white version (https://images.v-cdn.net/sprites-14-fff.png).

EDIT:

@rbrahmson said:
But does that mean that there is no CSS attribute that can override the sprite color (wherever it is hosted)?

CSS can't really override colors. There are some image filters you can apply, but it seems easier to edit the spritesheet.

rbrahmson

Oh, @Bleistivt, now I get it - I don't see it because it is white! Very sneaky;-)))

I am thankful for both @Bleistivt and @x00 and use the combined advice - use the white sprites and host it on my site.

Bleistivt

I put it in a quote so you can see it:

https://us.v-cdn.net/5018160/uploads/editor/8m/w5nuitjsnx2o.png

No it can't be done with css. Pretty much every image editing program lets you invert color, which is what I did.