Using CSS to Customize 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 article describes how to “skin” MediaSpace and adjust it to your brand colors.

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 favorite 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 CSS file.
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.

Was this article helpful?

Thank you for your feedback!

Name

Email

Submit your feedback

Thank you! Your comment has been submitted.