HOW TO: Create and Modify Custom Interactive Buttons in FrontPage 2003

Interactive Button Images
�
FrontPage 2003 Interactive Buttons have three states (normal, hovered, and pressed), therefore six images are required for each new button (3 .gif images with transparency, and 3 .png images used to create jpeg [.jpg] images).� The image filename format for each set of image states is IMGNAMEa.ext (normal), IMGNAMEb.ext (hovered), IMGNAMEc.ext (pressed).� The default installation location of the predefined images is:
�
C:\Program Files\Microsoft Office\Templates\BUTTONS
�
Customized buttons should be saved in the USER Customized Applications folder located:
�
%USERPROFILE%\Application Data\Microsoft\FrontPage\Buttons
�
If you are modifying Existing default buttons at the same size as the originals, you can edit the existing images in any graphics editor that supports .gif transparency and .png files, using the same image names as the originals.� However, these changes may not be preserved thru future updates, repairs, or reinstallations of FrontPage, and cannot be shared with other users.� Therefore, it is recommended that you copy the original images to your USER Customized Applications folder, then Edit and Rename them in an image editor to create Custom Interactive Buttons.
�
If you are creating new Custom buttons, then all images are best created at 4 times the actual image size required.� This allows for user custom proportional resizing in the Interactive Buttons Dialog, and well formed compact images during saving of the embedded images, (i.e.: create 400x80 pixel original images for Interactive Buttons to be nominally at 100 px by 20 px buttons).� Save your new images in the USER Customized Applications folder, (all filenames should be in the 8.3 format above), and then create an XML dialog definition file as described below.
�
�
Interactive Button Dialog Definition File
�
The typical, or default FrontPage installation, includes a predefined set of Interactive Buttons that are controlled in the Interactive Button Dialog interface in FrontPage by an XML definition file: IBUTTON.XML.� This file controls the default values (and range of allowable) values, and the default installation location of the file (IBUTTON.XML) is:
�
C:\Program Files\Microsoft Office\Templates\1033\Buttons11
�
Since the IBUTTON.XML 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.� Instead, it is recommended that you create a Custom XML definition file, named IBUTTONcustom.XML, in the USER Customized Applications folder.
�
There is no FrontPage application user interface to add new images or create the custom XML file, but the FrontPage user interface can be extended to utilize Custom Interactive Buttons by creation of a new XML Definition file.� To create and access your custom Interactive Buttons: Copy the below XML Template (IBUTTON.XML Definition File Guide and XML template) into Notepad or an XML Editor, and Save it to the USER Customized Applications folder as IBUTTONcustom.XML.
�
Edit your custom XML definition file using the Definition File 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.� Edit only the template values that are highlighted (BOLD) below.
�
�
IBUTTON.XML Definition File Guide and XML Template:
�
<?xml version="1.0"?>
<!--_lcid="1033" _version="5013"--><!-- INFO Installed FrontPage Localized Language setting -->
<!--_LocalBinding -->
<!-- Interactive Button Configuration File -->
<ibuttons>
<ibutton>
<fp-btn>Button Name<!-- INFO Unique button definition ID name --></fp-btn>
<name><!--_locID_text="nameXXX" _locComment="{StringCat=TXT}"-->Button Name<!-- INFO Unique button definition name to display in dialog --></name>
<title><!--_locID_text="titleXXX" _locComment="{StringCat=TXT}"-->Button Text<!-- INFO Default button text --></title>
<fp-font><!--_locID_text="fp-fontXXX" _locComment="{StringCat=TXT}"-->Tahoma<!-- INFO Default text font face --></fp-font>
<fp-font-style><!--_locID_text="fp-font-styleXXX" _locComment="{StringCat=TXT}{ValidStrings=Regular,Italic,Bold,Bold Italic}"-->Regular<!-- INFO Default text font type from list above --></fp-font-style>
<fp-font-size><!--_locID_text="fp-font-sizeXXX" _locComment="{StringCat=TXT}"-->10<!-- INFO Default text size --></fp-font-size>
<fp-font-color-normal>#000000<!-- INFO Default normal text color --></fp-font-color-normal>
<fp-font-color-hover>#000000<!-- INFO Default hover text color --></fp-font-color-hover>
<fp-font-color-press>#000000<!-- INFO Default pressed text color --></fp-font-color-press>
<fp-align-rect-normal>Lpx,Tpx,Rpx,Bpx<!-- INFO See Template Editing Notes --></fp-align-rect-normal>
<fp-align-rect-hover>Lpx,Tpx,Rpx,Bpx<!-- INFO See Template Editing Notes --></fp-align-rect-hover>
<fp-align-rect-press>Lpx,Tpx,Rpx,Bpx<!-- INFO See Template Editing Notes --></fp-align-rect-press>
<fp-justify-vert><!--_locID_text="fp-justify-vertXXX" _locComment="{StringCat=TXT}{ValidStrings=top,center,bottom}"-->center<!-- INFO 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<!-- INFO Default language direction, if any --></fp-direction>
<width>100<!-- INFO Default image width to apply (proportional to original) --></width>
<height>20<!-- INFO Default image height to apply (proportional to original) --></height>
<fp-img-hover>1<!-- INFO Default state: 1 on, 0 off --></fp-img-hover>
<fp-img-press>1<!-- INFO Default state: 1 on, 0 off --></fp-img-press>
<fp-preload>1<!-- INFO Default state: 1 on, 0 off --></fp-preload>
<fp-transparent>0<!-- INFO Default transparency state: 1 on, 0 off --></fp-transparent>
<fp-proportional>1<!-- INFO Default resize image proportionally state: 1 on, 0 off --></fp-proportional>
<fp-bgcolor>#ffffff<!-- INFO Default jpeg image background color --></fp-bgcolor>
<fp-text-antialias>all<!-- INFO Default to apply anti-alias to text --></fp-text-antialias>
<fp-rgba-img-normal>IMGNAMEa.png<!-- INFO Unique normal state filename and path --></fp-rgba-img-normal>
<fp-rgba-img-hover>IMGNAMEb.png<!-- INFO Unique hover state filename and path --></fp-rgba-img-hover>
<fp-rgba-img-press>IMGNAMEc.png<!-- INFO Unique pressed state filename and path --></fp-rgba-img-press>
<fp-rgb-img-normal>IMGNAMEa.gif<!-- INFO Unique normal state filename and path --></fp-rgb-img-normal>
<fp-rgb-img-hover>IMGNAMEb.gif<!-- INFO Unique hover state filename and path --></fp-rgb-img-hover>
<fp-rgb-img-press>IMGNAMEc.gif<!-- INFO Unique pressed state filename and path --></fp-rgb-img-press>
</ibutton>
</ibuttons>
�
XML Template Editing Notes:
�
Most values in the definition control template above are self-explanatory, except:
�
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 is 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 values do not all have to be the same coordinates if you want the text to "move" with each state change.� The four 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 the original button image is 400x80 pixels and the text is to be aligned exactly to the edges for all button states, the definition of the composite rectangle would be:
�
<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>
�
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) You can cause your custom Interactive Buttons to show at the top of the list in the dialog by using a Button Name in the <name> definition beginning with an _underscore or *asterisk.
�
4) The image path in <fp-rgb-img-*> and <fp-rgba-img-*> is relative to your custom IBUTTONcustom.xml file (if the button images are in the USER Customized Applications folder along with the IBUTTONcustom.XML file, then no path is required).
�
5) Users of a localized language version of FrontPage 2003, will need to edit the above custom XML template, using the IBUTTON.XML file as a guide, to obtain the correct localized language settings for the _licd value (and the L=!1025,1037 values).� For a list of locale ID (LCID) values see Microsoft Knowledge Base Article: 821398 Languages That Are Included with the Multilingual User Interface Pack.
�
6) The commented annotations, identified with <!-- INFO � --> in the above template, are added for explanation and are not a required part of the XML file.
�
�
General Comments on Use of Interactive Button
�
FrontPage will generate images from the text on your buttons, therefore the font you choose for your Interactive Buttons will render correctly without dependence on individual user font installations, and you are not limited to just "browser safe" fonts for your buttons.
�
If you want to distribute your Custom Interactive Buttons to other FrontPage 2003 users, package and distribute the new button images and a custom XML definition file for the new images (using a unique name different from the recommended per user IBUTTONcustom.XML filename).� FrontPage will read multiple XML definition files in the USER Customized Applications folder.
�
FrontPage will generate unique sequential image names for each image when you are applying or changing Interactive Buttons.� Change the saved button filenames (and folder locations), to filenames and locations that are more meaningful to the designer, when saving the Page after applying the Interactive Button in FrontPage (in the Save Embedded Files dialog).
�
To reuse the same Interactive Button in multiple pages, create it once and save the page (along with the embedded image files generated by FrontPage). �Next, select the Interactive Button and use Edit Copy, then Edit Paste into your other pages at the desired insertion point.

Microsoft corporation and/or its respective suppliers make no representations about the suitability, reliability, or accuracy of the information and related graphics contained herein. All such information and related graphics are provided "as is" without warranty of any kind. Microsoft and/or its respective suppliers hereby disclaim all warranties and conditions with regard to this information and related graphics, including all implied warranties and conditions of merchantability, fitness for a particular purpose, workmanlike effort, title and non-infringement. You specifically agree that in no event shall Microsoft and/or its suppliers be liable for any direct, indirect, punitive, incidental, special, consequential damages or any damages whatsoever including, without limitation, damages for loss of use, data or profits, arising out of or in any way connected with the use of or inability to use the information and related graphics contained herein, whether based on contract, tort, negligence, strict liability or otherwise, even if Microsoft or any of its suppliers has been advised of the possibility of damages.