Follow Us:
This post is going to look at updating the out-of-the-box SharePoint 2013 icons. This comes in to play if you are creating a branded site.
I implemented a fully custom branded SharePoint 2013 project for a client recently. I was really happy with how it turned out until I went to any page with a standard SharePoint icon:
While it is minor to have some blue icons spattered around your site, I am a bit of a perfectionist and didn’t want that to stand out like that. So, I thought about recreating the images in Photoshop, but I quickly realized that was going to be way more work than I wanted to do. Next, I looked to see if I could do it with some CSS, since most of these icons are generated via sprites:
I could have swapped out quite a few of the images that were incorrect in my design by overriding some of the CSS to use a different image section of the sprite, but that wasn’t going to get me there either due to the “add an app” image not having any other choices, and definitely not one that matched my maroon design.
I realized that other themes had images that matched that theme, not just the standard blue, so I hunted down the sprite for a themed site:
Ok, so now we are on to something, but when you look at the URL for that image, you see /_catalogs/theme/Themed/FE756639/spcommon-B35BB0A9.themedpng. This led me to think that SharePoint is dynamically generating these sprites based on the theme and if I generated my own theme, I could get images with whatever color I wanted. So, using the SharePoint Color Palette Tool, I generated my own theme and the resulting sprite looks much more in touch with my overall design:
All you do is get your colors set the way you want using the color pallet tool, save the results and import the .spcolor file into the Themes library on your site. I would recommend importing this into the root site, that way you can use it on all your sub sites by just setting the inheritance.
So, now my site looks much more consistent.
For more information on C5 Insight or this blog entry, please Contact Us.
Wouldn't it be the .spcolor file you are concerned with, and not the .spfont file? Also, are you just using themes then to brand your site, or do you use it in-conjunction with a custom master page and CSS?
Kevin, Yes I believe that was a typo, the Color Pallette tool spits out a .spcolor file (theme file) that you import. I have updated blog to reflect this to avoid confusion. Thanks! Doug
One thing I struggle to do is put alt tags to those images. From what I can make out it drags the images from one big image and I am never sure how to put alternative text on them. any ideas?
The complementary paper includes over 12 years of research, recent survey results, and CRM turnaround success stories.
Request Download
This 60-second assessment is designed to evaluate your organization's collaboration readiness.
Learn how you rank compared to organizations typically in years 1 to 5 of implementation - and which areas to focus on to improve.
This is a sandbox solution which can be activated per site collection to allow you to easily collect feedback from users into a custom Feedback list.
Whether you are upgrading to SharePoint Online, 2010, 2013 or the latest 2016, this checklist contains everything you need to know for a successful transition.