Help - Search - Members - Calendar
Full Version: Modifying Word's Ribbon UI
MSFN Forums > Microsoft Software Products - Discussion & Support > Microsoft Office 97/2000/2002-XP/2003/2007

   
Google Internet Forums Unattended CD/DVD Guide
spacesurfer
I love the new Office Ribbon. However, the first thing I wanted to do was modify it. The Home tab has a big chunk of the Styles group that I don't use. I wanted to get rid of it and put my own shortcuts in the Home tab. It took many hours for me to figure out how to modify the Ribbon. I put together a guide for everyone that shows you how to accomplish this.

Here's the pdf attached: Click to view attachment

The text version is in post 2.

Good luck.

Comments welcome.
spacesurfer
Introduction

Here is a tutorial on how to modify the ribbon interface in Office Word. This method doesn’t require Visual Basic programming. It requires modifying a simple XML file with a text editor. This guide only shows you how to shift the built-in controls around from tab to tab or group to group. It does not show you how to create your own controls.

Step 1: Enabling a Custom Ribbon

1) Create a folder called ‘Ribbon’ anywhere on your hard disk.
2) Open Office Word. Do not modify the new blank document. Click on ‘Save As’ to save the document as customUI.docm file in The Ribbon folder. This is a macro-enabled file. Make sure you change the “Save As Type” to docm.
3) Go to the Ribbon folder and add a zip extension to customUI.docm. It should now be customUI.docm.zip. Open the zip file with your zip utility or use the built-in zip support of Windows XP. The docm file is a zip file in disguise. You should now see three folders (_rels, docProps, and word) and one file called [Content_Types].xml.
4) Extract the folder _rels to your Ribbon folder.
5) In the _rels folder, open the .rels file with a text editor such as Notepad. Replace the content of the file with the following code below. This only sets the relationship allowing you to modify the Ribbon interface as specified by the file customUI.xml. We will modify customUI.xml file in the next step.

CODE
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId3" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/extended-properties" Target="docProps/app.xml"/><Relationship Id="customUIRelID" Type="http://schemas.microsoft.com/office/2006/relationships/ui/extensibility" Target="customUI/customUI.xml"/><Relationship Id="rId2" Type="http://schemas.openxmlformats.org/package/2006/relationships/metadata/core-properties" Target="docProps/core.xml"/><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="word/document.xml"/></Relationships>

If you do not want to replace the entire code, simply add the following line after the last Relationship and before </Relationships>.

CODE
<Relationship Id="customUIRelID" Type="http://schemas.microsoft.com/office/2006/relationships/ui/extensibility" Target="customUI/customUI.xml"/>


6) In the Ribbon folder, create a folder called customUI. In the customUI folder, create a text file called customUI.xml. The customUI.xml file contains the code to your Word Ribbon. The features you want in the Ribbon will determine the code of this file. The following code is provided so you can see the structure of the code.

CODE
<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">
  <ribbon>
    <tabs>
      <tab idMso="TabHome">
        <group idMso="GroupStyles" visible="false" />
        <group id="Shortcuts" label="My Shortcuts" insertBeforeMso="GroupClipboard">
          <button idMso="FileSave" showLabel="false" />
      <splitButton idMso="FileSaveAsMenu" showLabel="false" />
      <splitButton idMso="FilePrintMenu" showLabel="false" />
      <button idMso="ZoomOnePage" />
      <button idMso="ZoomPageWidth" />
          <checkBox idMso="ViewThumbnails" />
    </group>
    <group id="NewInsert" label="Insert Objects">
          <gallery idMso="TableInsertGallery" />
          <button idMso="PictureInsertFromFile" />
      <toggleButton idMso="ClipArtInsert" />
      <gallery idMso="TextBoxInsertGallery" />
          <gallery idMso="SymbolInsertGallery" />
          <gallery idMso="GalleryAllShapesAndCanvas" />
    </group>
    <group id="NewPageLayout" label="Page Layout">
          <gallery idMso="TableColumnsGallery" />
          <gallery idMso="PageOrientationGallery" />
          <gallery idMso="PageMarginsGallery" />
    </group>
      </tab>
      <tab id="EditStyles" label="Edit and Styles" insertBeforeMso="TabInsert">
        <group idMso="GroupEditing" />
        <group id="EditShorts" label="Quick Edits">
      <button idMso="RedoOrRepeat" />
          <gallery idMso="Undo" />
          <gallery idMso="Redo" />
    </group>
        <group idMso="GroupClipboard" />
        <group idMso="GroupStyles" />
      </tab>
      <tab idMso="TabPrintPreview">
        <group id="Reviewing" label="Reviewing">
             <dropDown idMso="ReviewDisplayForReview" />
          <menu idMso="ReviewShowMarkupMenu" />
           </group>
      </tab>
    </tabs>
  </ribbon>
</customUI>


7) The features of the customUI.xml will be explained below. But once you have your customUI.xml modified, drag the _rels and customUI folders to the customUI.docm.zip file. Overwrite the existing files if prompted. Remove the zip extension. Open customUI.docm and you should see the result of your modification. If you do not see a change, then either you have some mistakes in your code or the file conflicts with a modified Ribbon interface in Normal.dotm (in folder “%UserProfile%\Application Data\Microsoft\Templates\”). If so, try deleting Normal.dotm (back up the file if you need it).
8) Once you open customUI.docm and everything looks correct, click on ‘Save As’ and save the file as a macro-enable document template and call it Normal.dotm. You can replace your existing Normat.dotm with this one so you see the modified Ribbon each time you open Word. See Step 3 on replacing Normal.dotm.


Step 2: Modifying the customUI.xml

Control IDs

Each built-in button, split button, drop-down menu, menu, toggle button, checkbox, etc. that you see in the Ribbon interface is called a control. Each control has a unique Control ID that calls that control. Each tab and group also has a Control ID. In order to modify the Ribbon, you must know the Control ID that you want to manipulate and the type of control it is. The list of Control IDs can be downloaded from Microsoft’s website from the following URL: Office Control IDs or search for “Lists of Control IDs”.

Structure

The basic structure of customUI.xml is the following code:

CODE
<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">
  <ribbon>
    <tabs>
      <tab id="XXX" label="XXX">
        <group id="XXX" label="XXX">
          <button id="XXX" label="XXX" />
        </group>
      </tab>
    </tabs>
  </ribbon>
</customUI>


Tabs

First, lets modify tabs. To modify a built-in tab (or any other built-in control), idMso tag is used. The built-in tabs Home, Insert, View, etc. are named TabHome, TabInsert, TabView, etc. For a complete list, refer to the list of Control IDs. To modify the Home tab, the following code is used.

CODE
<tab idMso="TabHome">
</tab>


Groups

Groups are defined the same way as Tabs. With groups, however, you may want to hide them if you don’t use them in addition to creating your own group.

CODE
<tab idMso="TabHome">
   <group idMso="GroupStyles" visible="false" />
   <group id="Shortcuts" label="My Shortcuts" insertBeforeMso="GroupClipboard">
      <button idMso="FileSave" showLabel="false" />
      <splitButton idMso="FileSaveAsMenu" showLabel="false" />
      <splitButton idMso="FilePrintMenu" showLabel="false" />
      <button idMso="ZoomOnePage" />
      <button idMso="ZoomPageWidth" />
      <checkBox idMso="ViewThumbnails" />
   </group>
</tab>


This code modifies your Home tab in the following way:
• The Styles group is hidden with visible=“false”. idMso is used since it is a built-in group.
• A “My Shortcuts” group is created before the built-in Clipboard group. It is given the id Shortcuts.
• The rest of the items are individual controls that are displayed within the My Shortcuts group. They are explained in Controls section below.
• Note that built-in groups are simply ended with />. For your custom groups, however, you’ll need a </group> tag since you will have controls defined within the group.

Controls

Each control begins with the type of control. For example, a control can be a button, split button, drop-down menu, menu, toggle button, check box, gallery, etc. If you mismatch the Control ID with the control type, your Ribbon will not display correctly.
In the code above, the following controls are added to the ‘My Shortcuts’ group.
• A ‘Save’ button is added.
• Split buttons ‘Save As’ and ‘Print’ are added. Note the case-sensitive splitButton control type. By setting showLabel=“false”, only the icon is displayed.
• Buttons for ‘One Page’ view and ‘Page Width’ view are added. This will display with icon and text since showLabel=“false” is omitted.
• The check box ‘Thumbnails’ is displayed.

Creating a New Group

To create your own group, simply use the id tag instead of idMso. You also need a label tag to define the display name.

CODE
<tab idMso="TabInsert">
  <group id="MyGroup" label="My Group">
  </group>
</tab>


This creates a group called “My Group” in the Insert tab. The id of the group is MyGroup. You must define an id and it should not have any spaces.

The following piece of code is under the idMso=“TabHome” so it will create the group in the Home tab.

CODE
<group id="NewInsert" label="Insert Objects">
   <gallery idMso="TableInsertGallery" />
   <button idMso="PictureInsertFromFile" />
   <toggleButton idMso="ClipArtInsert" />
   <gallery idMso="TextBoxInsertGallery" />
   <gallery idMso="SymbolInsertGallery" />
   <gallery idMso="GalleryAllShapesAndCanvas" />
</group>
<group id="NewPageLayout" label="Page Layout">
   <gallery idMso="TableColumnsGallery" />
   <gallery idMso="PageOrientationGallery" />
   <gallery idMso="PageMarginsGallery" />
</group>


This code adds to the Home tab:
• Galleries for inserting tables, text boxes, symbols, and shapes.
• Button for inserting pictures.
• A toggle button for inserting clipart. Note the case-sensitive control toggleButton.

Creating a New Tab

You may want to create a new tab, especially if you removed groups from a built-in tab. For example, I removed the Styles group from the Home tab since I don’t use Styles that often. I created a group called Edit and Styles and put the Styles group there since I want access to it.

The method of creating your own tab is similar to creating a new group.

CODE
<tab id="MyTab" label="My Tab">
  <group id="MyGroup" label="My Group">
  </group>
</tab>


This creates the tab “My Tab” and the group “My Group” in My Tab.

CODE
<tab id="EditStyles" label="Edit and Styles" insertBeforeMso="TabInsert">
   <group idMso="GroupEditing" />
   <group id="EditShorts" label="Quick Edits">
      <button idMso="RedoOrRepeat" />
      <gallery idMso="Undo" />
      <gallery idMso="Redo" />
   </group>
   <group idMso="GroupClipboard" />
   <group idMso="GroupStyles" />
</tab>


This creates a tab called “Edit and Styles”. It includes the built-in groups Editing, Clipboard, and Styles. It also creates editing shortcuts for undoing and redoing.


Step 3: Modifying and Testing

The modified Ribbon in customUI.docm displays correctly only if Normal.dotm does not exist in “%UserProfile%\Application Data\Microsoft\Templates\” or it is the default one created by Word. If you try opening customUI.docm after replacing Normal.dotm with a modified one, Word may not display the Ribbon appropriately. Every time you modify customUI.docm and you want to see the effect, you should ensure that Normal.dotm in “%UserProfile%\Application Data\Microsoft\Templates\” is the default file created by Word, not the modified file.

Now that you have your customUI.xml file set, you’ll want to play around and test it out. Once you have everything setup, you will only have to modify customUI.xml. Once it is modified, drag the folder customUI to customUI.docm.zip. Remove the zip extension and open to test it.

Once you get the Ribbon the way you want it, use the ‘Save As’ to save it as a macro-enable document template and call it Normal.dotm. Replace your Normal.dotm in “%UserProfile%\Application Data\Microsoft\Templates\”. If you modify customUI.docm again, you must delete Normal.dotm, then open customUI.docm to test the effect.

Conclusion

Modifying the Ribbon Interface is simple if you know the Control IDs of each control in Word.
Xable
Very interesting, Nice one spacesurfer.
spacesurfer
If you don't want to do all of this by hand, you can download the Custom UI Editor from Custom UI Editor.

Here's what this tool does:

* It allows you to verify your code. If there are any mistakes, it will tell you there are mistakes.
* It allows you to add your own images (or icons) for your custom buttons.

* It does not write the code for you. You still have to write the code. That's why the post above is necessary so you know what to write.
mrQQ
very nice find indeed!

it's sad, however, to see that now you have to do all that, instead of just conveniently dragging and dropping buttons around...
spacesurfer
Yes, it's sad it's complicated. But the fact that it's complicated gives it a lot more functionality that what you can do with simple drag-and-drop.

Also, if you customize your Ribbon, you can take pleasure about what others can't do.

Hehe.
avoidz
QUOTE (mrQQ @ Feb 13 2007, 06:11 PM) *
very nice find indeed!

it's sad, however, to see that now you have to do all that, instead of just conveniently dragging and dropping buttons around...


Agreed. The Ribbon makes a nice change (and something new to learn) after so many years of the same-old-but-good Office smile.gif

It would be good, however, to remove the annoying Styles module and replace it with something custom - easily.
Garyk007
This tutorial is amazing.

Thanks for adding this info.

Maybe some kind soul can help with one question.

I can now add a new Tab, Group and standard buttons using the Xml method in the example,
But I want to add a custom button that will display say a "contracts" category of the buiding blocks.

For eg. I have added some content to the Builing Blocks gallery, with a new category I created called "contracts".
So all that I now need is a button that will filter the Quick parts gallery and just show the content that falls into the "contracts" category.

I hope this makes sense.

Im no programmer and would be so greatful for any help the Guru's out there may have.
spacesurfer
The information to add tabs in there, you missed it:

CODE
<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">
  <ribbon>
    <tabs>
      <tab id="XXX" label="XXX">
        <group id="XXX" label="XXX">
          <button id="XXX" label="XXX" />
        </group>
      </tab>
    </tabs>
  </ribbon>
</customUI>


Where id is the ID you want to give your new tab. idMso are builtin tabs.
tosbsas
Is there any way to get ribbon in office 2003

Ruben
spacesurfer
no
AdroS
Hi there,

I have been examining in detail of how to use the CustomUI tool to customize the Word 2007 ribbons, as those tutorials from MSDN about ribbonX are somewhat helpful.

Here's my scenario:
I have created a macro-enabled word 2007 template (.dotm) and have created a function in VBA. It pulls out a VBA form and inserts data from form into document. I now like to have this function included in the Add Ins Tab in the ribbon.

So I used the customUI Tool that is offered from the ribbonX website, downloaded it and studied the tutorials from MSDN reference site.
I used the XML tags and used the event call back procedures to call functions in the VBA sourcecode.

Now that I have a completed XML document done in CustomUI Tool and have the procedures required in the VBA sourcecode, including the callback function etc. When I test and open the documnet, I am not getting the Add-In Tab that displays the menu button for the function.

So my general question is, how do I ensure that the XML document created in CustomUI is referencing the template that I would like it display in?

I thought this would be automatic when you open the XML file of the template in CustomUI and save it. Additionally, I have also tried adding it as a COM Add-IN in the template via Visual Studio 2008, and still no further progress.

Any advice and tips would be appreciated.

Cheers.
Adrian

spacesurfer
I believe the Add-in tab is a built-in tab. You probably can't add to this one. Try creating your own custom tab and add your buttons there.
Google Internet Forums Unattended CD/DVD Guide
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.