After completing this topic, you will be able to customize Player images in a skin.
Steps:
The WSG skin is open.
You are going to open a Player publishing project, copy a Player image to the WSG skin and then customize the image.
Step 1Open the Player_WSG publishing project.
Double-click the Player_WSG list item.
Step 2The publishing project document opens in the Package Editor.
We are using the copy of the Player publishing project from the WSG category instead of the Player in the User Productivity Kit folder. As long as a Player publishing project contains the images and elements you need, you can copy graphics and elements from a publishing category.
Step 3Open the Customizable images folder.
Double-click the Customizable images list item.
Step 4You are going to copy the module_c.gif file.
The module_c.gif is the icon that appears in the table of contents when the parent is collapsed. Normally, you would also want to customize the module_o.gif file, which is the icon that appears when the parent is expanded.
Step 5Select the module_c.gif file and copy it.
Click the module_c.gif list item.
Step 6Click the Copy button.
Step 7Select to the WSG tab and paste the image to the root of the skin file.
Click the WSG tab.
Step 8Click the Paste button.
Step 9Customize the icon.
Right-click the module_c.gif list item.
Step 10Click the Open With command.
Step 11Click the Paint list item.
Step 12Click the OK button.
Step 13In the Paint window, select the View tab.
Click the View tab.
Step 14Click the Zoom in button until the icon zooms to the largest size.
Click the Zoom in button.
Step 15Select the Home tab.
Click the Home tab.
Step 16In the Colors group, select the Green in the top row.
Click the Green (1st row, 7th column) color.
Step 17In the Tools group, click the Fill with color icon (paint can).
Click the Fill with color button.
Step 18Click in the purple color on the top of the book.
Step 19Click in the purple color on the side of the book.
Step 20We are going to save the image.
Paint does not support transparencies, so your published icon will show the black background. If you want to customize icons, you should use an image editor that supports transparencies.
Step 21Close the Paint window and select Save.
Click the Close button.
Step 22Save the changes.
Click the Save button.
Step 23You can also copy a custom graphic file into the skin, but it must have the same name as the image you want to replace.
We will open the Training Files\Images and Logos folder and copy the gif file for the Preferences button, which we have customized.
Step 24To save time we have opened the Training Files\Images and Logos folder for you.
Step 25Click the prefs_button.gif file.
Step 26Copy the file using the Edit menu.
Click the Edit menu.
Step 27Click the Copy command.
Step 28Click the WSG tab.
Step 29Paste the image to the root of the WSG skin file.
Click the Paste button.
Step 30Open the pasted prefs_button.gif file in Paint.
Double-click the prefs_button.gif list item.
Step 31We have Zoomed the image for you.
Notice that this image differs from the standard Preferences button that displays a gear and wrench.
Step 32Close the Paint window.
Click the Close button.
Step 33Save the changes made to the skin.
Click the Save button.
Step 34We have published the outline using the WSG skin with the customized graphics.
We have also saved the module_c icon as a transparent icon in another image editor.
Notice the green icons for the collapsed modules. The open modules are still purple because we did not customize those.
Also notice the custom Preferences button on the right side of the blue header divider bar. The custom button is too large for the bar. To solve the problem, you could either resize the image to a smaller size or add the .headerDivbar element to the skin and increase the height of the header.
Step 35After completing this topic, you are able to customize Player images in a skin.