Make App Icons that Change with a Composed Look

Animated

Recently a developer friend was wondering why all the built-in App Icons changed colors on his SharePoint 2013 site when he applied a different color scheme using the “Composed Looks” functionality,but Icons for custom apps he had deployed remained their original color.  The screenshot below shows the Site Contents page both before (Left Side) and after a Theme has been applied using a Composed Look (Right Side).  You can see that all the Icons on the page changed except the last one on the right.  This is the App that I installed using the Visual Studio 2012 SharePoint Hosted App project.  So the question is Why do all the other Icons change?

Appssidebyside

The first theory was that the App Icons were being recolored using the Theme CSS support that has been available since SharePoint 2010.  But the ability to recolor an image using CSS has always been limited to background images loaded through CSS.  These Icons are loaded using an <IMG> element so there is no way to specify the image in CSS and no way to recolor it.

After using IE’s Developer toolbar to examine the HTML and CSS on the pages above I found that the image itself doesn’t get recolored. But the <a> (anchor tag) that surrounds the Icon is a square rectangle occupying the space behind each image that has its background set to one of the theme colors.  You can see in the screenshot below that the <a> tag has its background set to a class of “ms-storefront-appiconspan’ which is set to an rgb color from a themable css file.  But why does changing the background behind the Icon change the color of the Icon?

appIconBackground

The trick is that the Icon file itself is a transparent PNG that is the same size, 90 X 90 pixels, as the anchor tag with the background color behind it.  That way the background color shows through the Icon and appears to recolor the icon itself.  So let’s see what happens to my Visual Studio project if I replace the blue in my App Icon with a Transparent background.  the image below shows the original Icon on the left and the new transparent Icon on the right after I cut the background out using Paint.Net.

appIcons

After uploading the new Icon image into my visual Studio project and redeploying the custom app you can see that the custom app Icon changes colors along with the Theme in the screenshot below.  If you restrict your Icon to white images and text on a transparent background then your Icon should look like it fits no matter what Composed Look is applied to your site.

AppAfter

I’m a New SharePoint 2010 MCM

MCM_Logo

Some journeys take a lot longer than you originally expected.  I started my journey in pursuit of a Microsoft Certified Master’s SharePoint certification when I attended rotation 8 in May, 2011.  If you are wondering what it was like I can’t do a better job of describing the experience than was done by my friend, fellow MVP, (and now fellow MCM) Wictor Wilén does here.  Wictor and I were in the same rotation, but where he passed all his qualifications at the end of the rotation, I took an additional two years. After passing everything but the qual lab during the rotation I took a second try at the qual lab about 6 weeks later in July.  I made a silly mistake on that one that cost me about 2 hours of troubleshooting time.  I knew by the end of the lab that I had failed.  After that life just got too busy with billable work, and then a change of employers.  It wasn’t until this spring that I decided I couldn’t give up and had to take my last shot at the qual lab. So I spent five days at the beginning of May reviewing all the old material and on Wednesday May 8th I had my chance.  At the end of 8 1/2 grueling hours I had a good feeling about the results.  On Friday I got confirmation that I had indeed passed.  After starting over 2 years ago I am finally a SharePoint 2010 MCM and it’s a great feeling.

I’ve also want to extend a big Thank You to my former company ShareSquared and to my current company Blue Chip Consulting for giving me time away from billable work to attend the training and prepare for my re-take of the Qual Lab.  Without their support I would never  have made it.

Now on to planning for MCSM SharePoint 2013!

Office Developer Tools for Visual Studio 2012 ships full RTM

visual_studio_logo-new-300x225

If you who have been learning to develop the new SharePoint 2013 Apps then you know that the toolset for doing that in Visual Studio 2012 didn’t ship a finished RTM version when SharePoint 2013 shipped its RTM version in November.  Instead we’ve all still been working on a Preview 2 version.  Well no longer! The final version of Office Developer Tools for Visual Studio shipped today.  You can read more about the announcement here:

http://blogs.msdn.com/b/somasegar/archive/2013/03/04/now-available-office-developer-tools-for-visual-studio-2012.aspx 

And more importantly you can download the new tools via web platform Installer from the following URL:

http://aka.ms/OfficeDevToolsForVS2012

SharePoint 2013 has reached RTM

sp2013

Earlier today Microsoft announced that Office 2013, including SharePoint Server 2013, reached the Release to Manufacturing (RTM) build.  That means that coding and testing is complete and work will now commence on getting these products packaged up and into the appropriate distribution channels for customers.  YOu can read the full announcement here: 

Office Reaches RTM!


But here are some of the high points and important details covered in the announcement.

  • People who purchase Office 2010 after October 19, 2012 will get a free upgrade to Office 2013 when it is released.
  • Surface RT tablets will include a preview version of Office 2013 when they ship on October 26th.
  • Office 365 customers will begin to see some of the new 2013 capabilities with the next service update in November.
  • TechNet and MSDN subscribers should have access to RTM code by mid-November.  Which happens to be just after the SharePoint Conference November 12-15, 2012.