Polycom Video Media Center (VMC) 1000 Branding Guide

Transcription

1 Polycom Video Media Center (VMC) 1000 Branding Guide 2.0 July B

2 Trademark Information Polycom, the Triangles logo, ReadiManager, SoundPoint, SoundStation, ViaVideo, VoiceStation, Vortex, and VSX are registered trademarks of Polycom, Inc. Convene, Global Management System, ipower, MGC, People+Content, People On Content, Polycom Conference Suite, Polycom Converged Management Application (CMA ), Polycom Distributed Media Application (DMA ), Polycom HD Voice, Polycom PathNavigator, Polycom VideoPlus, Polycom VoicePlus, PVX, RAS, ReadiConvene, RMX 2000, RSS, V2iU, VBP, VS4000, and VTX are trademarks of Polycom, Inc. All other trademarks are the property of their respective owners. Patent Information The accompanying product is protected by one or more U.S. and foreign patents and/or pending patent applications held by Polycom, Inc Polycom, Inc. All rights reserved. Polycom, Inc Willow Road Pleasanton, CA USA No part of this document may be reproduced or transmitted in any form or by any means, electronic or mechanical, for any purpose, without the express written permission of Polycom, Inc. Under the law, reproducing includes translating into another language or format. As between the parties, Polycom, Inc., retains title to and ownership of all proprietary rights with respect to the software contained within its products. The software is protected by United States copyright laws and international treaty provision. Therefore, you must treat the software like any other copyrighted material (e.g., a book or sound recording). Every effort has been made to ensure that the information in this manual is accurate. Polycom, Inc., is not responsible for printing or clerical errors. Information in this document is subject to change without notice. ii

3 Contents Contents 1 Branding Overview What is Branding? Polycom VMC 1000 Branding Architecture New and Classic Portal Branding Base Skinning Domain-Level Branding Polycom VMC 1000 Default User Interface Features of Polycom VMC 1000 Version 2.0 Viewer Portal Java Architecture with Velocity Markup Language Benefits of a Template-Based Architecture Directory Structure and Pathnames Polycom VMC 1000 Directory Structures Default UI Directory Structure The Images Directory Structure The CSS Directory The Resources Directory Structure Precedence Model VMC 2.0 Viewer Portal Sitemap Polycom VMC 1000 Pages Home Page Header Home Calendar Access Code Favorites My Videos Add Videos FMA Carousel Jukebox User Configuration Pages Login Page User Registration Page Edit Profile Page Polycom, Inc. iii

4 Polycom VMC 1000 Branding Guide Player Page Navigating the Player Details Comments Resizing and Moving Content Player Controls Program Finished Sharing Share/Trim Link Embed Before You Begin Branding Creating a New Layout Directory Creating a New Images Directory Putting Your Server in Development Mode Testing Your Polycom VMC New Viewer Portal Original Home Page Classic Viewer Portal Original Home Page Branding the 2.0 Viewer Portal Branding Overview Changing the Viewer Portal FMA Changing the Logo Using a.gif Logo Changing Layout Elements Skin Packaging Classic Viewer Portal Structure Polycom VMC 1000 Pages Home Page Edit Profile Page Login Page User Registration Page Private Code Page Search Results Page Favorites Page Logout Page Single Category Details Page Single Channel Details Page iv Polycom, Inc.

5 Contents Single Program Details Page Program Player Page Add Review Page Calendar Page Branding Your Classic UI Which Files Render UI Elements Branding the Home Page Examples Starting From the Classic UI as Shipped Changing the Logo Using a.gif Logo Changing the Header Background Changing the Tab Graphics Changing the Menu Background Color Changing the Page Background Color Adding Text to the Header Changing the Footer Text Branding the Player Page Examples Three States of the Player Page Starting From the Original Player Page Changing the Player Page Background Color Changing the Player Page Logo Changing the Content Pane Border Changing the Tab Color Using CSS to Define Look of the Player Page About the Player Page Defining the Look and Feel of the Player Page Creating a CSS player.css Defining a CSS Layout Deleting a CSS Layout Creating a CSS Layout Repository to Add to a CSS Layout To add a CSS Layout Repository to a CSS Layout Editing a CSS Layout Repository Deleting a CSS Layout Repository Applying the CSS Layout to the Player Page Polycom, Inc. v

6 Polycom VMC 1000 Branding Guide vi Polycom, Inc.

7 About This Guide This introduction provides a brief overview of the Polycom VMC 1000 Branding Guide, describes the conventions used in this manual, and explains how to get additional information or support. Purpose The Polycom VMC 1000 Branding Guide describes the process of changing the Polycom VMC 1000 User Interface (UI) for both the default version 2.0 Viewer Portal and the Classic portal. The guide provides site maps, code references, and examples of branding tasks. Audience This guide is for customers with knowledge of web design, HTML, Cascading Style Sheets (CSS), and/or Velocity Markup manipulations. Polycom, Inc. vii

8 Polycom VMC 1000 Branding Guide Documentation Set Documentation Set The Polycom VMC 1000 Branding Guide is part of the Polycom VMC 1000 documentation set, which includes: The Polycom VMC 1000 Branding Guide - This document. The Polycom VMC 1000 Administrator Guide - Describes how to use the Administrative Portal and associated tools to administer and configure the Polycom VMC 1000 appliance and Polycom VMC 1000 domains. The Polycom VMC 1000 Getting Started Guide- Describes how to set up and configure the Polycom VMC 1000 appliance. The Polycom VMC 1000 Release Notes - Describes the product release. This document also identifies known problems and their workarounds, information not covered in the manuals or that has been modified since publication, as well as problems that have been fixed since previous releases. Organization of this Guide This guide begins by outlining an overview of the Polycom VMC 1000 directory structure. It then describes the features and branding possibilities on the Polycom VMC 1000 version 2.0 Viewer Portal. The features and branding of the Polycom VMC 1000 Classic Viewer Portal are then detailed. Related Reading This guide assumes a basic understanding of CSS, Java and Velocity Markup language (VM). For additional information, refer to the following books: O Reilly Series CSS, The Definitive Guide by Eric Meyer, O Reilly Media, Nov CSS Cookbook by Christopher Schmitt, O Reilly Media, Oct Bulletproof Web Design by Dan Cederholm, New Riders, Aug Apache Velocity Markup documentation: viii Polycom, Inc.

9 Customer Support About This Guide Customer Support Recognizing that technology alone cannot solve today s complex challenges, Polycom Global Services provides the industry s best technical support staff and programs to let you concentrate on the task at hand. Polycom users can select from a variety of support solutions to obtain the level of support that best meets their needs. Before contacting your Polycom Global Services representative for technical assistance, gather as much information as possible about your situation. Any information you can provide helps us assess the problem and develop an appropriate solution. Polycom Global Services Telephone If you have comments or questions about Polycom or if you need technical assistance, contact: Polycom Global Services in U.S.A Denver metro or outside U.S.A Polycom, Inc. ix

10 Polycom VMC 1000 Branding Guide Customer Support x Polycom, Inc.

11 1 Branding Overview This chapter contains the following sections: What is Branding? Polycom VMC 1000 Default User Interface Features of Polycom VMC 1000 Version 2.0 Viewer Portal What is Branding? A website should offer a consistent look and feel to its users. The colors, logos, navigation style, and the placement of links all contribute to the user s experience in the site. This user interface (UI) reflects your corporate culture, giving visitors to your website a sense of who you are and what you do. Changing a site s UI to match your firm s look and feel is called branding. Polycom VMC 1000 Branding Architecture The Polycom VMC 1000 architecture includes three distinct levels at which users can perform branding: New and Classic Portal Branding The Polycom VMC 2.0 introduces a new Viewer Portal, described below. However, each VMC domain can launch a Classic Viewer Portal in place of the new Viewer Portal. The branding processes for the New and Classic Viewer Portals differ significantly. The portals are discussed separately in the second half of this guide. Polycom, Inc. 1

12 Polycom VMC 1000 Branding Guide Polycom VMC 1000 Default User Interface Base Skinning The Polycom VMC 1000 can be configured with a base skinning that will apply across an organization. The base skinning determines certain logos and images in both the New and Classic Viewer Portals. The base skinning is largely configured in two directory locations on the Polycom VMC 1000 appliance: D:\Qumu\deploy\viewerportal.war\images\overrides D:\Qumu\deploy\viewerportal.war\WEB-INF\skinresources\overrides The first step in the branding process is the creation of new overrides. This process is detailed in the following chapters of this book. Domain-Level Branding After creating and configuring new overrides, an organization can (if necessary) create domain-level branding changes. Domain-level branding may be necessary for individual departments or offices within an organization. Please note that when this guide makes reference to domain-level branding, it is not referring to the configuration that determines whether a given domain uses the Version 2.0 Viewer Portal or the Classic Viewer Portal. Polycom VMC 1000 Default User Interface Your Polycom VMC 1000 arrives with a preconfigured Default Domain. The Viewer Portal associated with this Domain is a Polycom-branded Version 2.0 Viewer Portal: 2 Polycom, Inc.

13 Polycom VMC 1000 Default User Interface Branding Overview Polycom, Inc. 3

14 Polycom VMC 1000 Branding Guide Features of Polycom VMC 1000 Version 2.0 Viewer Portal The following figure shows a page with the Classic UI: Features of Polycom VMC 1000 Version 2.0 Viewer Portal Looking at the new UI, you can immediately see some of the changes we made in the 2.0 release. These changes include: New Jukebox Feature New Carousel Feature New Header for Organization New User Interface Scheme Keyframe Extraction for Video Content Silverlight Interfaces Simpler Commenting and Rating Functionality Employee-Generated Content upload from the Social Video Portal However, all features from pre-2.0 releases are preserved in the Classic Viewer Portal, particularly its extensive branding possibilities. 4 Polycom, Inc.

15 Features of Polycom VMC 1000 Version 2.0 Viewer Portal Branding Overview Java Architecture with Velocity Markup Language The Polycom VCC is based upon a JBoss-based architecture, and uses VM to create templates, which can be easily customized. For more information on using VM, see Benefits of a Template-Based Architecture One very powerful feature of our classic architecture is that it is template-based. The Classic Polycom VMC 1000 includes templates for all the pages in the domain; all you need do is change the elements or properties to brand the site as your own. You can also create your own templates for additional pages. (This document provides instruction on basic branding only. You will need to refer to VM and Java documentation in order to do more advanced tasks such as creating new pages and new templates.) Polycom, Inc. 5

16 Polycom VMC 1000 Branding Guide Features of Polycom VMC 1000 Version 2.0 Viewer Portal 6 Polycom, Inc.

17 2 Directory Structure and Pathnames This chapter contains the following sections: Polycom VMC 1000 Directory Structures Precedence Model The information outlined below may apply to both the 2.0 Viewer Portal and the Classic Viewer Portal. Polycom VMC 1000 Directory Structures Your Polycom VMC 1000 Viewer Portal, part of the Polycom Platform Modules package, is located by default with the root files in D:\Qumu. Most of the files you will use in that directory reside in D:\Qumu\deploy\viewerportal.war. NOTE: The pathways for all files and folders that reside within viewerportal.war will be referred to within this document beginning with the subdirectory beneath viewerportal.war. For example: D:\Qumu\deploy\viewerportal.war\images\overrides will be referred to as images\overrides. Create a directory for your company, which is referred to in this document as Your Company. For details on creating this directory, see Chapter 7, Before You Begin Branding. There is one set of files and directories for the Default Polycom UI. If you decide to use the Default UI as the basis of your user interface, you only need to copy and modify the files in the Default UI directory structure (see Default UI Directory Structure on page 8). Polycom, Inc. 7

18 Polycom VMC 1000 Branding Guide Polycom VMC 1000 Directory Structures Default UI Directory Structure The base branding resides in two overrides directory. Copy files from certain directories, move them into your own, custom directories, and modify files there. The directories you work within most often are: viewerportal.war > WEB-INF > templates > layout > overrides viewerportal.war > WEB-INF > templates > skinresources > overrides 8 Polycom, Inc.

19 Polycom VMC 1000 Directory Structures Directory Structure and Pathnames The Images Directory Structure The images\overrides\vmc directory contains the items shown below. Copy these images over to your company s override folder (see Chapter 7, Before You Begin Branding. ). The CSS Directory The viewerportal.war\web-inf\templates\layout\overrides\vmc\css directory contains the items shown below. Make a custom CSS directory to make all CSS file changes (see Chapter 7, Before You Begin Branding. ) Polycom, Inc. 9

20 Polycom VMC 1000 Branding Guide Precedence Model The Resources Directory Structure For the sake of caution and backups, make a copy of the ViewerResources.properties file in your D:\Qumu\deploy\viewerportal.war \WEB-INF\resources directory. Be sure to make your modifications in the copied file; do not change the original. Precedence Model Your Polycom VMC 1000 works with a precedence model. First, a set of overrides exist within the WEB-INF\templates\layout, WEB-INF\templates\skinresources, and images folders. The Polycom VMC 1000 draws on the VMC overrides folders. Templates, code and CSS located in WEB-INF\templates\layout\default directories are executed, and image files in images\default are served. If you do add CSS or HTML code to domain-level CUSTOM directories using the same filenames as those in the DEFAULT directories, the system uses your files in place of the files from the DEFAULT directory. Your CUSTOM files take precedence over the DEFAULT files. NOTE: In order for the system to use your file instead of the one in the DEFAULT directory, you must name your file in the CUSTOM directory with the exact same name as the one in the DEFAULT directory. 10 Polycom, Inc.

21 3 VMC 2.0 Viewer Portal Sitemap This chapter contains the following sections and subsections: Polycom VMC 1000 Pages Home Page Header FMA Carousel Jukebox User Configuration Pages Login Page User Registration Page Edit Profile Page Player Page Navigating the Player Sharing Polycom VMC 1000 Pages The Version 2.0 Viewer Portal involves a completely new user interface. It is crucial to learn how to navigate this interface prior to branding. This chapter assumes users are using a compatible browser with Silverlight 3 installed. The following points detail functionality that is not supported for each alternative: Flash with Silverlight 3 Installed: Slides Multiple videos in one player screen Flash without Silverlight 3 Installed: Polycom, Inc. 11

22 Polycom VMC 1000 Branding Guide Polycom VMC 1000 Pages Slides Multiple Videos in one player screen Carousel WMP without Silverlight 3 Installed: Full screen Multiple videos in one player screen Rating Sharing/Trimming Linking Embedding 12 Polycom, Inc.

23 Home Page VMC 2.0 Viewer Portal Sitemap Home Page The Home page is the first page that your Program Browser visitors see. The 2.0 UI Home page looks like this: Each element will be described separately in a subsequent section. Header The upper navigation area of the Home Page includes a header and a login link. The header is consistent across many pages within the Viewer Portal.. Polycom, Inc. 13

24 Polycom VMC 1000 Branding Guide Home Page Home The Home button brings the viewer back to the home page. Calendar The Calendar button brings up the Live Calendar. Access Code The Access Code button opens the Enter Access Code drop-down: Access Codes can be configured by administrators for additional security and viewer-specific content delivery. For more information, consult the Polycom VMC 1000 Administrator Guide. Favorites The Favorites button opens the Favorites drop-down: Viewers can add a video by clicking the Add to Favorites option on the video player. Viewers can also subscribe to a video from this menu. See the Polycom VMC 1000 Administrator Guide for information on enabling favorites and subscriptions. 14 Polycom, Inc.

25 Home Page VMC 2.0 Viewer Portal Sitemap My Videos The My Videos button brings up the My Videos page. All videos authored by the given user will appear. Polycom, Inc. 15

26 Polycom VMC 1000 Branding Guide Home Page Add Videos If employee-generated content is enabled for the user and the domain, the Add Video button brings up the Add a Program screen. Once a video is uploaded from this page, it appears on the My Videos page. Information about configuring and using the Social Video Portal can be found in the Polycom VMC 1000 Administrators Guide. 16 Polycom, Inc.

27 Home Page VMC 2.0 Viewer Portal Sitemap FMA Below the header is the Flexible Message Area (FMA). The FMA is a region on the Home Page that can be populated with text or HTML. It is fully customizable. The FMA can be changed through the Administrative Portal. For more information, consult the following chapter, Branding the 2.0 Viewer Portal. Carousel The carousel is accessible on the home page below the FMA. The carousel is a navigable tool that allows easy access to certain media assets. The carousel contains administrator-indicated Featured content, content that is Upcoming for live broadcast, broadcasts that are Live Now, and Related Programs (when the player is in use). Polycom, Inc. 17

28 Polycom VMC 1000 Branding Guide Home Page Mousing over a carousel item brings up a informational pop-up: The screen displays title, date, runtime, and short description of the video asset. It also allows viewers to rate the program (by selecting the stars) and add it as a favorite (film icon in upper right), if ratings and favorites are enabled. Note: Silverlight 3 must be installed on the viewer s computer in order for full carousel functionality. Jukebox The Jukebox is accessible at the bottom of the Home Page. The Jukebox offers two organizational options: either the subdivided Content or All Videos. Under Content, videos are organized by Categories and Channels, and can also be searched by metadata, publication start and end dates, and rating. Under All Videos, videos can be searched by metadata, publication start and end dates, and rating. 18 Polycom, Inc.

29 User Configuration Pages VMC 2.0 Viewer Portal Sitemap User Configuration Pages The Polycom Version 2.0 Viewer Portal contains pages intended not for content viewing and management, but for user management: the Login, User Registration, and Edit Profile pages. Login Page When a user navigates to the Version 2.0 Viewer Portal Home Page, a Log In link appears at the upper right of the screen, above the header. Clicking this link opens a pop-up: If you choose to log out of the Viewer Portal and then log in again, this page will appear: Selecting Recover Forgotten Password opens this page: Polycom, Inc. 19

30 Polycom VMC 1000 Branding Guide User Configuration Pages User Registration Page Users who cannot log in may need to register. To register, click Register Now on the login pop-up. Edit Profile Page When a user is logged in, his or her name should appear as a link in the upper right corner of the Viewer Portal. Clicking on this link opens the Edit Your Profile page. 20 Polycom, Inc.

31 Player Page VMC 2.0 Viewer Portal Sitemap Player Page Viewing a program in the Version 2.0 Viewer Portal brings up the Player Page. The Polycom Video Player page consists of up four regions: a header, a player region, a carousel, and a jukebox. The header, carousel, and jukebox have been documented above; this section will focus on the player section. Navigating the Player The player region consists of a set of distinct elements with which viewers can interact. This section will explain the appearance and functionality of each element. Polycom, Inc. 21

32 Polycom VMC 1000 Branding Guide Player Page Details The details section includes the following elements: Rating: if enabled, average aggregated viewer rating is displayed. Short Description: the creator-designated Short Description displays here. Clicking More will display the Long Description in a pop-up screen. The Availability date shows publication start and end dates. Videos: the video content associated with the program can be launched from here. Downloads: any downloadable content associated with the program is accessible here. Comments Opening the comments tab will show any existing comments. Selecting the Comment icon will bring up the following comment screen: 22 Polycom, Inc.

33 Player Page VMC 2.0 Viewer Portal Sitemap Resizing and Moving Content With Silverlight, there are several ways to resize and move content within the player screen. Videos can be resized and reoriented via the controls on the left side of the player (opened by mousing over the first icon): Clicking each icon will (in order from top to bottom): Open the video in full size and close any slide-based presentation in the player window. (If the program only contains video, this will have no effect.) Make video and slides equal sizes in the player. (If the program only contains one type of media, it will make the media appear smaller than the default size.) Make slides appear four times as large as video. (If the program only contains one type of media, it will resize and move that media depending on type.) See below: Polycom, Inc. 23

34 Polycom VMC 1000 Branding Guide Player Page Make video appear four times as large as slides. (If the program only contains one type of media, it will resize and move that media depending on type.) Open slides in full size and close any video in the player window. Restore to default settings. Please note: these automatic controls cannot control more than two panels. If there is a third panel in a program (i.e., see below) and users wish to resize or move the panels, they must use the controls on each individual panel. Each individual panel can be closed, moved, and free-resized directly. Controls appear by mousing over the panel: 24 Polycom, Inc.

35 Player Page VMC 2.0 Viewer Portal Sitemap Player Controls The resizing controls apply to panels within the player, but controls for the full player are located in the bar at the bottom of the player. The following diagram explains the functionality of each button on the bottom bar: Program Finished A set of controls also appears at the end of a broadcast or VOD program: Rate allows users to provide a rating for the just-completed program. Watch Again restarts the video. Share brings up the Share/Link/Embed window. Sharing Select Share from either the bar at the bottom of the player or the Program Finished screen. This will bring up the Share/Link/Embed window. Polycom, Inc. 25

36 Polycom VMC 1000 Branding Guide Player Page Share/Trim The Share screen allows viewers to share a video with chosen and permitted recipients. The trimming bar determines the selection shared. Link The Link screen provides a permanent and direct link to the video. Embed The embed screen provides the HTML to directly embed the program into a website, blog, or forum. 26 Polycom, Inc.

37 4 Before You Begin Branding This chapter contains the following sections: Creating a New Layout Directory Creating a New Images Directory Creating Your New Properties File Putting Your Server in Development Mode Testing Your Polycom VMC 1000 Creating a New Layout Directory The Layout Directory configures for your organization. To create a new Layout directory as the basis for your new UI: 1 Create this directory: WEB-INF\templates\overrides\<MyCompany> 2 Copy the contents of images\overrides\vmc into images\overrides\<mycompany>. 3 This is now your company layout directory. Creating a New Images Directory You create an images directory by copying the directory structure you received with your Polycom VMC 1000, moving it to a custom overrides directory, and renaming it with your Domain ID. To create a new Images directory as the basis for your new UI: 1 Create this directory: images\overrides\<mycompany> Polycom, Inc. 27

38 Polycom VMC 1000 Branding Guide Putting Your Server in Development Mode 2 Copy the contents of images\overrides\vmc into images\overrides\<mycompany>. 3 This is now your company images directory. Putting Your Server in Development Mode Before you make any changes in your Polycom VMC 1000 code, you should put your domain into development mode. Follow these steps: To put your server in development mode: 1 Open this file: WEB-INF\templates\layout\<DOMAIN_ID>\velocity.properties> 28 Polycom, Inc.

39 Testing Your Polycom VMC 1000 Before You Begin Branding 2 Set domainloader.resource.loader.cache=false 3 Set domainloader.resource.modificationcheckinterval=1 NOTE: It is important to restore these values before running your Polycom VMC 1000 in production mode. 4 Save your changes. Testing Your Polycom VMC 1000 To verify that your Polycom VMC 1000 is working, go to New Viewer Portal Original Home Page If you are using the Version 2.0 Viewer Portal, your Polycom VMC 1000 Viewer Portal should look like this: Polycom, Inc. 29

40 Polycom VMC 1000 Branding Guide Testing Your Polycom VMC 1000 Classic Viewer Portal Original Home Page If you are using the Classic UI as the basis for your user interface, your Polycom VMC 1000 Viewer Portal should look like this: If for any reason your site is not functioning, contact your system administrator. 30 Polycom, Inc.

41 5 Branding the 2.0 Viewer Portal This chapter contains the following sections: Branding Overview Changing the Viewer Portal FMA Changing the Logo Changing Layout Elements Skin Packaging Branding Overview This chapter outlines branding processes for the Polycom version 2.0 Viewer Portal. Most skin resources are stored in viewerportal.war\web-inf\skinresources. In this directory, there are 2 subfolders: default and overrides. The default directory contains all default skin resources used by the system. In the default folder files are organized into 4 main directories: js, images, css, and fonts. js contains all javascript resources and html templates used by javascript widgets. css contains all styles. images contains all images used. fonts should not need to be modified. The base-line branding for the player is established, however, in the skinresources\overrides folder. Most configuration on the new portal will occur here. To create base-line branding you should create a folder under overrides (e.g. skinresources\overrides\mycompany). In this folder you would copy all files from overrides\vmc (using the same directory structure as in the vmc folder), and then edit these files as necessary. The following sections lay out certain common branding processes for the Version 2.0 Viewer Portal. For further information, contact Polycom Support. Polycom, Inc. 31

42 Polycom VMC 1000 Branding Guide Changing the Viewer Portal FMA Changing the Viewer Portal FMA The Flexible Message Area (FMA) on the Viewer Portal Home Page is fully customizable from within the VMC 1000 interface. The figure below shows a default FMA: The FMA is an important site for branding, as it is typically the first thing viewers see upon reaching the Home Page. To brand the FMA through the Administrative Portal: 1 Log in to the VMC 1000 Administrative Portal. 2 Navigate to System > Messages. This page should appear by default upon logging in. 3 Scroll to Viewer Messages. Click Edit. 4 The Viewer Domain Message field appears. 32 Polycom, Inc.

43 Changing the Logo Branding the 2.0 Viewer Portal 5 HTML or text can then be entered in the editing area. Click Preview. NOTE: Images for the FMA can be sourced not only from external URLs but also from the image directories on the Polycom VMC Click Save. Open the Viewer Portal. The edited FMA should appear. Changing the Logo 1 Open viewerportal.war. 2 Navigate to WEB-INF\skinresources\overrides. 3 Open (or, if necessary, create) WEB-INF\skinresources\overrides\<MyCompany>. Polycom, Inc. 33

44 Polycom VMC 1000 Branding Guide Changing the Logo 4 Under this, create 2 subfolders: WEB-INF\skinresources\overrides\<MyCompany>\css WEB-INF\skinresources\overrides\<MyCompany>\images 5 Copy WEB-INF\skinresources\overrides\vmc\css\common.css to the WEB-INF\skinresources\overrides\<MyCompany>\css folders. 6 Make the following changes depending on the size of the logo in the.logoimg: Old code: background: url(../images/logo2.png); _background:transparent; _filter: progid:dximagetransform.microsoft.alphaimageloader (src='skinresources/unpackaged/images/logo2.png', sizingmethod='scale'); width: 132px; height: 43px; New code: background: url(../images/logo2.png) no-repeat; _background:transparent; _filter: progid:dximagetransform.microsoft.alphaimageloader (src='skinresources/unpackaged/images/logo2.png', sizingmethod='scale'); width: 300px; height: 101px; NOTE: You will have to change the width and height attributes depending on the size of your png file. 7 Save your chosen logo image as logo2.png in WEB-INF\skinresources\overrides\<MyCompany>\images. Using a.gif Logo If you have a.gif format Logo and do not wish to save it as a.jpg, follow these steps to override the template. To use a.gif Logo: 1 Open the common.css file in WEB-INF\skinresources\overrides\<MyCompany>\css. (If necessary, create this folder.) 2 Find the <img> tag. 3 Change the src attribute to your logo image s.gif filename. 34 Polycom, Inc.

45 Changing Layout Elements Branding the 2.0 Viewer Portal 4 Define the width and height of your image. 5 Save the common.css file. Changing Layout Elements 1 Open WEB-INF\templates\layout\overrides\vmc\jsonvp. 2 Copy the files to WEB-INF\templates\layout\overrides\<MyCompany>\jsonvp. (If necessary, create this folder.) 3 Open the folder. A list of folders and.vm files should appear. 4 Right-click the area you wish to edit and select Edit in Notepad. 5 Edit the file to your chosen specifications. 6 Save the changed file in your custom layout template directory. Skin Packaging By default, skin resources are served directly from the Application Server, and all resources are served as single files. This results in a high number of network requests that must be served by the Application Server, limiting the performance that can be achieved. To overcome this, there is a way to generate a "skin pack." A skin pack is a zip file contains all of the static resources associated with a particular domain. The resources contained in a skin pack are compiled, compressed, and combined in such a way as to reduce the number of network requests needed to display Polycom, Inc. 35

46 Polycom VMC 1000 Branding Guide Skin Packaging a Viewer Portal page. In addition, the skin pack can be unzipped onto the web servers, allowing these resources to be fetched from the web server instead of the application server. NOTE: A skin pack must be generated for every domain in a Polycom VMC 1000 environment. To generate and use a skin pack: 1 Go to /skintools.vp?action_generatepack=true. 2 When this url is accessed, a file named skinpack.zip will be downloaded. 3 Skinpack.zip should be placed in viewerportal.war/web-inf/ skinpack/[domainid]. This will ensure that the Application Server is serving a compressed version of the static resources. NOTE: Do not unzip skinpack.zip in the WEB-INF directory. Keep the file compressed. 4 Create a directory anywhere on the Polycom VMC 1000 filesystem (in this example, C:\skinresources). 5 Unzip the skin pack zip into this directory. A file folder and the bundle.properties file will appear. 36 Polycom, Inc.

47 Skin Packaging Branding the 2.0 Viewer Portal 6 Create a virtual directory "viewerportal" in IIS. Set its filesystem location to c:\inetpub\wwwroot, i.e., the default root for the IIS webserver. a Under this create another virtual directory for "skinresources" and set set its filesystem location to the directory created in step 1. Polycom, Inc. 37

48 Polycom VMC 1000 Branding Guide Skin Packaging b Under this create another virtual directory for the [domain] and set its filesystem location to c:\inetpub\wwwroot. ) 7 Open and edit the file D:\Qumu\IIS\conf\ uriworkermap.properties to exclude this skinresources virtual directory from being served by the Application Server. For example the entry in uriworkermap.properties for the domain "training" and the ajp13 worker named "jboss" in the IIS worker.properties can be:!/viewerportal/training/skinresources=jboss!/viewerportal/training/skinresources/*=jboss 8 Restart your IIS Web Server. 9 Refresh the browser to confirm that the branding changes have taken effect. 38 Polycom, Inc.

49 6 Classic Viewer Portal Structure This chapter begins the discussion of the Classic Viewer Portal. It contains the following sections: Polycom VMC 1000 Pages Home Page Edit Profile Page Login Page User Registration Page Private Code Page Search Results Page Favorites Page Logout Page Single Category Details Page Single Channel Details Page Single Program Details Page Program Player Page Add Review Page Calendar Page Polycom VMC 1000 Pages There are nineteen pages in your Polycom VMC 1000 site. To brand the Polycom VMC 1000 as your own, you need to change UI elements on each of these pages. This guide provides examples of branding the Home page and the Player page; you can generalize from these examples to the other pages in the site. Polycom, Inc. 39

50 Polycom VMC 1000 Branding Guide Home Page Home Page The Home page is, of course, the first page that your Program Browser visitors see. The Default UI Home page looks like this: If you are branding the Default UI, see Chapter 7, Before You Begin Branding, and Chapter 8, Branding Your Classic UI. 40 Polycom, Inc.

51 Edit Profile Page Classic Viewer Portal Structure Edit Profile Page The Edit Profile page looks like this: Login Page The Login page looks like this: Polycom, Inc. 41

52 Polycom VMC 1000 Branding Guide User Registration Page User Registration Page The User Registration page looks like this: Private Code Page The Private Code page looks like this: 42 Polycom, Inc.

53 Search Results Page Classic Viewer Portal Structure Search Results Page The Search Results page looks like this: Polycom, Inc. 43

54 Polycom VMC 1000 Branding Guide Favorites Page Favorites Page The Favorites page looks like this: Logout Page The Logout page looks like this: 44 Polycom, Inc.

55 Single Category Details Page Classic Viewer Portal Structure Single Category Details Page The Single Category Details page looks like this: Polycom, Inc. 45

56 Polycom VMC 1000 Branding Guide Single Channel Details Page Single Channel Details Page The Single Channel Details page looks like this: 46 Polycom, Inc.

57 Single Program Details Page Classic Viewer Portal Structure Single Program Details Page The Single Program Details page looks like this: Polycom, Inc. 47

58 Polycom VMC 1000 Branding Guide Program Player Page Program Player Page The Program Player page looks like this: 48 Polycom, Inc.

59 Add Review Page Classic Viewer Portal Structure Add Review Page The Add Review page looks like this: Polycom, Inc. 49

60 Polycom VMC 1000 Branding Guide Calendar Page Calendar Page The Calendar page looks like this: 50 Polycom, Inc.

61 7 Branding Your Classic UI This chapter provides examples of branding tasks for the Classic UI. All of the instructions in this chapter assume that you are using the Classic UI as the basis for your user interface. This chapter contains these sections: Which Files Render UI Elements Branding the Home Page Examples Branding the Player Page Examples Polycom, Inc. 51

62 Polycom VMC 1000 Branding Guide Which Files Render UI Elements Which Files Render UI Elements This graphic shows which files in the system render the elements in your Classic UI: Branding the Home Page Examples The examples in this section show you how to perform most of the common branding tasks for the Home page. Although the examples here follow a certain progression, you can do any one of them in any order. For that reason, each example explains which files need to be copied into your overrides directory and modified. However, you only need to copy the files once. If you copy the default or VMC override files over your edited files, you will lose your changes. Remember to expand the shortened pathnames when looking for directories and files mentioned in this chapter. This section includes these topics: Starting From the Classic UI as Shipped Save the header.vm file. Changing the Header Background Adding Text to the Header 52 Polycom, Inc.

63 Changing the Logo Branding Your Classic UI Changing the Tab Graphics Changing the Footer Text Starting From the Classic UI as Shipped The Classic UI you received with your Polycom VMC 1000 renders as below: Notice the Polycom VMC 1000 company Logo, Header Title, images, and Footer. You change those to your own company assets to brand the interface. Changing the Logo 1 Open viewerportal.war. 2 Navigate to WEB-INF\skinresources\overrides. 3 Open (or, if necessary, create) WEB-INF\skinresources\overrides\<MyCompany>. 4 Under this, create 2 subfolders: WEB-INF\skinresources\overrides\<MyCompany>\css WEB-INF\skinresources\overrides\<MyCompany>\images 5 Copy WEB-INF\skinresources\overrides\vmc\css\common.css to the WEB-INF\skinresources\overrides\<MyCompany>\css folders. Polycom, Inc. 53

64 Polycom VMC 1000 Branding Guide Changing the Logo 6 Make the following changes depending on the size of the logo in the.logoimg: Old code: background: url(../images/logo2.png); _background:transparent; _filter: progid:dximagetransform.microsoft.alphaimageloader (src='skinresources/unpackaged/images/logo2.png', sizingmethod='scale'); width: 132px; height: 43px; New code: background: url(../images/logo2.png) no-repeat; _background:transparent; _filter: progid:dximagetransform.microsoft.alphaimageloader (src='skinresources/unpackaged/images/logo2.png', sizingmethod='scale'); width: 300px; height: 101px; NOTE: You will have to change the width and height attributes depending on the size of your jpg file. 7 Save your chosen logo image as logo2.png in WEB-INF\skinresources\overrides\<MyCompany>\images. You should see your Logo. We changed the Logo in our example, shown in the following figure: Using a.gif Logo If you have a.gif format Logo and do not wish to save it as a.jpg, follow these steps to override the template. 54 Polycom, Inc.

65 Changing the Logo Branding Your Classic UI To use a.gif Logo: 1 Open the header.vm file in WEB-INF\templates\layouts\overrides\<MyCompany> (If necessary, create this folder and copy header.vm over from WEB-INF\templates\layouts\overrides\VMC.) 2 Find the <img> tag. 3 Change the src attribute to your logo image s.gif filename. 4 Define the width and height of your image. 5 Save the header.vm file. Polycom, Inc. 55

66 Polycom VMC 1000 Branding Guide Changing the Logo Changing the Header Background This example shows you how to change the Background of the Header element. To change the Header Background: 1 Open the WEB-INF\templates\layout\overrides\vmc\css directory. 2 Copy the css.vm file into your WEB-INF\templates\layout\overrides\<MyCompany>\css directory. 3 Find background: url( button_bg.gif ); 4 Change this line. (You can either comment it out or delete it entirely.) 5 Find background-color: #1F385B; 6 Change the color value to your company s main color. The following figure shows the effects of changing the Header Background: Changing the Tab Graphics This example shows you how to change the Tabs. Tabs are graphics, so you need to edit them in a graphic manipulation tool. In our example, we changed our Tabs to a new color. 56 Polycom, Inc.

67 Changing the Logo Branding Your Classic UI To change the Tabs: 1 Open the Images\Default directory. 2 Copy the tab.gif and active-tab.gif files to your Images\Overrides\<MyCompany> directory. 3 Edit the tab.gif and active-tab.gif files in an image editor. Give them your company s color. 4 Save the files in.gif format in your Images\Overrides\<MyCompany> directory as tab.gif and active-tab.gif. Rendering your page now shows the Tabs as you changed them. Changing the Menu Background Color This example shows you how to change the color of the Menu Background. We changed our example Menu Background to be the same as the company Logo color. To change Menu Background color: 1 Open the WEB-INF\templates\layout\overrides\vmc\css directory. 2 Copy the css.vm file into your WEB-INF\templates\layout\overrides\<MyCompany>\css directory. 3 Search for the #menu tag. 4 Find background-color: #1F385B; 5 Change the color value to your preferred color. In our example, the page now looks like this: Changing the Page Background Color This example shows you how to change the Background color of the entire Page. To change Page Background color: 1 Open the WEB-INF\templates\layout\overrides\vmc\css directory. Polycom, Inc. 57

68 Polycom VMC 1000 Branding Guide Changing the Logo 2 Copy the css.vm file into your WEB-INF\templates\layout\overrides\<MyCompany>\css directory. 3 Search for the #contentholder tag. 4 Find background-color : White; 5 Change the background color value to your preferred color. In our example, we also changed the border-left, border-right and border-bottom. We removed the top border by deleting the line border-top. Our Page now looks like: Adding Text to the Header This example shows you how to add text to the Header. We changed our Header text to the name of our example company, Aerie Hunters. To add Header text: 1 Open the header.vm file in WEB-INF\templates\layouts\overrides\<MyCompany>. (If necessary, create this folder and copy header.vm over from WEB-INF\templates\layouts\overrides\VMC.) 2 Add this code: <div id="header"> <div id="headerbackground"> <div id="logodiv"> <a href="home.do"> <img src="default_event.jpg" width="50" height="45" border="0" vspace="0"> </a> </div> <div id="logotitle"> Aerie Hunters </div> </div> </div> 58 Polycom, Inc.

69 Changing the Logo Branding Your Classic UI 3 Open the WEB-INF\templates\layout\overrides\vmc\css directory. 4 Copy the css.vm file into your WEB-INF\templates\layout\overrides\<MyCompany>\css directory. 5 Add this code: #logodiv { } #logotitle { position:absolute; float: left; padding-top: 6pt; font: bold 18pt arial; color: #fee; text-align:center; } 6 Render your page. You should see the company name centered in the Header, as in the figure below: Changing the Footer Text This example shows you how to change the text in the Footer. In your Default UI, the Footer text is a copyright statement. NOTE: Whenever you make changes to the ViewerResources.properties file, you must restart the Qumu JBoss Service. For that reason, it is a good idea to make all of those changes at once. Often the system takes some time to restart. If you see a blank page upon refresh, wait a minute, and then reload the page again. To change the Footer text: 1 Create a Resources folder located at WEB-INF\templates\layout]overrides\<MyCompany>\Resources. 2 Copy a new ViewerResources.properties file in the new directory. Polycom, Inc. 59

70 Polycom VMC 1000 Branding Guide Branding the Player Page Examples 3 Enter this code to change the copyright text to match your company s information: message.footer=copyright 2010 <MyCompany>. 4 Save and close the text file. If you want, you can center the Footer text by adding a text-align property to the Footer selector in css.vm: #footerholder { clear: both; background-color: transparent; text-align: center; } 5 Restart the Polycom appliance. Ask your system administrator to do this if necessary. 6 Reload your website page. Branding the Player Page Examples The examples in this section show you how to do most of the common branding tasks for the Player page. Although the examples here follow a certain progression, you can do any one of them in any order. For that reason, each example explains which files need to be copied into your overrides directories and modified. However, you only need to copy the files once. Three States of the Player Page The Player page has three possible states: Now Playing Waiting Room (the playback has not yet started) Exit (the playback has finished) 60 Polycom, Inc.

71 Branding the Player Page Examples Branding Your Classic UI Starting From the Original Player Page The Default UI ships with a Player page that looks like this: Changing the Player Page Background Color This example shows you how to change your Player page Background color. We changed ours to the same color as the Logo Background, to have a smooth, uninterrupted background color. To change the Player page Background color: 1 Open the WEB-INF\templates\layout\overrides\vmc\css directory. 2 Copy the player.vm file into your WEB-INF\templates\layout\overrides\<MyCompany>\css directory. 3 Find the BODY tag at the beginning of your new file. 4 Find background-color: #ffffff; 5 Change the color value to your preferred color. Changing the Player Page Logo This example shows you how to change the Logo on the Player page. The process is somewhat different from changing the Logo on the Home page. To change the Logo on the Player page: 1 Decide on a color for your Page Background. Polycom, Inc. 61

72 Polycom VMC 1000 Branding Guide Branding the Player Page Examples 2 Create a.gif file of your Logo with a Background color that is the same as you chose for your Page Background. 3 Save your.gif file as logo_live.gif within Images\Overrides\<MyCompany>. 4 Open your WEB-INF\templates\layout\overrides\VMC\css directory. 5 Copy the player.vm file to your WEB-INF\templates\layout\overrides\<MyCompany>\css directory. Find the #logo ID definition. 6 Find background: White url( logo_live.gif ) no-repeat center; 7 Change it to background : url ( logo_live.gif ) no-repeat center; You can align the image to the left or right by using those words instead of center. 8 Set the width and height dimensions of your image. Ensure that your image is no taller than 45 pixels, as the video player has a hard-coded position that interferes with a taller image. Our example image has a new Background color and a new Logo whose Background matches the Page Background: Changing the Content Pane Border You can change the Border surrounding the Content Pane. To change the Content Pane Border color: 1 Open your WEB-INF\templates\layout\overrides\VMC\css directory. 62 Polycom, Inc.

73 Branding the Player Page Examples Branding Your Classic UI 2 Copy the player.vm file to your WEB-INF\templates\layout\overrides\<MyCompany>\css directory. 3 Find the.dojotabpanewrapper class definition. 4 Find border : 1px solid #6290d2; 5 Change the color value to your preferred color. Our example now has a different Content Pane Border color: Changing the Tab Color The Tabs on your Player page are made of separate images that all render together into the Tabs. Polycom, Inc. 63

74 Polycom VMC 1000 Branding Guide Branding the Player Page Examples The following figure shows the different Tab files you must edit: To change the color of the Tabs you must change the color in these images. To change Tab colors on the Player page: 1 Open your Images\overrides\VMC directory. 2 Copy the Tab files shown in the previous figure to your Images\overrides\<MyCompany> directory. 3 Edit the Tab file files in an image editor. Give them your company s color. 4 Save the files in.gif format in your Images\overrides\<MyCompany> directory. Rendering your page now shows the tabs as you changed them. 5 Open your WEB-INF\templates\layout\overrides\VMC\css directory. 6 Copy the player.vm file to your WEB-INF\templates\layout\overrides\<MyCompany>\css directory. 7 Find the #playertabs definition. 8 Change the color : line to your preferred color. 9 Repeat steps 7 and 8 for these items in the player.vm file: tab_closed tab_closed_bg tab_closed_left tab_closed_right 64 Polycom, Inc.

75 Branding the Player Page Examples Branding Your Classic UI tab_open_bg tab_open_right tab_top_right tab_top_left Polycom, Inc. 65

76 Polycom VMC 1000 Branding Guide Branding the Player Page Examples 66 Polycom, Inc.

77 8 Using CSS to Define Look of the Player Page This chapter explains how you can use CSS (Cascading Style Sheets) to define the look and feel of the Player page in the classic Viewer Portal. When you are creating a program, you select a CSS Layout you want the program to use for the Player page. The CSS Layout contains multiple CSS Templates. Each CSS Template associates a CSS with the CSS Layout it belongs to, and defines the particular screen size and the video format of the stream. This allows you to define separate CSSs for different video streams that are parts of the same program, as long as they have different screen sizes and/or video formats. You might define a series of CSS Layouts for your company such as 'News You Can Use' and 'From the CEO s Desk' that have a specific set of characteristics for those purposes, or 'Simple video+slides' and 'Interactive Broadcast'. Within each CSS Layout, you would create a series of CSS Templates that account for video in different formats and sizes that might be played within a Program using this Layout. For example, you might choose to display the Table of Contents when the video is smaller and there is more available screen real estate, but hide it for larger videos. Later when a broadcaster applies the CSS Layout to a Program, the Polycom VMC 1000 will automatically choose the correct Template based on the video characteristics. A technical resource performs the initial development of the CSS Templates. The template is uploaded to the Polycom VMC 1000 administrative interface and is made available to broadcasters to apply when a Program is created. About the Player Page The Player page is the part of the Viewer Portal that plays a program s video. The Player page has three possible states: Now Playing Waiting Room (the playback has not yet started) Polycom, Inc. 67

78 Polycom VMC 1000 Branding Guide About the Player Page Exit (the playback has finished) The state in which most Viewers will see the Player page is Now Playing. Defining the Look and Feel of the Player Page The Polycom Administrative Portal allows you to use Cascading Style Sheets (CSS) to modify the look and feel of the Player page. Using CSS, you can control the fonts, colors, background, and the position of the player controls on the Player page. The Polycom VMC 1000 Administrators Portal uses a default CSS for the Player page, and you can replace the default CSS with your custom CSS. The player can be customized by modifying the player.vm file in your Images\overrides\<MyCompany> directory. Any modifications to this file in the Images\overrides\<MyCompany>directory are applied to all Programs by default. To enable, you must: Create a player.css Define a CSS Layout Add a CSS Layout Repository to a CSS Layout Apply the CSS Layout to the Player page Creating a CSS player.css Using a development environment or domain, modify Images\overrides\<MyCompany>\player.vm to deploy the Program level branding you wish to implement. 1 When satisfied with your branding, make a copy of player.vm and rename the file to player.css. 2 In your production environment, browse to this player.css file for the CSS File field in To add a CSS Layout Repository to a CSS Layout. Defining a CSS Layout A CSS Layout is a container for a CSS Template. You can add multiple CSS Templates to a CSS Layout. To add a new CSS Template to the Player page, you must first create a CSS Layout and then add a CSS Template to it. You associate the CSS Layout to a program when you create the program. 68 Polycom, Inc.

79 About the Player Page Using CSS to Define Look of the Player Page To define a CSS Layout: 1 From the Polycom Administrative Interface, click System>CSS Layouts. The CSS Layouts page appears.. 2 In the Name field, add the name of the CSS Layout. This field appears in the Program editor dropdown list 3 In the Description field, add a brief description of the CSS Layout. 4 Click the Save button. The CSS Layout you just created now appears on the CSS Layout page. You can now create a single or multiple CSSs to add to the CSS Layout. Deleting a CSS Layout To delete a CSS Layout: From the CSS Layouts page, check the box next to the CSS Layout you want to delete, and click the Delete button. If a program was using this CSS Layout, the program now uses the CSS Layout that you assigned as the default CSS Layout. If this CSS Layout is the default CSS Layout, then the Polycom VMC 1000 reverts to the default CSS Layout. Creating a CSS Layout Repository to Add to a CSS Layout To add a CSS Layout Repository to a CSS Layout 1 Click System>CSS Layouts. Polycom, Inc. 69

80 Polycom VMC 1000 Branding Guide About the Player Page 2 Click on the name of the CSS Layout to which you want to add the Repository. The Edit CSS Layout page appears. 3 Under Repositories, click the Add button. 4 In the Name field, add the name of the Repository. 5 In the Description field, add a brief description for the Repository. 6 Select the Default checkbox if you want to use this CSS Template as the default one. 7 In the Video size field, select how this Repository controls the video size on the Player page. 8 In the Format type field, select which type of video stream this CSS controls on the Player page. 9 In the CSS File field, use the Browse button to add your custom player.css. 10 Click the Save button. The Repository has now been added to the CSS Layout. Editing a CSS Layout Repository To edit a CSS Layout Repository: 1 Click System>CSS Layouts. The CSS Layouts page appears. 2 Click the Name of the CSS Layout that contains the Repository you want to edit. 3 Under Repositories, click the name of the Repository you want to edit 4 Click the Save button when you are done with your edits. Deleting a CSS Layout Repository To delete a CSS Layout Repository: From the CSS Layout page, check the button next to the Repository you wish to delete and click the Delete button. The CSS Layout Repository is removed from the CSS Layouts page. 70 Polycom, Inc.

81 About the Player Page Using CSS to Define Look of the Player Page Applying the CSS Layout to the Player Page You can apply the CSS layout to a program when you create the program in the 1 st step of the Program Wizard. When the stream is broadcast on the Program Browser, the Program Browser selects the appropriate CSS Template from the CSS Layout to define the look and feel of the Player page, depending upon the characteristics of the stream (video size and format type) that you defined when you created the CSS Template or CSS Templates. The following figure shows which CSS DIV tags affect which sections of the Player page: Polycom, Inc. 71

82 Polycom VMC 1000 Branding Guide About the Player Page 72 Polycom, Inc.