Styling


About

The Styling Module for Video Portal (aka MediaSpace) and KAF administrators, provide the ability to create a new style based on most common use cases. With the Styling module, admins can view the newly generated theme, and share it with other admins before setting it up on production.

This guide demonstrates the V2UI Styling capabilities, for the new Theming Feature Set, see Theming.

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

Custom CSS Fonts

Enable - Select Yes to enable the Styling module

Fonts - Select +Add"fonts" These fonts will be available in custom CSS and in the Font selectbox on the styling page

  • familyName- Font family name that will be used in CSS and will be appended to the Font select box on the styling page.
  • fallbackFonts- Font families and font types which should be used as a fallback when the desired font family is not ready or doesn't exist (comma-separated list, like in CSS specifications).

    Specifying generic font type (like serif or monospace) is mandatory.

    Example: 'Helvetica Neue',Arial,sans-serif

  • type - Font assets source type:

    • System font - use worldwide supported font by name

    • Import from URL - use an external font service (like Google Fonts)

    • Upload files - upload your own font asset files

isCssApplied - This field indicates whether the style created in the Styling Module is applied on the site or not. Click Reset to clear all previously set styles.

The Styling Configuration Page

The Styling Configuration page provides administrators with an interface where they can modify look and feel attributes like text color, background color, and fonts.

Use the link provided in the description to access the new Styling Page.

The Styling Configuration page displays.

Here is a list of the items that can be modified in the Styling module:

Tab Location

Attribute

Description

Visual

Fonts & Text

Font

This modifies the default MediaSpace font.

 

Fonts & Text

Text Color

This modifies the default text color within MediaSpace.

 

Fonts & Text

Links Color

This modifies the color of hyperlinked text within MediaSpace, as well as certain icons and other dominant UI elements.

 

Fonts & Text

Links Color (:hover)

This modifies the color of hyperlinked text that is currently being interacted with by the end user, as well as certain icons and other dominant UI elements that are being interacted with by the end user

 

Page Elements - Buttons

Buttons Color

This modifies the text color and border color of buttons.

 

Page Elements - Buttons

Buttons Color (:hover)

This modifies the text color of buttons when they are active or being hovered by a user.

 

Page Elements - Buttons

Primary Buttons Color

This modifies the background color and border color of primary buttons.

 

Page Elements - Buttons

Primary Buttons Color (:hover)

This modifies the background color of primary buttons when they are active or being hovered by a user.

 

Page Elements - Buttons

Danger Buttons Color

This modifies the background color and border color of danger buttons.

 

Page Elements - Buttons

Danger Buttons Color (:hover)

This modifies the background color of danger buttons when they are active or being hovered by a user.

 

Page Elements - Background

Header Background

This modifies the background color of the KMS header. This area that contains the logo and primary navigation.

 

Page Elements - Background

Footer Background

This modifies the background color of the KMS Footer at the bottom of each page.

 

Page Elements - Background

Page Background Color

This Modifies the background color of the primary content wrapper.

 

Page Elements - Background

Tags Color

This modifies the border as well as font color of any tags associated to videos.

 

Menus - Header Navigation

Header Navigation Text

This modifies the color of both the text and the underline effect on the primary navigation.

 

Menus - Header Navigation

Header Navigation Text (:hover)

This modifies the color of both the text and the underline effect on the primary navigation when hovered.

 

Menus - Dropdown Menus

Dropdown Menu Text

This modifies the color of the text and icons in dropdown menus

 

Menus - Dropdown Menus

Dropdown Menu Text (:hover)

This modifies the color of the text and icons in dropdown menus when that element is actively hovered.

 

Menus - Dropdown Menus

Dropdown Menu Background Color

This modifies the background color of a dropdown menu.

 

Menus - Dropdown Menus

Dropdown Menu Background Color (:hover)

This modifies the background color when a child element of a dropdown menu is hovered or clicked.

 

Extras

Black & White Home Page Thumbnails

This applies a black and white filter to the home page playlist thumbnails below the carousel. On hover, filter is removed, and thumbnail will come back to full color.

 

Extras

Black & White Home Carousel Thumbnails

This applies a black and white filter to the home page carousel background thumbnails. The small thumbnail in the carousel will keep its color.

 

Extras

Black & White Channel/Galleries Thumbnails

This applies a black and white filter to the gallery thumbnails, and the channel’s playlist and media thumbnails as well (but not to the header). On hover, filter is removed, and thumbnail will come back to full color.

 

Extras

Black & White Channel Thumbnails

This applies a black and white filter to the channel’ thumbnails within the All-Channels and My-Channels pages. On hover, filter is removed, and thumbnail will come back to full color.

 

Extras

Remove Media Type Icon

Remove the little icon indicating the media type from the thumbnails top left corner.

 

Extras

Carousel Buttons Always On

Set the left and right buttons of the home carousel to always show. When off, the buttons will be displayed only when hover.

 


Was this article helpful?
Thank you for your feedback!
In This Article
Related Articles
Back to top

Never miss a thing!

Subscribe to our customer newsletter and our release notes updates, so you always get the best out of Kaltura.
Newsletter