• 3 .gif images with transparency
• 3 .png images used to create jpeg [.jpg] images

• C:\Program Files\Microsoft Office\Templates\BUTTONS

Customized (new or modified) buttons should be saved in the CUSTOM USER folder:

• %USERPROFILE%\Application Data\Microsoft\FrontPage\Buttons

If you are just modifying existing buttons at the same size as the originals, you can edit the 6 existing images in any graphics editor that supports .gif transparency and .png files, using the same image names (but these changes may not be preserved thru future updates).  Therefore, it is recommended that you copy the original images to your CUSTOM USER folder (above), edit, and rename them, and then create them as Custom buttons.

For New images, all images are best created 4 times the actual size required (to allow for proportional resizing and well formed compact images on File Saves, and to allow custom proportional resizing in the Interactive Buttons Dialog).
i.e.: create 400x80 px images for buttons to be 100x20 px buttons.

Save your new 6 images in the CUSTOM USER folder above, (all filenames should be in the 8.3 format above), and then modify the XML control file as described below.
 

• C:\Program Files\Microsoft Office\Templates\1033\Buttons11

The installed default buttons use IBUTTON.XML which is installed by the default FrontPage installation.  Since that file may be subject to replacement or restoration to the original default settings during any future system updates (or reinstalls & repairs) of FrontPage, it should not be edited.  It is recommended that you do not edit IBUTTON.XML, but instead create a custom XML control file named IBUTTONcustom.XML in the CUSTOM USER folder.

There is no user interface to add new Interactive Buttons (or create the Custom XML control File), but they can be added to FrontPage by creation of a new XML file.  To create your own or modify existing buttons, copy the below XML and save it as IBUTTONcustom.XML in the CUSTOM USER folder.
(Note: If you are not using the English Language version of FrontPage 2003, you will need to edit the below template using your default IBUTTON.XML file as a guide to get the correct language unique settings).

You can also download an "empty" new IButton XML template file (right click and use Save As) at: IBUTTONcustom.XML.

Save the below template to the CUSTOM USER folder. Edit it using Notepad or an XML Editor, using the Definition Format Guide below. The values in the definition file define the initial state in the Interactive Buttons Dialog and the range of allowable values you can select in the Interactive Button dialog. Only Edit the values identified in RED below.
(Note: The GREEN annotations below are added for explanation and are not a required part of the file).

<?xml version="1.0"?>
<!--_lcid="1033" _version="5013"--><!-- Installed FrontPage Language setting -->
<!--_LocalBinding -->
<!-- Interactive Button Configuration File -->
<ibuttons>
<ibutton>
<fp-btn>
Button Name<!-- Unique button definition ID name -->
</fp-btn>
<name>
<!--_locID_text="nameXXX" _locComment="{StringCat=TXT}"-->
Button Name<!-- Unique button definition name to display in dialog-->
</name>
<title><!--_locID_text="titleXXX" _locComment="{StringCat=TXT}"-->
Button Text<!-- Default button text -->
</title>
<fp-font>
<!--_locID_text="fp-fontXXX" _locComment="{StringCat=TXT}"-->
Tahoma<!-- Default text font face -->
</fp-font>
<fp-font-style>
<!--_locID_text="fp-font-styleXXX" _locComment="{StringCat=TXT}{ValidStrings=Regular,Italic,Bold,Bold Italic}"-->
Regular<!-- Default text font type from list above-->
</fp-font-style>
<fp-font-size>
<!--_locID_text="fp-font-sizeXXX" _locComment="{StringCat=TXT}"-->
10<!-- Default text size -->
</fp-font-size>
<fp-font-color-normal>
#000000<!-- Default normal text color -->
</fp-font-color-normal>
<fp-font-color-hover>
#000000<!-- Default hover text color -->
</fp-font-color-hover>
<fp-font-color-press>
#000000<!-- Default pressed text color -->
</fp-font-color-press>
<fp-align-rect-normal>
Lpx,Tpx,Rpx,Bpx<!-- See Notes Below -->
</fp-align-rect-normal>
<fp-align-rect-hover>
Lpx,Tpx,Rpx,Bpx<!-- See Notes Below -->
</fp-align-rect-hover>
<fp-align-rect-press>
Lpx,Tpx,Rpx,Bpx<!-- See Notes Below -->
</fp-align-rect-press>
<fp-justify-vert>
<!--_locID_text="fp-justify-vertXXX" _locComment="{StringCat=TXT}{ValidStrings=top,center,bottom}"-->
center<!-- Default text alignment from list above -->
</fp-justify-vert>
<fp-direction>
<!--_locID_text="fp-directionXXX" _locComment="{StringCat=TXT}{L=!1025,1037}{ValidStrings=none,rtl}"-->
none<!-- Default language direction, if any -->
</fp-direction>
<width>
100<!-- Default image width to apply (proportional to original) -->
</width>
<height>
20<!-- Default image height to apply (proportional to original) -->
</height>
<fp-img-hover>
1<!-- Default state: 1 on, 0 off -->
</fp-img-hover>
<fp-img-press>
1<!-- Default state: 1 on, 0 off -->
</fp-img-press>
<fp-preload>
1<!-- Default state: 1 on, 0 off -->
</fp-preload>
<fp-transparent>
0<!-- Default transparency state: 1 on, 0 off -->
</fp-transparent>
<fp-proportional>
1<!--  Default resize image proportionally state: 1 on, 0 off -->
</fp-proportional>
<fp-bgcolor>
#ffffff<!-- Default jpeg image background color  -->
</fp-bgcolor>
<fp-text-antialias>
all<!--  Default to apply anti-alias to text  -->
</fp-text-antialias>
<fp-rgba-img-normal>
IMGNAMEa.png<!-- Unique normal state filename and path -->
</fp-rgba-img-normal>
<fp-rgba-img-hover>
IMGNAMEb.png<!-- Unique hover state filename and path -->
</fp-rgba-img-hover>
<fp-rgba-img-press>
IMGNAMEc.png<!-- Unique pressed state filename and path -->
</fp-rgba-img-press>
<fp-rgb-img-normal>
IMGNAMEa.gif<!-- Unique normal state filename and path -->
</fp-rgb-img-normal>
<fp-rgb-img-hover>
IMGNAMEb.gif<!-- Unique hover state filename and path -->
</fp-rgb-img-hover>
<fp-rgb-img-press>
IMGNAMEc.gif<!-- Unique pressed state filename and path -->
</fp-rgb-img-press>
</ibutton>
</ibuttons>

1. The values Lpx,Tpx,Rpx,Bpx in the definitions:
   <fp-align-rect-normal>Lpx,Tpx,Rpx,Bpx</fp-align-rect-normal>
   <fp-align-rect-hover>Lpx,Tpx,Rpx,Bpx</fp-align-rect-hover>
   <fp-align-rect-press>Lpx,Tpx,Rpx,Bpx</fp-align-rect-press>
   These define in each state (<fp-align-rect-*>) the alignment rectangle you see while in the "Font" tab of the Interactive Buttons dialog (it's a dashed composite rectangle).  The alignment rectangle is used to define where the button text aligns to (e.g. when you justify "left," how far left should that be).  The 4 numbers correspond to left, top, right, and bottom, (in pixels, respectively).  The coordinates are in the domain of the original full size button images, so if your original button image is 400x80 px and you want text to align exactly to the edges for all button states, you would define the composite rectangle as:
   <fp-align-rect-normal>0,0,399,79<fp-align-rect-normal>
   <fp-align-rect-hover>0,0,399,79<fp-align-rect-hover>
   <fp-align-rect-press>0,0,399,79<fp-align-rect-press>
   Note: they do not all have to be the same coordinates if you want the text to "move" with each state.
   
2. The values of (XXX) for all of the definitions above must be a unique number greater than 229 (the number of buttons originally defined by FrontPage). This allows several different interactive button styles to be uniquely identified on the same page.
3. If you want your new interactive button to show at the top of the list use a Button Name in the <name> definition beginning with an _underscore or *asterisk.
4. The image path is relative to your custom IBUTTONcustom.xml file (if they are in the CUSTOM USER folder with the IBUTTONcustom.XML file, then no path is required).