Creating a Custom Theme for MediaSpace

Printer-friendly version

In Kaltura MediaSpace, you can create themes to override the generic view scripts of the application.

A custom theme can override some or all of the generic view scripts of MediaSpace. A view script that is not implemented in the custom theme will be taken from the generic view scripts.

A theme includes two sets of folders, as follows:

{mediaspace install path}/
           themesCustom/
              {custom theme folder}
           public/themesCustom
              {custom theme folder}

Under the MediaSpace Installation path, all of the custom themes that you want to overiride should be in the main themes folder.

Under the main themes folder (below mediaspace installation path) should be implemented all the different view scripts that a custom theme wishes to override

All of the theme assets (images, css files and javascript files) that are accessible to the web should be placed in the public/themes folder.

The folder structure of a theme should reflect the same folder structure of the different views and layouts scripts.

{themename}/views/scripts/
{themename}/views/scripts/playlist/
{themename}/views/scripts/install/
{themename}/views/scripts/redirector/
{themename}/views/scripts/partials/
{themename}/views/scripts/partials/mymedia/
{themename}/views/scripts/partials/upload/
{themename}/views/scripts/partials/myplaylists/
{themename}/views/scripts/partials/admin/
{themename}/views/scripts/partials/channels/
{themename}/views/scripts/partials/entryItem/
{themename}/views/scripts/partials/widgets/
{themename}/views/scripts/category/
{themename}/views/scripts/channels/
{themename}/views/scripts/gallery/
{themename}/views/scripts/error/
{themename}/views/scripts/user/
{themename}/views/scripts/index/
{themename}/views/scripts/entry/
{themename}/layouts/scripts/
        

In addition, a theme can also override view scripts of the different modules.

Refer to list of view scripts available in MediaSpace.

Info file

Themes can include an optional file called theme.info, containing a short description of the theme.

{themename}/theme.info

Dark / Light Theme for the Header

This is set through the MediaSpace admin (in the ‘Header’ menu, under header style).

Modifying the CSS:

From your MediaSpace root folder location, go to a folder named ‘themesCustom’, and create a new folder. The new folder name will be the name of the new theme.

In Unix, the commands would be:

>cd mediaspace_v4(version number)
>cd themesCustom
>mkdir themename

Go back to the MediaSpace root folder, and into:  ‘public/themesCustom

Create a new folder with the same name:

>cd ..
>cd public/themesCustom
>mkdir themename

Go to the newly created folder, and create a folder named: ‘css’. In the ‘css’ folder, create a file named: ‘theme.css’.

>cd themename
>mkdir css
>cd css

This file will override MediaSpaces’s default css, once you change the theme in the MediaSpace admin - to the newly created folder (In the ‘Application’ tab): 

Use Firebug (or a similar tool) to find the CSS selector which is already being used to create the existing look. Use the exact same selector in the theme.css file.

Example for theme.css file content:

body {    
            color: #000099;
            background-color: #dddddd;
      }

 Modifying Buttons and Icons

Replace the images/ 'sprite' – that are in: [MediaSpace folder]\public\img with your custom images / sprites.

  

Document type: 
Product version: