|
|
|
Creating Custom Skins
A custom.zip file is available to help you become familiar with creating custom skins for the SkillSoft Course Player.
Extract the content of the custom.zip on to your desktop. A folder named Custom Skins Files displays. Use these files along with this documentation to learn how to customize SkillSoft Course Player skins to suit your needs.
Before you continue with this section, please review the previous sections of this document and the default.htm document.
The previous sections of this document give details on directory structures and an overall view of how skins work.
The default.htm file shows assets that can be changed in the SkillSoft Course Player version 5.0. The default.htm document is located in the Custom Skins Files\other documentation folder.
Assets and settings for the "custom" skin were copied from SkillSoft's sand skin in the following examples.
Directory Structure
|
From the Custom Skins Files, copy the custom folder and all of its contents to your skins directory. The tree directory structure should look like the image on the left. In this example, custom is the skin that is going to be used. The purpose for the HTML directory is to provide assets that will mimic the look of the SkillSoft Course Player when any HTML pages are displayed. You need to make a 796 x 54 pixeled back1.gif, by taking a screenshot of your completed skin and removing any buttons or course titles. See example, back1.psd in Custom Skins Files\PSDs. All assets (changed or not) must be the skins directory as shown. When the SkillSoft Course Player displays an HTML page it does not look for assets in other parent directories.
|
|
Under the img8x6 folder, there are sub-folders like the example to the left.
|
In each subfolder, there are images that may be changed. The examples below show some of the assets that may be changed in the player interface. To see all interface asset that can be change, open the default.htm document, located in Custom Skins Files\other documentation folder.
Default Player Look |
|
Sand Skin Look |
|
Recognizing the Skin
|
In the Custom Skins File, copy the courseinfo folder and place it in the content folder. Your directory structure should look like the image on the left. The courseinfo.properties file is in the courseinfo folder. This file directs the SkillSoft Course Player to what skin it uses, in this case the "custom" skin. Note: If you change the name of the custom folder, you must change the name in the courseinfo.properties file to match. |
Example of the courseinfo.properties file
#This file supplies default company properties, such as skin
# Change to a virtual directory starting with "/" if skins are relocated.
PlayerSkinToWear=../../skins/custom
SkillSoft Course Player Operation with Skins
|
The PlayerValues.properties file loads the SkillSoft default player first from the folder location shown on the left. The courseinfo.properties directs the player what skin to use. |
|
Another PlayerValues.properties file is placed in each skin. The SkillSoft Course Player will then paint the changes of this PlayerValues.properties over the default Player settings. The image on the left shows where the PlayerValues.properties would be for this custom skin. |
Load changed image sets into their appropriate folders, see example below.
Open the PlayerValues.properties in the custom skins folder. The rest of this document compares the relationship between the PlayerValues.properties and what changes affect different areas in the SkillSoft Course Player.
The # sign indicates that the following information is a comment only and does not effect the Player in any way.
If for some reason you want to change a property that is not in the playerValues.properties under the custom skin, open the PlayerValues.properties that is in the default player (see previous page) and search for it.
The following screenshots is the default SkillSoft Course Player. All other screenshots are from SkillSoft's alternative Sand skin, used to allow a comparison from SkillSoft's default player.
The following values change the attributes in the header panel.
The following values changes the attributes of the badge located at the end of the title bar.
The bevels are made up of 6 lines of different colors.
The following values change the colors of the 6 individual lines that make up the bevel line.
The following values changes the color of the "Approximate Duration" box in the Course Menu Panel.
The following values change the color of the Goal Box. Goals do not appear on all courses. It is highly recommended that you set the values for the Goal Box to the same values as CourseInfoBox and LearnerNameBox.
# ColorBox in Course Menu Info Goal
M_CourseInfoGoalBox_R=223
M_CourseInfoGoalBox_G=212
M_CourseInfoGoalBox_B=176
The following values changes the color of the Approximate Duration box in the Test Menu panel.
The following values change the color of the Navigation Panel. If you set the M_BookmarkButtonToolTip_FONTSTYLE=0 to 1, the Begin Course and Return to Bookmark text are bolded.
The following values change the background color of the feedback boxes.
Note: this does not include the background colors for RolePlay feedback boxes.
It is strongly recommended that you do not change the RolePlay feedback boxes. Below are the values for changing background colors for RolePlay feedback boxes if you must change them.
#Background Color for TextItem with background Color Box - used in Roleplay
# colored feedback text
M_ColorBox1=c6e8cf
M_ColorBox2=b9cef5
M_ColorBox3=e4cad1
The following values change the color of the Topic Screen background color and the highlighted line under # Transition Page Fonts affects the Lesson Overview title.
The following values are for the background color of the End of Course page, and normally are set to match the StartTopic values.
#Changes background color of the End Of Course page
M_EndCourse_R=246
M_EndCourse_G=246
M_EndCourse_B=223
The following values affect the logo in the header panel. Setting the width and height to zero removes the logo.
|
The logo.gif file is located in the directory shown on the left. |
Changing the hexadecimal values changes the button font colors. See the Done button example below.
HTML Pages
HTML pages requires several images that matches the current SkillSoft Course Player.
Current look in a regular SkillSoft Course Player 5.0 page.
HTML assets need to be in the following directory.
Replacing the header background with an image
In this example we will place this image into the header area. The image area allowed is 796 x 54 pixels.
The following value adds the above image into the header area.
The following example shows the values to remove the six beveled lines. Note that only 3 of the 6 lines are shown below. Beveled lines are also painted over the bottom 6 pixels of the header image.
Replacing the navigation background with images.
In this example, this image is placed into the navigation area. The image area allowed is 796 x 49 pixels.
The following value adds the above image into the navigation area.
In the following example shows the values to remove the six beveled lines.
Header and Navigation images are kept in the assets\img8x6\custom folder
The following values change the Customized Header.
The following values relate to the navigation buttons. It is STRONGLY recommended that you DO NOT change these values, as future additions to the SkillSoft Course Player may affect any location changes you make.
It is STRONGLY recommended that the following are not changed:
#Location of Next and Previous buttons
M_8x6GotoPrevButton_X=612
M_8x6GotoPrevButton_Y=6
M_8x6GotoNextButton_X=706
M_8x6GotoNextButton_Y=6
M_8x6NextTopicButton_X=746
M_8x6NextTopicButton_Y=6
M_8x6PrevTopicButton_X=572
M_8x6PrevTopicButton_Y=6
#Size of Next and Previous buttons
M_8x6NextTopicButton_WIDTH=40
M_8x6NextTopicButton_HEIGHT=40
M_8x6PrevTopicButton_WIDTH=40
M_8x6PrevTopicButton_HEIGHT=40
M_8x6GotoPrevButton_WIDTH=40
M_8x6GotoPrevButton_HEIGHT=40
M_8x6GotoNextButton_WIDTH=40
M_8x6GotoNextButton_HEIGHT=40
#Location/Size of Play Audio button and text
M_8x6AUDIO_PANEL_X=460
M_8x6AUDIO_PANEL_Y=1
M_8x6AUDIO_PANEL_WIDTH=130
M_8x6AUDIO_PANEL_HEIGHT=47
#Location/Size of Turn Off Audio button
M_8x6ToggleAudioButton_WIDTH=20
M_8x6ToggleAudioButton_HEIGHT=20
M_8x6ToggleAudioButton_X=0
M_8x6ToggleAudioButton_Y=6
#Location/Size of Turn Off Audio text
M_8x6ToggleAudioButtonToolTip_X=29
M_8x6ToggleAudioButtonToolTip_Y=11
M_8x6ToggleAudioButtonToolTip_WIDTH=120
M_8x6ToggleAudioButtonToolTip_HEIGHT=15