Understand the Structure of a Skin


After completing this topic, you will be able to understand the structure of a skin.


Steps:

  1. Click the Styles folder.

    Step 1

  2. The Styles folder includes a Player Customization and a Gray skin. These skins are automatically created in the Library during installation.

     

    The Player Customization skin is an empty skin for you to customize.

     

    The Gray skin is a customized skin that uses uses a different color scheme for topic playback.

    Step 2

  3. Open the Player Customization skin to view the structure of an empty skin.

     

    Double-click the Player Customization tree item.

    Step 3

  4. Right-click the config.xml list item.

    Step 4

  5. Click the Open With menu.

    Click the Open With command.

    Step 5

  6. Select Notepad from the available Recommended Programs.

     

    Click the Notepad list item.

    Step 6

  7. If necessary, enable the Always use the selected program to open this kind of file option. It is already selected for you.

    Step 7

  8. Click the OK button.

    Step 8

  9. The config.xml file does not include settings. You place your settings between the <config> and </config> tags.

    Step 9

  10. Close the Notepad window.

     

    Click the Close button.

    Step 10

  11. Right-click the custom.css list item.

    Step 11

  12. Click the Open With menu.

    Click the Open With command.

    Step 12

  13. Notepad is already selected as the Recommended Program that will be used to open this type of file.

    Step 13

  14. Click the OK button to open the file with the default options.

    Step 14

  15. The custom.css file does not include settings.

    Step 15

  16. Close the Notepad window.

     

    Click the Close button.

    Step 16

  17. Double-click the lang list item.

    Step 17

  18. Open the en folder.

     

    Double-click the en list item.

    Step 18

  19. Double-click the resource.xml list item.

     

    Note: Each language folder includes a resource.xml file.

    Step 19

  20. The resource.xml file does not include settings. You place your settings between the <resources> and </resources> tags

    Step 20

  21. Close the Notepad window.

     

    Click the Close button.

    Step 21

  22. Close the Player Customization tab.

     

    Click the Close button.

    Step 22

  23. Open the customized Gray skin.

     

    Double-click the Gray list item.

    Step 23

  24. The root of the skin contains the customized graphics.

    Step 24

  25. Sort the files by type.

     

    Click the Type column header.

    Step 25

  26. Double-click the custom.css list item to open it in Notepad.

    Step 26

  27. Notice the three color settings added to the custom.css file.

     

    These settings control the color of the play mode name and Actions text link in the bubble header, and the background color of the Actions menu.

    Step 27

  28. Close the Notepad window.

     

    Click the Close button.

    Step 28

  29. Close the Gray skin package.

     

    Click the Close button.

    Step 29

After completing this topic, you are able to understand the structure of a skin.

Table of Contents  Start Topic