After completing this topic, you will be able to customize style elements in the Player.
Steps:
We have created a new publishing style category named WSG and pasted copies of the Player, System Process, and Training Guide publishing projects to it.
Step 1Double-click the Player_WSG publishing project to open it.
Step 2The publishing project document opens in the Package Editor.
Step 3To replace a player image, open the img folder.
Double-click the img folder.
Step 4To change a player image, you need to replace the original graphic file in the publishing project with a graphic of the same name.
If you are replacing an image in the actionbar.png file, you will need to size the image to the same size it occupies on the bar.
In this example, you will change the graphic used for the Preferences button in the Player. The Preferences button is part of the actionbar image and is sized as 16 x 16 pixels.
Step 5Open the actionbar.png file in a graphics editor.
Double-click the actionbar.png file.
Step 6We have opened the actionbar.png file in a graphic application.
Step 7We have also opened the new preferences image, which is a transparent gif file.
Step 8You can remove the image you are trying to replace from the actionbar before adding the new image, or you can cover the existing image with the new image.
We have removed the original image from the actionbar image.
Note: The new image must be placed in the same sequential position as the replaced image.
Step 9Copy the new image.
Click the Copy button.
Step 10Paste the image to the actionbar.png file.
Click the Edit menu.
Step 11Point to the Paste command.
Step 12Paste the image as a new selection.
Click the As New Selection command.
Step 13The new image must be placed in the same sequential position as the replaced image.
We have moved the image to the original position of the Preferences button.
Step 14We will save the changes to the actionbar.png graphic file to the custom Player_WSG publishing style, overwriting the existing file.
Step 15Move back to the root of the publishing project.
Click the Up One Level button.
Step 16You can change the look and feel of the Player by customizing the stylesheet elements in the skin.css file.
To change the elements, open the skin.css file from the Player publishing project and edit the file.
Step 17You can open the skin.css file directly from the publishing package or copy it to you desktop. Open the file in Notepad.
Right-click the skin.css file.
Step 18Click the Open With list item.
Step 19Click the Select the program from a list option.
Step 20Click the OK button.
Step 21Click the OK button to open the file in Notepad.
Step 22Replace the color of the Player Mode buttons. Select the background color value for the .navCellOff element.
Click to the left of the "3" in the background-color value for the .navCellOff element.
Step 23Press the [Shift] key and click after the "2" in the field.
Step 24Enter the desired information into the field. Enter "CC6699".
Step 25We will change the color of the .navCellOn element to FF66FF for you.
Step 26Close and save the skin.css file.
Click the Close button.
Step 27Click the Yes button to save the changes.
Step 28Save the publishing project.
Click the Save button.
Step 29Close the publishing project.
Click the Close button.
Step 30Publish the selected section.
Click the Publish button.
Step 31We have jumped to the Advanced Publishing Options page in the Publishing Wizard and selected the WSG category.
Step 32We will publish the Player and LMS deployment and launch the Player.
Step 33Notice the color of the playback mode buttons. This color is set in the .navCellOff element.
Step 34Notice the color of the play mode button when the mouse is over the button. This color is set in the .navCellOn element.
Step 35Notice the new Preferences icon next to the ? button in the header.
Step 36After completing this topic, you are able to customize style elements in the Player.