Templating Guide

The MediaLandscape Player is a highly customizable web application for viewing presentations. This guide explains how to perform that customization to make the Player look just how you want it to.

The steps are as follows. Only the first one is mandatory. The others are all optional.

Create a new template

Use Explorer to browse to the MediaLandscape templates folder. This is usually located at

   C:\Program Files\MediaLandscape\Mediasite Content Converter\templates

Inside that folder, you will see several standard templates like "DefaultEnglish", "VideoBig", "NoSlides", etc. Choose one and duplicate it via Copy and Paste. Change the folder name to something memorable with just letters and numbers, like "ChemistryLectures". We recommend that you do not edit the standard set of templates, but instead use them as starting points for your own templates.

Double-click on your newly created folder to view its contents. Locate the "template.xml" file and open it with WordPad. Inside, you will find a few details about the template followed by a list of all the files that comprise the template. Make the following changes to that file:

Then save and close this file. Your new template is ready to use.

Change the banner graphics and URLs

This is the most common request, and is the easiest to accomplish. Most of the templates contain a graphic called the "Banner" on the top of the player and another graphic called the "Advertisement" in the lower right. Each of these can be edited and can be linked to any site on the internet.

We recommend that you experiment on a real presentation and then redo your edits on the template. That way, you can simple hit Ctrl-R in your browser to reload the presentation and see the results of your work as you go along.

Open the "skin" folder inside of your template folder. Find the "banner.svg" file and open it with WordPad. This XML file usually contains two links pointing to http://www.media-landscape.com/. SVG files are quite similar to HTML files, but are intended for graphics instead of text. If you want to learn more about SVG, we recommend SVG Essentials published by O'Reilly.

The first is the TitleBanner.jpg which is typically 560x69 pixels in size and often represents the name of your institution. You can replace that file with a graphic of your own as long as the size is the same and the filename is spelled the same, including capitalization. Then, you can replace the "http://www.media-landscape.com/" with any website you like.

The VendorLogo.jpg is the smaller graphic in the upper right next to the "Help" button. This can be edited the same way as the TitleBanner.jpg.

Next, open the "advertisement.svg" file in WordPad. Just like the banner.svg file, this file contains a link to a JPG file and an URL. This JPG is called AdBanner.jpg and is usually 500x60 pixels in size.

NOTE: The graphics in the banner SVG files can be either JPG or SWF files. Macromedia Flash does not support other graphics files, like GIF or BMP or PNG, so if you have one of those, you will need to use a program like Photoshop to convert them.

Advanced users: If you add any new graphics files, like a SWF file, make sure to edit the template.xml file to tell it about the new file. The template.xml says which files are supposed to be copied to the output folder, so if any are missing or extraneous in that list, you will get error messages during conversion.

Edit the skin

If you want to change more than just the banners, you will need to own a copy of Macromedia Flash to edit the skin.fla file. This file is available in each template skin folder starting with Converter v1.3.0, or you can download a sample from http://www.media-landscape.com/skin.fla

This skin.fla file contains all of the graphical elements of the player (except for the Thumbnail and Bookmark tabs). You may rearrange them however you choose. See an example of one of the MediaLandscape developers making a new skin here: http://www.media-landscape.com/demos/YAPC/

Documentation for the skin elements is here: http://www.media-landscape.com/Skin.html

When you are finished editing, publish your skin into a skin.swf file and copy it back into your template skin folder, overwriting the original copy. Note that the original might have been called something else like "skin_audioonly.swf". Be sure to name your new file exactly like the old one.