Assigning custom button images to your toolbar and menu buttons

Article contributed by Dave Rado

Once you've assigned a Word command or a macro, to one of your toolbar or menu buttons, you may want to assign a button image to it – either because there isn't one assigned by default, or because you don't like the one that's assigned.

Firstly, though, don't forget that you can make the button display text rather than an image, and sometimes this can work better. To do that, select Tools + Customize, right-click the button and select Text Only.

If you do want to use an image, though, there are a number of ways of going about it:

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:
Click to download

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:

a)

Open it in your graphics program, Copy, switch to Word, select Tools + Customize, right-click the button and select Paste Button Image; or ...

b)

In Word, select Insert + Picture + From File insert your GIF, and make sure it's floating (for some reason this procedure doesn't work well with inline graphics). Then select the floating graphic, Cut it, select Tools + Customize, right-click your toolbar or menu button and select Paste Button Image; or ...

c)

Procedure b) can be carried out programmatically at runtime – see the article: How to use VBA to set a custom graphic on a toolbar button; or ...

d)

If you want to do it programmatically at runtime, but don't want to have to rely on an external graphic being available, you can either store the image as AutoText and tweak the code mentioned in c); or you can store the image on a dummy button on a disabled toolbar (so that users don't have access to it), and use the CopyFace and PasteFace methods at runtime.

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:

Disabled save button as it ought to look

Disabled save button as it might look after pasting the button image, especially if the template is opened in 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.