How to use custom disabled icons for command buttons

Challenge:

We wanted to provide our custom disabled icons for command buttons in page editor mode. But our analysis and discussion with Sitecore reveled that it’s currently not possible to modify its current logic to do so. And Sitecore has taken it as a wish!

Before we move on let’s quickly understand how Sitecore serves disabled icons:

1. When we request any page it gets rendered along with ribbon. [Talking about PE mode]

2. Now, if you have provided X.PNG for your command it will set source as X.PNG if your command is not disabled.

3. If it is disabled then it will generate disabled icon, save it under your /temp/ folder a name it as per this format — YOURIMAGENAME_disabledSIZExSIZE.png e.g. X_disabled24x24.png [Just a note : The Sitecore.Resources.ImageBuilder class is responsible for generating an icon src attribute. In its turn ImageBuilder uses Sitecore.Resources.Themes class to transform image (disabled image).]

4. Second time onwards if disabled file found in temp directory then it serves from temp.

A question may arise in your mind that why we would like to use our custom disabled icons when Sitecore generates on the fly. I must say good question. We would like to do it. Because Sitecore generates it on the fly and sometime they are not transparent, gets pixellated and was not looking good in our PE Ribbon. We wanted to provide our custom high-resolution disabled icons.

Solution:

We used 4th point as our solution [4. Second time onwards if disabled file found in temp directory then it serves from temp.]. Before Sitecore generated disabled icon and saves under temp directory. We did that manually by following same file namings.

That’s it!

Happy Sitecoring! 🙂

PS : Special thanks to Yuriy Bogomolov, Ivan Sheyenko, Sergey Kravchenko(Sitecore Support) for providing this suggestion and Devashri who did all this investigation and worked on this challenge!