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
- Global Style Settings
- Gallery Styling
- Channel Styling
- Entry Design
- Player Styling
- Video Editor Styling
- Quiz Styling
- Custom CSS Styles
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.
Customizing the title of your MediaSpace site, under , 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.
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.
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.
The favicon, the small icon displayed in a browser tab next the site title, can be customized in the KMS by using the , located under Modules > Customfavicon. For more information about customizing the favicon for your KMS site please see .
One of the first items to customize in the KMS is the logo. For information on how to customize the logo, please see .
See the article on Global Style Settings that lists each style.
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.
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.
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.
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.
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.
Administrators can change the language and text strings for the IVQ Player. For more information please see Interactive Video Quizzes : Localization.
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.
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.
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.