Customize Player Images in a Skin

After completing this topic, you will be able to customize Player images in a skin.

Steps:

1. 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 1

2. Open the Player_WSG publishing project.

    

   Double-click the Player_WSG list item.

   Step 2

3. The 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 3

4. Open the Customizable images folder.

    

   Double-click the Customizable images list item.

   Step 4

5. You 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 5

6. Select the module_c.gif file and copy it.

    

   Click the module_c.gif list item.

   Step 6

7. Click the Copy button.

   Step 7

8. Select to the WSG tab and paste the image to the root of the skin file.

    

   Click the WSG tab.

   Step 8

9. Click the Paste button.

   Step 9

10. Customize the icon.

     

    Right-click the module_c.gif list item.

    Step 10

11. Click the Open With command.

    Step 11

12. Click the Paint list item.

    Step 12

13. Click the OK button.

    Step 13

14. In the Paint window, select the View tab.

     

    Click the View tab.

    Step 14

15. Click the Zoom in button until the icon zooms to the largest size.

     

    Click the Zoom in button.

    Step 15

16. Select the Home tab.

     

    Click the Home tab.

    Step 16

17. In the Colors group, select the Green in the top row.

     

    Click the Green (1st row, 7th column) color.

    Step 17

18. In the Tools group, click the Fill with color icon (paint can).

     

    Click the Fill with color button.

    Step 18

19. Click in the purple color on the top of the book.

    Step 19

20. Click in the purple color on the side of the book.

    Step 20

21. We 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 21

22. Close the Paint window and select Save.

     

    Click the Close button.

    Step 22

23. Save the changes.

     

    Click the Save button.

    Step 23

24. You 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 24

25. To save time we have opened the Training Files\Images and Logos folder for you.

    Step 25

26. Click the prefs_button.gif file.

    Step 26

27. Copy the file using the Edit menu.

     

    Click the Edit menu.

    Step 27

28. Click the Copy command.

    Step 28

29. Click the WSG tab.

    Step 29

30. Paste the image to the root of the WSG skin file.

     

    Click the Paste button.

    Step 30

31. Open the pasted prefs_button.gif file in Paint.

     

    Double-click the prefs_button.gif list item.

    Step 31

32. We have Zoomed the image for you.

     

    Notice that this image differs from the standard Preferences button that displays a gear and wrench.

    Step 32

33. Close the Paint window.

     

    Click the Close button.

    Step 33

34. Save the changes made to the skin.

     

    Click the Save button.

    Step 34

35. We 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 35

After completing this topic, you are able to customize Player images in a skin.

Table of Contents  Start Topic