Kaltura MediaSpace Styling Guide

Printer-friendly version

Kaltura MediaSpace Styling Overview

The Styling Module for MediaSpace and KAF (Kaltura Application Framework) administrators, provides the ability to create a new style based on the most common use cases without the need to understand CSS development techniques. The Styling Module also allows the admins to view the newly generated KMS/KAF theme prior to setting it up on production and share it with other admins.

For advanced theme creation, for which a deep CSS understanding is required, please use Kaltura’s Cssupload Module.

Kaltura MediaSpace (KMS) is delivered with many user facing elements which can be configured to deliver your brand.  All user facing elements of the site can be branded by the site administrator or through a custom Kaltura Professional Services engagement.  Branding is performed through a combination of KMS Admin configuration settings, CSS, player configuration, and language packs.  Additionally, most organizations also add a vanity URL to complete their branding.

This guide provides comprehensive information about creating your branded MediaSpace.

The following topics are described:

Branding Your Site

Many Kaltura customers use the tools available in MediaSpace to brand their sites. For links to some of our customer sites please see Kaltura Customer MediaSpace Sites.

Site Title

Customizing the title of your MediaSpace site, under Global > Application > title, updates the name that is displayed in various locations in the browser and other areas. This also increases a user’s ability to find your site using a search engine.

Header Style

The Header Style feature, located under Global > Header > headerStyle, can be switched between "dark" and "light". Switching between these two options has the most prominent effect on the various text items displayed on various KMS pages. If "dark" is set, the text will be white because a dark background requires lighter text for the text to be seen. If "light" is set, the text will be black because a light background requires darker text in order for the text to be seen.

Navigation Style

The Navigation Style feature, located under Global > Navigation > navigationStyle, can be switched between "Vertical" and "Horizontal". Vertical indicates that a hidden vertical menu appears on the left in all resolutions. Horizontal indicates that a horizontal menu appears in desktop resolution and vertical menu appears in lower resolutions.

Horizontal Navigation

Vertical Navigation

Footer

Use the footer field, located under Global > Application > footer, to enter HTML, CSS, and JavaScript to create a highly customized footer. You can even reference CSS uploaded using the Cssupload module.

Favicon

The favicon, the small icon displayed in a browser tab next the site title, can be customized in the KMS by using the Customfavicon Module, located under Modules > Customfavicon. For more information about customizing the favicon for your KMS site please see Configuration Management: Modules - KMS Management Console/KAF Admin -Customfavicon.

Logo

One of the first items to customize in the KMS is the logo. For information on how to customize the logo, please see How to Add Your Logo to Kaltura MediaSpace.

Top

Global Style Settings

See the article on Global Style Settings that lists each style.

Top

Gallery Styling

Gallery Managers have the option to style galleries in MediaSpace using a simple set of tools. The Gallery Editor tool provides the ability to add a gallery banner, text, graphics, and links to uniquely style each gallery in the MediaSpace site.

The Gallery

Top

Channel Styling

Channel Managers have the option to style their channels in MediaSpace using a simple set of tools. The channel Editor tool provides the ability to add text, graphics, and links to uniquely style each channel in the MediaSpace site.  The channel manager also has the option to upload a banner for their channel or implement a channel thumbnail via upload or by assigning the thumbnail from any video within their channel.

Channel Editor

The Channel

Top

Entry Design

The Entry Design module, located under Modules > Entrydesign, allows end users to create a completely custom look and feel for the KMS on a per entry basis i.e. the page in which each video entry resides can look completely different than the rest of the site. For more information about how admins can enable this for their users and what users can modify, please see Customizing the Media Entry Display for Kaltura MediaSpace Entries.

Top

Player Styling

In addition to customizing the looking and feel of your KMS, it is also possible to customize the look and feel of the players used inside the KMS. This is done via the Universal Studio inside the Kaltura Management Console (KMC). For more information on modifying the look and feel of your players, please see Universal Studio Information Guide - Configuring the Player's Look and Feel.

Top

Video Editor Styling

Administrators can create additional languages and customize existing languages. For more information on how to upload a new custom language CSS file for the Kaltura Video Editor tool please see Customizing the Kaltura Video Editing Tools Language. See Localization for KMS/KAF Administrators - How to Change Your Kaltura Application Language? for additional information. The Kaltura Video Editing Tools may be localized to any of the supported localization languages.

Top

Interactive Video Quiz (IVQ) Styling

The Kaltura Interactive Video Quiz configuration provides the capability to upload a CSS file to edit strings and customize the IVQ default text settings.  For more information and instructions and access to an example CSS to use please see CSS File for Interactive Video Quizzes Customization of Default Strings.

Administrators can change the language and text strings for the IVQ Player. For more information please see Interactive Video Quizzes : Localization.

Top

Languages

Kaltura MediaSpace provides localization configuration to adapt online content for regional specificity. Using settings within the Application Module - Global > Application > languageConfiguration and Global > Application > language and the Languages module Global > Languages in the Kaltura MediaSpace Admin Console, the KMS administrator can control the MediaSpace instance localization features.  For more information about how administrators can change the language elements across MediaSpace and create a complete language pack, please see  Localization  for  KMS/KAF  Administrators  - How to Change Your Kaltura Application Language.

Top

Custom CSS Styles

The Cssupload module, located under Modules > Cssupload, allows admins to either upload a completely different bootstrap.min.css file (under the "bootstrap" section) or to upload a supplemental CSS file that will alter the look and feel by making small changes to the style (under the "additional" section).

To aid you with some commonly used CSS modifications, please see the example CSS file included in the appendix: cssupload_example.css

Other administrators commonly use Chrome's developer tools to test small modifications to the KMS's styles. Once they are happy with these small modifications, they can add them to a CSS file and upload them using the Cssupload module. Please note that because of the nature of multiple styles being applied at various levels of the site, you may need to apply !important to your CSS attributes. For more information on using Chrome's developer tools to test CSS modifications, please see:Get Started With Viewing And Changing CSS.

Top

Add Layers to Embed Players

This CSS modification allows you to add text labels to the players that are offered under Share > Embed. The end result is displayed as in the following:

Css Modification Code

 

To customize the CSS code above, you can change [title="Main Player"] to be whatever name you gave to the embedSkins you added under the KMS/KAF admin module, Embed. In my CSS above, my titles are "Main Player" and "Download Player" because that is what I called them in the embed module (as seen below).

To further modify the CSS, change the text in content to be whatever label you want to use for your players.

Top

Document type: 
Product version: 
(3490 reads)