Tag Archives: Ribbon

CustomUI Editor Part II

Add your own icons to your own ribbon

In this post i will show you how easy it is to add your own icons to your own ribbon in Microsoft Office. For this example i will use a Word document but you can just as easy make this in Excel and PowerPoint. In earlier posts i wrote about the custom UI editor. This insanly great tool for creating your own ribbons in Microsoft Applications. So that will be the tool i am using in this post. You can download the custom ui editor tool here.

The example i am creating here is a simple Word document with a custom tab with custom icons.

First make a word document which you want to use for this example. I will call it: Custom Icons. The custom UI editor tool was last updated for 2010 but to show that you can easily use this for 2013 documents i created a 2013 Word document. So the document is created, saved in a location and we are good to go. You can click on the various images to see enlargements!

Open the CustomUI editor

The next step is to open the custom ui editor. Choose open en locate your document to which you want to add a custom ribbon. For my example i created an empty Word document with no fancy stuff attached. A plain word document. Next step is to choose a type of ribbon you want to add. For this example i’ll choose a custom tab.

CUE_I CUE_II

Now with that in place you will see that de custom ui editor has presented you with some sample XML in de code window. This is the code you have to modify later on. We will first add our own icons attached to the document. For that i will add some sample icons i have stored on my pc.

CUE_III CUE_V

these are the icons i have added to my ribbon:

CUE_IV

The first time i added some icons this way i was a little startled because i did not see anything happen. You have to click the plus sign to actually see that the icons are added to the document.

CUE_VI CUE_VII

Ok, we have the document, we have the icons all we need to do now is modify the existing xml which was created when we chose custom tab at the beginning. If you are like me and you don’t want to typ to much you will use copy / paste. There’s nothing wrong with that but remember that all the buttons should have unique id’s in order for the ribbon to be created. So copy paste and rewrite the id’s for every button. Als modify the imageMSO part. imageMSO is an internal reference to existing icons from Microsoft Office. Because we are using our own icons you have to reset this option to image=”iconname here” (where iconname here is the name of your custom icon!).

CUE_VIII

The last step we have to do is to check if our ribbon will actual show up in our document. For the sample i have set two icons to large and three of them to normal. This will give you the next output:

CUE_IX

Yep there it is, my very own tab in my ribbon with my very own icons! Wow how cool is that. All done with the custom ui editor!


Pitfalls
Is there anything else i should know before i start taking these steps or will it always work. The only thing you have to remember is adding icons this way the only restriction you have is the size of the icons. In the sample i created here i added icons which have a size of 48X48 pixels. You will just have to test what the maximum size is for adding it to your tab. My advise? stick to 48 x 48 and smaller. That size fits perfectly!


Happy customizing 🙂