How to edit an existing CSS spritesheet

Hi all,

does anyone know how one can edit an existing CSS spritesheet?

Some plugins use spritesheets but what if I want to resize an icon or edit it in some other way? I can create a new spritesheet but how to access the individual images in the first place?

Thank you!


If the image you are changing is the same size as the one in the sprite then just load the sprite it in your paint package and erase the pertinent part of the sprite and apply your own image at the same co-ordinates.

If you are changing the size of the image you are adding to the sprite then it will depend on a number of factors. Some sprites are made with no space between them so adding a larger image is not possible without moving all the others (that’s why I always creates sprites with some space around them so that they can be changed and to stop artifacts showing when zoomed). In this case you can just add your new image to the end of the sprite (increase the canvas size) and then point the css to the new co-ordinates and size of this new addition.

If you have multiple changes then probably best to start again with your own sprite.

The easiest way is as mentioned and just make your new image fit in the space of the old one.:slight_smile:

Thanks for your help, PaulOB. I’ll see if this works.