Customizing kaltura logo and kaltura watermark

Tue, 03/23/2010 - 11:29 — Trocolo

You can easily customize your KDP player with your own logos. Specifically, the kaltura logo located on the lower right corner, and the watermark.

To customize the kaltura logo, you need a picture, the KDP project files (you can download it from http://www.kaltura.org/sites/default/files/releases/kdp_v2.6.2.tgz) and a Flex compiler.

Open the KDP project with a Flex editor (Flex Builder for example). Edit the kdp_skin_aps_v5.css file in this line:

Button.kalturaLogoLight{
        skin: Embed(skinClass='buttonsTransparentButton');
        icon: Embed(skinClass="Kaltura_icon_light");
}
Button.kalturaLogoDark{
        skin: Embed(skinClass='buttonsTransparentButton');
        icon: Embed(skinClass="Kaltura_icon_dark");
}

Change the "icon skinClass" attribute with your picture source:

Button.kalturaLogoLight{
        skin: Embed(skinClass='buttonsTransparentButton');
        icon: Embed(source="MY_CUSTOM_LOGO.png");
}
Button.kalturaLogoDark{
        skin: Embed(skinClass='buttonsTransparentButton');
        icon: Embed(source="MY_CUSTOM_LOGO.png");
}

Compile the project. You should now have a file called "kdp_skin_aps_v5.swf". Copy it into /kalturaCE/content/uiconf/kaltura/appstudio/v.1

Go to your kalturaCE directory and open the .xml file of your KDP player. For example, if you wanto to change the logo in the KMC dark player, you have to edit the player_dark.xml in content/uiconf/kaltura/kmc/embedplayers.

Find the label with id "AppStudioTemplate" and replace the skinPath with your new kdp_skin_aps_v5.swf file.

  <layout layoutId="AppStudioTemplate" skinPath="/kalturaCE/content/uiconf/kaltura/appstudio/v.1/kdp_skin_aps_v1.swf" playerName="default player light">
  <layout layoutId="AppStudioTemplate" skinPath="/kalturaCE/content/uiconf/kaltura/appstudio/v.1/kdp_skin_aps_v5.swf" playerName="default player light">

Now, you have changed the kaltura logo on the lower right corner,

To change the watermark, find the label in the .xml file (uiconf.xml if you want to change a custom player) and edit the k_watermark_path with your watermark picture path:

<waterMark height="100%" id="watermark"
                k_path="watermarks/WaterMarkLoader.swf"
                k_watermark_path="http://localhost/kalturaCE/content/uiconf/kaltura/generic/MY_WATERMARK.png"
                k_watermark_position="bottomLeft" styleName="centered"
                width="100%" k_watermark_padding="0" />
‹ Go to "Chromeless KDP - Player with no components to be controlled via API only"Go to Parent PageExtending KDP: Guide to creating Flash (AS3) based KDP Modules ›
Back to top

Comments

customize the kaltura logo

Mon, 05/03/2010 - 09:48 — Ranjeet

Hi Trocolo
I went through all the steps suggested for changing the kaltura logo,but failed to change it.We applied the following steps:
1.opened the kdp project with Flex builder and edited the kdp_skin_aps_v5.css file and compiled it.
2.Copied the kdp_skin_aps_v5.swf file in /kalturaCE/content/uiconf/kaltura/appstudio/v.1
3.Changed in the xml file named player_dark_400_335.xml because I could not found player_dark.xml in my kalturaCE.
One new thing that I found is that there is no effect of removing/placing the kdp_skin_aps_v5.swf file /kalturaCE/content/uiconf/kaltura/appstudio/v.1.Same thing is with xml file it also does not reflect to removal of skinPath attribute of layout element.In my xml file layoutId is blank.
I am using using kdp v2.6.2 and kalturaCE v1.5 on windows xp xampp 1.7.1

Please help me.
Thanks a lot.

Out of date instructions

Sun, 08/07/2011 - 06:13 — kaotic69

Hello, I am also having problems updating the logos. It seems these instructions are a bit out of date. The XML files they mention are not in the same locations as described and I'm not ever sure have the same names anymore... Also what they say to look for in the file doesn't seem to appear to exist anymore...

I'm probably just doing it wrong and looking in the wrong places but maybe someone can shed some light.

Thank you,
Travis