There are numerous ways you can customize the Player interface and the topic playback, including changing the appearance of the play modes, changing the logo, changing the search, preferences and help icons, changing the "For Example" text in string inputs, and suppressing the scores in Know It? mode. Additionally, you can change style sheet elements such as dividers, background colors or text colors.

You can customize the look of the Player interface by creating a customization package (also known as a skin) that contains all of your customized settings and images. During publishing, the elements (settings and images) in a skin override the corresponding elements in the Player publishing style.

A typical skin contains four types of components:  

• A custom.css file with settings for changing various visual elements of the Player.
   
• A config.xml file with settings for changing the functional behavior and appearance of Player elements.
   
• A language specific resource.xml files with the names of user interface elements that you can customize in the \lang\<language> folder.
   
• Images (logos, buttons) you have customized for your Player output.

You should only customize these files in a skin. These customizations are preserved when you upgrade your software. Customizations made in the Player publishing style are overwritten during upgrade and are not supported.

It is important to note that if you need to edit an .xml file, the file must be saved with UTF-8 encoding. A common editor to use is Notepad, but any editor that can save files with UTF-8 encoding is acceptable.

Warning! If you have customizations created in Player styles prior to the implementation of skins, you must recreate them in a skin. Old customizations are overwritten during upgrade. Going forward, the new customizations are preserved.

Customization Overview

There are 5 basic steps for customizing the Player.

1. Create a skin or use the Player Customization package in the Library.
    
2. Open the installed Player publishing style. Copy the syntax and settings for the elements you want to customize from the custom.css, config.xml, and resources.xml documents and place them in the corresponding documents in the skin.
    
3. Copy the images you want to customize from the Customizable image folder in Player package to the root of the skin.
    
4. Make the changes to the attributes and images in the skin.
    
5. Optionally, select a skin in the Player category in the Options dialog box to use as a default for previewing and publishing content. See Player Defaults in the Set Developer Defaults section of the Get Started Using the Developer chapter for more information.

Note: You can export a skin to transfer it to another Library.

Create a skin

The Developer installs with an empty skin called Player Customization located in the System/Publishing/Styles folder. You can copy elements and graphics from the Player style into this skin or create a new skin.

Note: You can rename the Player Customization file.

The Player Customization package and all new skins contain a folder structure similar to the Player style with the following empty configuration files for creating your customizations: 

• an empty custom.css file
   
• an empty config.xml file
   
• a lang folder with separate subfolders, for each language, that each contain an empty resource.xml file

You can create a single skin or multiple skins, with each one producing a different visual appearance. For example, if you need to create content for different organizations that have their own color schemes, preferred images, and logos, you can create multiple “skins” and choose the desired skin at publishing time.

You can save a skin to any folder. Skins saved to the Styles folder automatically appear in the Skin list in the Publishing Wizard when you publish a Player, but you can browse to other locations when publishing. Once you select a skin from another folder for previewing or publishing, it remains on the Skin list, regardless of its folder location.

To create a skin:

1. On the File menu, point to  New and choose  Skin.
    
2. On the File menu, choose  Save.
    
3. Type a name for the document.
    
4. Click Save.

Copy Elements to the skin
When you copy customizable elements from the Player style, make sure you copy the entire piece of element code. In this example, you must copy the element name (.header) and everything between the { and } brackets. Additionally, you can copy the comments between /* and */. This comment helps you identify the element in the code.

/* TOC header */
.header
{
background-color: #FFFFFF;
height: 60px;
position: relative;
}

When copying a configsection from the config.xml into the config.xml of the skin, make sure you copy the <configsectonname="section_name">, the </configsection> and everything in between the two tags. Anything copied must be psted within the <config> and </config> tags in the config.xml of the skin.

<config>
<!--<configsection name="section_name">
  <item name="setting_name">setting_value</item>
</configsection>-->
</config>
 

Note: Question and Assessment customizations are not supported a skin. These customizations are made in the question and assessment templates and are overwritten on upgrade. You should document these customizations so you can easily re-apply them after software upgrade.

Note: You can customtize InfoBlocks by editing these elements in the config.xml file; InfoWidth: 400, InfoHeight: 300, InfoWidth2: 640, InfoHeight2: 480,

Table of Contents  Back