Customizing the Look and Feel of Your MediaSpace

MediaSpace allows you to override the default style that is included in the application. The default style is defined in bootstrap.css. Since the default theme in MediaSpace is built on top of the Twitter Bootstrap framework, you can provide a standard Bootstrap CSS and override the default style that MediaSpace provides out-of-the-box.

This section defines the different options to “skin” MediaSpace and adjust it to your own brand colors.

Choosing a Different Included Style

MediaSpace includes 13 additional styles to choose from in addition to the default style. These styles are open source CSS files available from Bootswatch 2.X. With a single selection, from your Kaltura MediaSpace Administration Area, you can quickly change the style of your MediaSpace. For example:

To choose a different Bootswatch CSS

  1. On the Configuration Management panel of the Kaltura MediaSpace Administration Area, open the Bootswatch tab.
  2. Under enabled, select Yes.
  3. Under bootstrap, select the Bootswatch CSS style you would like to apply to your site.
  4. Click Save.
  5. Refresh your MediaSpace site to see the updated style

Uploading your Own Custom Style

You can create your own custom Bootstrap CSS and upload it via the MediaSpace Administration Area. You can write a CSS using your favourite CSS editing tool, or use own of the many dedicated Bootstrap tools that generate a standard Bootstrap CSS without the need to do any coding. Refer to the Kaltura MediaSpace Styling Guide for information on how you can create your own custom CSS file before you upload it to MediaSpace.

To upload a custom CSS file

  1. On the Configuration Management panel of the Kaltura MediaSpace Administration Area, open the Cssupload tab.
  2. Under enabled, select Yes.
  3. Click Save. You will not be able to upload a file until the module is enabled.
  4. Under the bootstrap section, click the upload link.
  5. Browse to your Bootstrap CSS file and click Upload.
  6. The additional section, allows you to provide a separate CSS file for other CSS classes used in MediaSpace that are not part of the standard Bootstrap CSS file. If you want to override any of these classes, create a separate CSS file and upload it through the upload link in this section
  7. Click Save.
  8. Refresh your MediaSpace site to see the updated style.

Back

In This Article