The following is a breakdown of the rectangle coordinates for each sprite found in SharePoint 2013’s spcommon.png sprite. This sprite is found in the hive, or can be loaded in a browser on any SharePoint 2013 site at /_layouts/15/images/spcommon.png?rev=23.
Learn how to replace the sprite using a Composed Look.
Properties:
method: Filling, Tinting, Blending
detach: true – creates a new image for this particular request
hashOverride: “your hash2 value” – no spaces allowed, appears to only work for other images, not for spcommon
method: Filling, Tinting, Blending
detach: true – creates a new image for this particular request
hashOverride: “your hash2 value” – no spaces allowed, appears to only work for other images, not for spcommon
Slightly OT, but I have a case where in converting to SP2013 from SP2010, the entire spcommon.png sprite is shown in the UI for a library. Any idea why this might occur? Thanks!
Normally this is caused by a responsive framework that resets all images to max-width: 100%. inspect the HTML element that is holding the sprint on the page and you will likely find custom css that is messing with that SP is expecting.
Hello Eric! My concern is also a bit different but similar to your article. When sharing a page that does not consist an image via social media, it shows by default spcommon.png as the page image. How can I change this?
Thanks in advance!
Hi,
Yeah, that one is real annoying isn’t it? I have seen this before as the social media site picks up the first image it can find, often the sprite. If you offer a “share” tool on your site, you can normally specify an image you want to use for that particular page when it is shared.
The other option is to add open graph tags to your page. My suggest would be to add these to your page layouts in the additional page head content block so that each page layout could reference a specific image to provide as the thumbnail image.
I suggest a few of the following resources:
Thanks for your advice! We added to our master page property=”og:image” and that was it. It works just as we wanted.
If there is an image on the page content area, it shows it as a first option, otherwise if not, it shows the image defined in the og:image property.
Hi Eric. My requirement is bit different but similar to your article. I am using a document library in a page viewer wp. And site’s color combination is red and gray. in document library we get + with circle in blue color. I want to make this + with circle in Red color. So how can i do this? As this is spcommon.png. so can i add my custom image inside this? Please let me know.
If you are willing to have the plus and the circle both in red, you can use the technique provided. If the plus should stay the same and just recolor the circle, you could try creating two color boxes, first recolor the entire circle and plus red. Then recolor a much smaller box that just contains the plus back to blue. This might work.
If on the other hand you want a custom icon, unfortunately you will need to create your own sprite if you want to change actual icons. You would also then need to provide updated css to point the particular control in the DOM to use your new sprite.
We have a requirement to have the dropdown icon in list view webpart from black to white as the background color is white.
I came across this article http://www.mavention.com/blog/use-your-own-sharepoint-icons-neat-easy-way
I found this approach suitable, where by I can have a seperate SPCommon.png and use it in custom css, do you think, it is recomended?
That is a great idea and may be easier for many designers. I cannot say it is recommended though, as far as I have ever been told from the SharePoint product group, the recommended method of changing the OOTB sprite icons is with composed looks. That being said, I do not see much harm the method you reference. Watch your service packs and patches, but that is usual.
Dude! I wish I had this two years ago… Thanks for putting it together! Now just do it for all the other sprite images 😉 JK…
Thanks. Yeah, we had to change enough icons for a client once so I decided it was time for a master list. The rectangles can be slightly modified to match your specific needs, but they worked for me. Someday I might address the other sprites. We’ll see.