Tag Archives: Ribbon Icons

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 πŸ™‚

Advertisements

Office 2010 Icons Gallery – Icons for your Ribbon

When you create your own ribbons in one of the Office applications such as Word, Excel or PowerPoint you will probably want those nice looking icons in your own ribbon as well. Isn’t there some kind of list available where one can find these icons? Of course there is. and you can find it here

How it works

Once you have downloaded the file, it is actually a Microsoft Word file, open it in Word. You will see this line in the document:

This line states that the actual overview of the icons can be found under the tab File in Word. Be patient though it might take a second or so to load the pictures… When done you will see the following situation:

Β On the bottom of the Backstage you will find to menu options imageMSO 0 and imageMSO 1. Klik one of the options to see the icons on the right side of the screen.

Now what you need to do to implement the icons into your ribbon is to look for the description under the icon. This is the description you should typ in your .xml code attached to your document. When you open your doccument you will see that icon appear in your ribbon. How cool is that! All you have to do is pick the one you like and typ its description.

Example:
Let me show you a small section of the xml to show you what i am talking about. Look at the image below. Just after imageMso you typ the title of the description you have found in your word document. Now let’s see if you get it. How will your ribbon look after you have used this piece of xml as seen below?

Happy iconing πŸ™‚ and let me know if it worked!