Kaltura Video Portal Styling Guide

About

The Styling Module for Video Portal aka MediaSpace and KAF (Kaltura Application Framework) administrators, provide 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 before setting it up on production and sharing 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 that 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.

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 the Customfavicon Module.

1. Enable the Customfavicon Module.
2. Click Upload icon file to upload the custom icon.
3. Specify the size. The reccommended size is  16*16px.  Please use the recommended favicon generator service, for example, Favicon Generator for perfect icons on all browsers.
4. After saving your changes, clear the cache and wait for the changes to be applied. It may take several minutes for the favicon to be updated on your KMS instance.

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.

Global Style Settings

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

Gallery Theme Styling

Gallery theme styling is enabled with the Categorytheme module which is located under Configuration Management: Category Modules. See Managing a Gallery in Kaltura MediaSpace for more information on gallery theme styling.

Entry Design

The entryDesign 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.

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.

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.

Video Quiz (VQ) Styling

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

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

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.

Channel Theme Styling

Channel theme styling is enabled with the Channeltheme module which is located under Configuration Management: Channel Modules. See Managing a Channel in Kaltura MediaSpace for more information on channel theme styling. 

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 "uploadadditional" field).

To aid you with some commonly used CSS modifications, please see the example CSS file included here.

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.

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 the CSS above, the titles are "Main Player" and "Download Player" because that is what they were named in the Embed module.

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