Assigning custom button images to your toolbar and menu buttons

1.

Select Tools + Customize, right-click the button and select “Change Button Image”. But the selection there is as exciting as cold porridge, so the chances are that you won't want to use any of those images.

2.

Select Tools + Customize, right-click the button and select “Edit Button Image”. But if you can create good anti-aliased graphics in a pixel editor, one dot at a time, you're a far cleverer artist than I am; I would much rather spend all day trying to thread a 10-foot rope through a sewing needle than attempt to use this method! However, it can be useful for tweaking existing images, if the tweaking is very minor; or for creating very simple images with no anti-aliasing.

3.

Select Tools + Customize; in the left pane of the Commands tab select “All Commands”, and scroll down until you find an image you like. Drag its button to a toolbar, right-click on your “dummy” button and select “Copy Button Image”, then right-click on your “real” button and select “Paste Button Image”, before finally dragging the “dummy” button off the toolbar again.

If you want to do it programmatically, you can find out the FaceID of the button image you like, as follows:

MsgBox CommandBars("MyTemplateToolbar").Controls(1).FaceID

Once you know the FaceID you can apply the image to your button at runtime like this:

CommandBars("MyTemplateToolbar").Controls(1).FaceID = 306

4.

Download the following template – it is only 18k zipped up, and extracts to FaceID.dot. It does not contain any macros:

It contains four toolbars, named "FaceIDs1" through "FaceIDs4", which between them contain all of the standard button images available to Word 97 (a lot more than you will see using method 3 above).

When you hover over a button, you will see the FaceID number for the image (as long as you have "Show Screen Tips" turned on under Tools + Customize + Options). These FaceID numbers work with Word 2000 and 2002 as well as 97.

To use it, go into Word and select Tools + Templates and Addins + Add, and add FaceID.dot: the four toolbars will then appear. Toggle between the four toolbars to find an image you like. When you have found one, you can either note its FaceID number and use:

CommandBars("MyTemplateToolbar").Controls(1).FaceID = 'the number you chose

...  or you can select Tools + Customize, right-click the button image you like and select “Copy Button Image”; then right-click your toolbar button and select “Paste Button Image”.

There are various articles on the Web which state that there are over 3,000 FaceIDs; and strictly speaking this is true; but roughly half of them (and I exaggerate not) are either not associated with any image at all, or their images are exact duplicates of other FaceIDs' images! There are actually only 1,707 unique button images (and even amongst those, many are so similar to each other that you have to really stare at them to see what the difference is!); and the attached template only contains the unique ones, making it much easier to find the one you want.

There are a number of macros available on the Web that generate toolbars on the fly similar to the attached ones, but I find them all very clunky to use, which is why I created the FaceID template – no offence intended to those who wrote those macros – they are very clever! I just find the attached FaceID template a lot easier to use.

I have protected the toolbars in the template, for the sake of those of you who, like me, have clumsy fingers and would otherwise keep accidentally and frustratingly closing or docking the toolbars, or moving them to an inaccessible place. Whilst I do anticipate that most people will find this protection helpful, if you're the sort who always likes to feel in complete control, you can unprotect them using the code in the article: Protect command bars against changes.

5.

If you're an individualist like me, you will probably not want to use any of the above methods, most of the time, but instead will want to create your own images. You can use any decent graphics package to do this – I generally use PaintShop Pro, but sometimes use Photoshop. Your image canvas size must be 16 x 16 pixels, and the background colour must be RGB 191, 191, 191. If you want to tweak one of Microsoft's button images, you can select “Copy Button Image”, paste into your graphics program, then edit it there.

Once you're happy with your masterpiece, save it as a GIF, (I find that GIF gives best results), make the background colour transparent; and either:

Note: If using methods a, b or c, and if you want to be able to disable the button in question (for instance, when there are no documents open); and if you want the disabled button image to look as it should, then you may find that you have to modify the button manually after pasting it. This is particularly an issue if you or any of your users are using Word 97:

To fix this you have to select Tools + Customize, right-click the button and select “Edit Button Image”, click where it says “Erase”, and erase all of the background grey. Unfortunately, there seems to be no other way of achieving the same effect, although if the button will definitely never be viewed in Word 97, you may find that it looks alright after being disabled without having to erase the background in this way.

If you want to create the button programmatically at runtime, and need to be able to disable it, you may have to use method d) (above) to assign the button image to it (especially if any of your users are using Word 97). This is covered in more detail in the article: How to use VBA to set a custom graphic on a toolbar button.