Customizing UPK outputs (Part 2 - Player)
- by [email protected]
There are a few things that can be done to give the Player output a personalized look to match your corporate branding. In my previous post, I talked about changing the logo. In addition to the logo, you can change the graphic in the heading, button colors, border colors and many other items.
Prior to making any customizations, I strongly recommend making a copy of the existing Player style. This will give you a backup in case things go wrong.
I'd also recommend that you create your own brand. This way, when you install the newest updates from us, your brand will remain intact. Creating your own brand is pretty easy.
Make sure you have modify permissions on the publishing styles directory, if you are using a multi-user installation.
Under the Publishing/Styles folder, create a new folder with your company name.
Copy all the publishing styles from the UPK folder to your newly created folder. Now, when you go through the Publishing wizard, you will have two categories to choose from: the UPK category or your custom category.
Now, for updating the Player output. First, the graphic that appears on the right hand side of the Player.
If you're using a multi-user installation, check out the player style from your custom brand.
Open the player style.
Open the img folder.
The file named "banner_image.png" represents the graphic that appears on the right hand side of the player. It is currently sized at 425 x 54. Try to keep your graphic about the same size.
Rename your graphic file to be "banner_image.png", and drag it into the img folder.
Save the package.
Check in the package if you are in a multi-user installation.
You've just updated the banner heading!
Next, let's work on updating some of the other colors in the player. All the customizable areas are located in the skin.css file which is in the root of the Player style. Many of our customers update the colors to match their own theme. You don't have to be a programmer to make these changes, honest. :)
To change the colors in the player:
Make a copy of the original skin.css file. (This is to make sure you have a working version to revert to, in case something goes wrong.)
Open the skin.css file from the Player package. You can edit it using Notepad.
Make the desired changes.
Save the file.
Save the package.
Publish to view your new changes.
When you open the skin.css, you will see groupings like this:
.headerDivbar
{
height: 21px;
background-color: #CDE2FD;
}
Change the value of the background-color to the color of your choice. Note that you cannot use "red" as a color, but rather you should enter the hexadecimal color code. If you don't know the color code, search the web for "hexadecimal colors" and you'll find many sites to provide the information.
Here are a few of the variables that you can update.
Heading:
.headerDivbar -this changes the color of the banner that appears under the graphic
Button colors:
.navCellOn - changes the color of the mode buttons when your mouse is hovering on them.
.navCellOff - changes the color of the mode buttons when the mouse is not over them
Lines:
.thorizontal - this is the color of the horizontal lines surrounding the outline
.tvertical - this is the color of the vertical lines on the left and right margin in the outline.
.tsep - this is the color of the line that separates the outline from the content area
Search frame:
.tocSearchColor - this is the color of the search area
.tocFrameText - this is the background color of the TOC tree.
Hint: If you want to try out the changes prior to updating the style, you can update the skin.css in some content you've already published for the player (it's located in the css folder of the player package). This way, you can immediately see the changes without going through publishing. Once you're happy with the changes, update the skin.css in player style.
Want to customize more? Refer to the "Customizing the Player" section of the Content Development manual for more details on all the options in the skin.css that can be changed, and pictures of what each variable controls.
I'd love to see how you've customized the player for your corporate needs. Also, if there are other areas of the player you'd like to modify but have not been able to, let us know. Feel free to share your thoughts in the comments.
--Maria Cozzolino, Manager of Requirements & UI Design for UPK
