How do I rebrand/customize the Centova Cast web interface?

Question:

How can I rebrand/customize the Centova Cast web interface to match my web site or corporate identity?

Answer:

First, please note that per this article, we do not provide technical support for, nor any assistance with, any type of Centova Cast modifications. Modifying the Centova Cast interface may interfere with the operation of Centova Cast, and cause issues to arise which may appear to be unrelated to your modifications. Should our support representatives feel that your modifications are interfering with the proper operation of Centova Cast, we reserve the right to discontinue technical support for any issues you experience with Centova Cast after modifications are made.

Also note that this article is intended for users who want to apply advanced customizations to the Centova Cast user interface; if you only want to replace the Centova Cast logo with your own, please see this article instead: How do I apply my own logo to Centova Cast?

Having said that, we have made the following tips available for customers wishing to customize Centova Cast at their own risk:

Basics

The Centova Cast user interface (UI) is based entirely on XHTML+CSS. You (or your web developer) will need to be reasonably familiar with XHTML and CSS in order to customize or rebrand the UI.

The Centova Cast UI has been designed to use a tableless, CSS-based layout. This allows you to make a wide range of changes -- from simple logo replacements, to drastically altering the appearance of the UI -- by editing only the CSS files, and without modifying a single line of XHTML code.

File Locations

Centova Cast's UI is separated into two portions:

  • Theme files: These are XHTML templates and CSS files stored in the theme/ subdirectory of your Centova Cast web interface directory. These are used to change the overall appearance and page layout of Centova Cast's user/admin areas and login page. Most customers will only need to modify these files to rebrand the Centova Cast UI.

  • System templates: These are XHTML templates stored in the system/templates/ subdirectory of your Centova Cast web interface directory. These files are used by Centova Cast to display output from all of its internal features, ranging from account lists to configuration editing and so-on. These files are intended for internal use and tend to contain more advanced template markup. Incorrect modification of these files can easily break the Centova Cast UI, so we strongly recommend that you avoid modifying these files.

Theme File Descriptions

Inside the Theme Files directory, you will find the following files:

  • style.css

    The main stylesheet for the Centova Cast user/admin UI. You can customize the vast majority of Centova Cast's appearance using this stylesheet.

  • ie.css

    An add-on stylesheet used only for Internet Explorer. Allows IE-specific styles to be applied to the Centova Cast UI.

  • login.css

    The main stylesheet for the Centova Cast login page. You can customize the vast majority of the login page's appearance using this stylesheet.

  • playlist.css

    The stylesheet for the playlist editor.

  • templates/page.tpl

    The main XHTML layout file for the Centova Cast user/admin UI. This defines the overall XHTML markup used to format the Centova Cast user/admin UI.

  • templates/login.tpl

    The main XHTML layout file for the Centova Cast login page. This defines the overall XHTML markup used to format the Centova Cast login page.

  • templates/navigation_block.tpl

    The XHTML layout file used to format "blocks" of content in the left-hand column of the Centova Cast user/admin UI.

System Template Descriptions

The system templates are intended for internal use by Centova Cast, and are thus not documented at this time. If you feel that you must modify these templates, the filenames for each are reasonably self-explanatory.

Template Guide

If you are an advanced user and need to make more advanced modifications to the templates (and more specifically, to the template markup), please download the DirecTemplate Template Author's Guide from the Centova Cast Documentation Page. This provides advanced developer documentation for the template markup used by DirecTemplate, the template library used internally by Centova Cast.

Retaining Template Modifications When Upgrading

Directly modifying the Centova Cast template files will work fine until it comes time to upgrade Centova Cast, at which time all of your customizations will be overwritten during the upgrade.

If you need to ensure that your modified templates persist across upgrades, you can create a directory named custom inside the template directory and place your modified template inside the custom directory instead of directly modifying the original template file. Any templates in the custom directory will override their equivalents in the parent directory.

For example, if you wanted to modify the theme/templates/login.tpl template, you would create a theme/templates/custom/ directory, copy login.tpl into it, and make your modifications to themes/template/custom/login.tpl.

Please note that Centova Cast's templates may change between releases so it is still important that you update your templates after each upgrade to incorporate any new changes to the new templates, otherwise elements of your user interface may stop working.

Also note that any modified image or CSS files will still be overwritten during upgrades. If you need to retain your image or CSS files it is important to give them unique filenames which do not conflict with the original filenames, and modify the templates to reference your customized versions.