Summary

Synopsis

When using dialog skins and modifying dialogs in the Dialog Editor to reposition or resize buttons, the resulting run-time skinned dialog might not appear as expected.

Discussion

This is a limitation of the skin file because it always reverts the buttons back to their original size and location at run time. This issue can be resolved by using the Q200318: INFO: Skin Customization Kit to use bigger buttons and specify the button locations.

1. Use the Skin Customization Kit to extract the files of the dialog skin being used. For example, the following command line would extract the files for the IS Blue skin:

   "C:\Program Files\<InstallShield Product Folder>\Skin Customization Kit\Bin\CreateSkinFile.exe" -extract "C:\Program Files\<InstallShield Product Folder>\Skins\Blue.isn" "C:\<skin output folder>"

2. Notice the two .gif files for buttons in the extracted "<skin output folder>". These are the default images for the two button states (pushed and normal).

   

3. Right click and select to edit one of the gif files using Microsoft Paint. Make the button image bigger (to desired size) by copying 3/4 of the button and pasting it on the end. Do the same for the other image making sure the buttons are the same size.

   

4. Save the new button images with different names in the "<skin output folder>" to differentiate them from the default size buttons. For example, BigButtonPushed.gif and BigButtonNormal.gif.

5. Open the skin.ini file. If you want a button to be larger for all dialogs, make the following changes in the section of the ini file titled [ALL]. If you only want to have a large button for a specific dialog, find that specific dialog section name, for example [AskPath]. For new buttons added to an existing dialog go to Step 9.

6. Find the button ID (BUTTONX) that you want to use the larger button image with. Each button in the INI file is associated with a unique number that usually corresponds to the Control Identifier number of the button in the Dialog Editor. For example:

   BUTTONX=12 is the Back button
   BUTTONX=1 is the Next button
   BUTTONX=9 is the Cancel button
   BUTTONX=2 is the X button to close dialogs
   BUTTONX=31 or 196 are Browse buttons
   etc.

   Where X is a number.

7. Add the following lines to the INI file section (Step 5) under the button ID (Step 6). This example is using the larger button image for the Back button in the AskPath dialog:

   [AskPath]
   BUTTONS=4
   BUTTON1=12
   BUTTON1UP=BigButtonNormal.gif
   BUTTON1DOWN=BigButtonPushed.gif

8. Save changes to the skin.ini file.

9. To change the default positioning of buttons change the values of the BUTTONXPOS variable. Continuing with the above example, the changes made in bold below reposition the Back button of the AskPath dialog:

   [AskPath]
   BUTTONS=4
   BUTTON1=12
   BUTTON1UP=BigButtonNormal.gif
   BUTTON1DOWN=BigButtonPushed.gif
   BUTTON1POS=165, 284

10. Save changes to the skin.ini file.

11. For new buttons added to existing dialog, you must add a button tag (associate it with the Control Identifier in the Dialog Editor). For example, continuing with the AskPath example, note the changes in bold to a default skin.ini:

    [AskPath]
    BUTTONS=5
    BUTTON1=12
    BUTTON1POS=195,284
    BUTTON2=1
    BUTTON2POS=250,284
    BUTTON3=9
    BUTTON3POS=400,284
    BUTTON4=31
    BUTTON4POS=392,112
    BUTTON5=1201
    BUTTON5UP=BigButtonNormal.gif
    BUTTON5DOWN=BigButtonPushed.gif
    BUTTON5POS=125,125

    This example uses the big button images for the new button with Control ID 1201. The position of the button is also being changed.

12. Use the Skin Customization Kit to create a new skin with the larger/repositioned/new buttons. For example, the following command line would create the skin file from the customized files in the "<skin output folder>":

    "C:\Program Files\<InstallShield Product Folder>\Skin Customization Kit\Bin\CreateSkinFile.exe" "C:\<skin output folder>" "C:\<skin output folder>\Custom Skin\setup.isn"

Related KB Articles

Additional Information

The newly created skin file will have to be added to the media files after the build process. This is because with each new build the default InstallShield skin file will be added to the media and overwrite the custom skin file.

For more information on dialog skins, see the Help Library topic Dialog Skins.