After completing this topic, you will be able to copy elements to a skin.
Steps:
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 1Open the custom.css file in the WSG skin in Notepad.
Double-click the custom.css list item.
Step 2Add some spacing under the comment line.
Click under the line of text.
Step 3Press [Enter].
Step 4You 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 5We 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 6Press [Enter] to start a new line.
Step 7Blank lines are ignored, so you can add as many lines between elements as you like.
Press [Enter] to add another blank line.
Step 8Leave the Notepad window open and switch to the Player_WSG tab.
Click the Player_WSG tab.
Step 9You are in the Customizable images folder. Move back to the root of the package.
Click the Up One Level button.
Step 10Open the custom.css file in Notepad.
Double-click the custom.css list item.
Step 11You 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 12You 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 13Press the [Shift] key and click after the }.
Step 14Copy the selection.
Click the Edit menu.
Step 15Click the Copy command.
Step 16We 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 17Click the Edit menu.
Step 18Click the Paste command.
Step 19Add a blank line to separate the element.
Press [Enter].
Step 20Press [Enter] again to add another line.
Step 21Switch back to the Player custom.css Notepad file.
Click in the Player custom.css Notepad file.
Step 22You want to change the color of the play mode buttons. Scroll down to the /* Outline w Playmodes ***/ section.
Click the Page down scrollbar.
Step 23Copy the comment line and the Mode button color elements.
Click before the text /* Outline w PlayModes.
Step 24Press the [Shift] key and click after the } above the text /*Mode button line color*/.
Step 25Copy the selected text.
Click the Edit menu.
Step 26Click the Copy command.
Step 27Switch to the WSG custom.css file.
Click in the WSG custom.css file.
Step 28Paste the copied text.
Click the Edit menu.
Step 29Click the Paste command.
Step 30Press ENTER to add a blank line at the end of the elements.
Press [Enter].
Step 31Press [Enter] to add another blank line.
Step 32We 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 33We have pasted the /*Bubble section and elements from the Player custom.css to the custom.css in the skin.
Step 34After completing this topic, you are able to copy elements to a skin.