Modifying the Ribbon – Part 4

Previous posts on this subject:

Using Your Own Picture on a Button

Well... maybe not your own picture... unless you're feeling vain today. 😉 I really meant using an image of your choice. This is actually very easy, provided that you use the CustomUI Editor tool from OpenXML Developer that I blogged about in Part 1 of this series. Here's what you need to do...

First, open up your file in the CustomUI editor tool. Click the picture button (Insert Icons), browse to your picture and click OK. You'll now see your picture on the right side of the CustomUI editor, just like in the screen capture below:

If the image does not show up there, then you'll need to try again, as the pane does not show unless an image is attached.

Now, if you end up with a really long and weird looking file name, don't despair. You can rename the image to something more usable simply by right clicking it and choosing Change ID. Since the CustomUI editor replaces spaces in file names with the string "_x0020_", you may want to take advantage of this.

The next step is to edit your XML to refer to the custom picture. If you are using the "imageMso=" tags in your XML, change that to simply read "image=". So for the example above, you would enter image="logo". Again, remember that this will be case sensitive.

For the following example, I downloaded my website logo, imported it my file via the CustomUI editor, and used the following XML to create my menu:

[xml]






Share:

Facebook
Twitter
LinkedIn

13 thoughts on “Modifying the Ribbon – Part 4

  1. Could you tell me how do i achieve the same thing without using CustomUI editor.i,e

    How do i add my own icons(png format) to the ribbon tab in VSTO 2005 SE

    Regards,
    Digambar.

  2. Hi,
    Is ther any possibility of changing the background color of the button we place in the ribbon?

  3. Hi Vishnu,

    I think you have a couple of (limited) options...

    1) You can either change the entire Ribbon colour, which will affect the colour of all the transparent buttons. (Not what you want, I know.)
    2) You can use a custom image that has the colour your want.

    If you look at the final image in this post, that's about what you're going to get in size representation though. So you can't expand the size to take up the whole tab, but you could provide a 16x16 or 32x32 image with the colour you want.

    There is no way that I'm aware of to change the background of a button (short of using an image), a group, or a tab.

  4. I spent a long time trying to find documentation on XML syntax for the the ribbon on MSDN to get my own icons to appear. Your blog solved that problem for me. Thank you.

  5. Hi
    One small question re: images - I'm assuming it's not possible to have a different image for hover over - I have had the images I wanted created for my ribbon buttons with the same background colour as the button but when you hover over, you get a square of back colour around the image which is inside the orange coloured 'hover' colour. I've got the design team to hand to get me the right images, but wondered if there was any way the images could be created to make them as seamless as possible when hovering over the buttons?
    Any advice gratefully received.
    Thanks
    Martin

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Latest Posts