Changing Button Images using Skins

If you want to have your own custom images on the document toolbar, want to adjust toolbar background and colors, you need to create your own skin. A skin comprises a set of toolbar button images and colors used to draw document interface. When creating a new skin, you need to design your own button images using third-party graphic authoring software. Then button images should be exported to graphic files of PNG format for importing them into a Print2HTML5 skin.

Normally skin creation process consists of several steps listed below.

Authoring images

You may design your own button images using third-party graphic authoring software, for example, Adobe Photoshop. The color palette of each image may be composed of up to 16777216 (24 bit) colors with 8 bit alpha transparency channel. Below are the dimensions (in pixels) for each toolbar image:

The images may also contain transparency alpha channel which makes it easier to design buttons which may fit any background color or merge gradually into the toolbar background. As toolbar may display fewer images than standard skins have, you may design only those buttons that you need. The buttons that you don't need may be later hidden as described in Hiding Buttons and Logo help topic.

After design the images must be exported to PNG format files to prepare them for importing into a Print2HTML5 skin.

Creating and editing skins

Creating and editing skins is performed in the Skin Editor window which is available via Options/Skin Editor option of the Print2HTML5 Application. To create a new skin, you need to click Add button. After that you will be presented with Skin Properties window in which you can setup all skin parameters as discussed in the following chapters.

If you like some standard or third-party skin but want only to modify some button images or colors, you may modify an existing skin so as not to start skin design from scratch. This can be done in two ways:

• If you want to retain the original skin intact, click Duplicate button in the Skin Editor window. It will create a new skin and copy all parameters from the original skin into the new skin. Then you may modify the new skin as you need it:
• If you want to modify the original skin, click Edit button. It will open Skin Properties window in which you can modify required parameters.

Importing images into the skin

After you created a skin and designed images for it, it is time to import your images into the skin. This can be done in the Buttons tab of the Skin Properties window by clicking Change buttons near each button label and choosing a respective PNG file on disk. After you select an image, its preview will be displayed in the toolbar preview located at the top of the window. You need to repeat this procedure for each image that you need to modify.

Changing toolbar background

The document toolbar background may be customized in two ways:

• The toolbar may be composed of a solid color. You may specify this color using Color control in the Background tab of Skin Properties window;
• The toolbar may be composed of an image. This image can be chosen by clicking Image option in the Background tab of Skin Properties window and choosing a respective PNG file on disk. This change is immediately reflected in the preview located at the top of the window. You may also select how background image behaves on the toolbar surface:
  • Stretch - toolbar image is stretched so as to fill the toolbar background in full. Note that image proportions are not retained. Such behavior may be useful, for example, for a horizontal gradient image;
  • Tile - toolbar image is not stretched but tiled throughout the toolbar background both horizontally and vertically.  Such behavior may be useful, for example, for a vertical gradient image.

If both the background color and the image are specified, the image takes precedence and the color is ignored.

Adjusting colors

A number of additional colors can be setup:

• Focused button background - this is the color of the button background shown when mouse hovers over the button image;
• Focused button border - this the color of the border shown around the button when mouse hovers over the button image;
• Pressed button background - this is the color of the button background shown while user is pressing the button;
• Pressed button border - this the color of the border shown around the button while user is pressing the button;
• Document area color - this is the color of the background behind the document pages. You can see this background in spaces between and around the pages;
• Text highlight color - this is the color used to highlight text when it is selected with mouse or at text search.

Customizing zoom slider

Zoom slider image is composed of two parts:

• 
  Zoom slider rule which is a fixed background part of the slider over which slider handle moves. You can specify this image just like any other button image in the Buttons tab of Skin Properties window;
• Zoom slider handle is a movable part of the slider which user can drag with mouse over the rule. The handle has two images:
  • Focused handle image shown when mouse hovers over the handle or when user clicks or drags it;
  • Normal inactive image of the handle shown in other cases.
  Both these images can be setup in the Buttons tab of Skin Properties window like other button images.

Additional parameter affecting slider behavior is the zoom slider handle vertical offset. This is the vertical offset of the zoom slider handle image relative to the position of this image centered regarding the rule image. This parameter affects relative vertical positions of the rule and the handle. Zero value means that the handle is vertically centered regarding the rule image. Greater value will move the handle lower while smaller value - higher. You may adjust this value manually and see how it affects handle position in the preview located at the top of the window.

Programmatic skin creation and editing

Skins can be accessed and setup programmatically using SkinCollection object. You may enumerate skins, add new and modify existing skins.

To add a new skin call Add method which creates a new skin and returns a Skin object representing the new skin. To obtain an existing skin reference you may access the default item property passing it the skin name or enumerate with it all available skins passing it an ordinal skin number.

After obtaining a reference to the Skin object you may set its properties and call its methods to setup the skin as you need it. The Skin object functionality duplicates the Skin Properties window functions described above. Refer to the Skin object documentation for more details.