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
seriformonospace) 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. |  |
