A designer made a design for a portal and in this design a lot of the SharePoint icons had different colors than the orginals.
These icons are located in two sprites: spcommon.png and fgimg.png. I downloaded these sprites and changed the color of the icons which are used in the design.
In my css-file I added the following styles:
img[src*="spcommon.png"]{
background-image:url("/path-to-my-images/spcommon-customer.png");
width:0;
height:0;
padding:134px 135.5px;
}
img[src*="fgimg.png"]{
background-image:url("/path-to-my-images/fgimg-customer.png");
width:0;
height:0;
padding:346.5px 90px;
}
The idea is to hide the image by changing the size to 0x0 pixels. After that you use padding to change the image to its original size. With
background-image you change the image to your own spcommon-customer.png and fgimg-customer.png.
Original idea: Rob Kostermans (http://nl.linkedin.com/in/robkostermans)