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

4 thoughts on “CustomUI Editor Part II

  1. Madhes

    Thanks for the detailed article. It helps for sure.
    But, I see two issues:
    1. Would like to make the custom made ribbon (with custom icons) to all documents, not only to this particular document
    2. In onAction, when I specify a macro to invoke, it fails with “Wrong number of arguments or invalid property assignment”
    Any suggestions? Thanks.

    Reply
    1. Maurice Post author

      Hi Madhes,
      What does the macro do exactly? Best way to act is to take the deafult ribbon control action and from that sub routine jump to the specific macro. But as I said tell me what the macro needs to do and we’ll see if we can figure it out.

      Reply
  2. Johai Hubert

    Hi Madhes
    I had the same problem. I solved it by adding “ByVal control As IRibbonControl” as argument in each of the sub-routines I called from the toolbar. That worked for me.
    Call in the UI Editor (I have omitted the icon in the call):

    Sub-routine in VBA:
    Sub Edit_properties(ByVal control As IRibbonControl)
    …..
    End Sub

    Reply
  3. Jac

    If you place your macro in C:\Program Files\Microsoft Office\Office14\STARTUP (the Startup folder will depend on the version of Office) the changes will apply every time you open Word. The location must also be a trusted location.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s