Copy Elements to the Skin

After completing this topic, you will be able to copy elements to a skin.

Steps:

1. You want to make three visual changes to the Player. You will copy the elements so that you can customize

    

   - the divider lines that appear between and around the Table of Contents and Concept panes.

    

   - the color of the play mode buttons as they appear in the Player and when you point to them (hover over them).

    

   - the font and font color of the play mode text in the bubble header.

    

   To make these changes, you must first copy the related elements from the Player custom.css file to the custom.css file in the WSG custom skin.

   Step 1

2. Open the custom.css file in the WSG skin in Notepad.

    

   Double-click the custom.css list item.

   Step 2

3. Add some spacing under the comment line.

    

   Click under the line of text.

   Step 3

4. Press [Enter].

   Step 4

5. You can type comments into the skin to describe the changes.

    

   Notice the comment in the first line of the file. Comments start with the symbols /* and end with */.

    

   Any text or symbols can be placed within the begin and end symbols and comments can span multiple lines.

   Step 5

6. We have added the comment for you.

    

   You can add as many asterisks as you wish before or after the comment text to distinguish the comment. In this example, we added three asterisks after the comment.

   Step 6

7. Press [Enter] to start a new line.

   Step 7

8. Blank lines are ignored, so you can add as many lines between elements as you like.

    

   Press [Enter] to add another blank line.

   Step 8

9. Leave the Notepad window open and switch to the Player_WSG tab.

    

   Click the Player_WSG tab.

   Step 9

10. You are in the Customizable images folder. Move back to the root of the package.

     

    Click the Up One Level button.

    Step 10

11. Open the custom.css file in Notepad.

     

    Double-click the custom.css list item.

    Step 11

12. You want to customize the divider lines that appear between and around the Table of Contents and the Concept pane in the Player.

     

    You will copy the following comment line, element, and element values, including the final closing bracket in your selection.

     

    /* Divider lines */

    .background

    {

    background-color: #94B8E9;

    border-color: #94B8E9;

    }

    Step 12

13. You do not need to include the comment line, but we are going to include it to explain the element.

     

    Note: If you do not include the comment line for the section from the original custom.css file, you can type your own comment line in the skin.

     

    Click before the /* Divider lines */ text.

    Step 13

14. Press the [Shift] key and click after the }.

    Step 14

15. Copy the selection.

     

    Click the Edit menu.

    Step 15

16. Click the Copy command.

    Step 16

17. We have displayed the custom.css from the WSG skin for you.

     

    You will paste the content you copied from the Player_WSG custom.css file.

    Step 17

18. Click the Edit menu.

    Step 18

19. Click the Paste command.

    Step 19

20. Add a blank line to separate the element.

     

    Press [Enter].

    Step 20

21. Press [Enter] again to add another line.

    Step 21

22. Switch back to the Player custom.css Notepad file.

     

    Click in the Player custom.css Notepad file.

    Step 22

23. You want to change the color of the play mode buttons. Scroll down to the /* Outline w Playmodes ***/ section.

     

    Click the Page down scrollbar.

    Step 23

24. Copy the comment line and the Mode button color elements.

     

    Click before the text /* Outline w PlayModes.

    Step 24

25. Press the [Shift] key and click after the } above the text /*Mode button line color*/.

    Step 25

26. Copy the selected text.

     

    Click the Edit menu.

    Step 26

27. Click the Copy command.

    Step 27

28. Switch to the WSG custom.css file.

     

    Click in the WSG custom.css file.

    Step 28

29. Paste the copied text.

     

    Click the Edit menu.

    Step 29

30. Click the Paste command.

    Step 30

31. Press ENTER to add a blank line at the end of the elements.

     

    Press [Enter].

    Step 31

32. Press [Enter] to add another blank line.

    Step 32

33. We have switched to the custom.css file in the Player package.

     

    We have copied the /*Bubble section and elements so that we can change the bubble header text color and font in the skin.

    Step 33

34. We have pasted the /*Bubble section and elements from the Player custom.css to the custom.css in the skin.

    Step 34

After completing this topic, you are able to copy elements to a skin.

Table of Contents  Start Topic