If you have the tutorial.xlsm document from this tutorial, open it in Office Ribbon Editor. You should be presented with a screen such as this.

Double-click on RibbonX12 in the Document Explorer to display the customUI Editor and its content.

There are several ways to add custom images to the document, especially if you are working with Office 2007 and 2010. For the purpose of this tutorial though, we are going to import the image directly through the customUI editor window.

For this tutorial I am using images provided by fatcow.com. It is the iconset Office Ribbon Editor uses for its icons. As a rule of thumb, the large buttons on the ribbon use PNG images that should be 32×32. The small buttons use PNG images that should be 16×16.

We are going to be modifying a 32×32 image.

Click on the Images tab and click on the Add Image(s) toolbar button and select From File System.

I selected the yahoo_messenger.png (32×32) image. The image is now imported into the document and automatically assigned to the current customUI Part.

To simplify things, let’s rename the image to something easier to remember. Right-click on the image select Edit Image ID and rename it to myHappyFace.

Now, select the Code tab on the customUI editor window and modify the XML on line from imageMso=”HappyFace” to image=”myHappyFace”. If you have autocomplete enabled to include customUI images, you will notice the name pop up as you type.

To make sure that our XML is still kosher, click the Validate CustomUI  button on the toolbar. You should receive a message stating the there were no errors found.

Save your changes and open the document in Excel 2007. The custom image has now showing.

Tutorial File:

tutorial. Includes .xlsm and .png file

Tips:

• The Ribbon will display in Office 2010.