CUSTOM HTML

Background

Vidcaster's theme system uses the Django templating language. For a basic understanding of how Django works, see the Django documentation. The Vidcaster theme API is a combination of built-in Django functionality and custom Django tags and variables.

Vidcaster's prebuilt themes are coded in Django as part of the code base of the Vidcaster application. Each prebuilt theme consists of several template files. The code within these files is different for each theme, although the template names are always the same.

In order to code your own custom Vidcaster theme, we make make these template files available to you via the Custom HTML feature, which is core to Vidcaster plans Gold and above.

The basic purpose of the Custom HTML feature is to provide access to the template files for each theme, allowing you to customize a brand new theme based on the code base of any prebuilt theme you choose.

The sky's the limit on what you can do with your own theme. The entire Vidcaster.com public-facing site is built using a Vidcaster custom theme!

Getting Started

  1. Familiarize yourself with Django.
  2. Review Vidcaster prebuilt themes, the theme outline documentation, and Photoshop template examples.
  3. Select a prebuilt theme from Vidcaster Admin > Site > Design to use as your starting point.
  4. Design a mockup in HTML or Photoshop.
  5. Code your design within the Django templates inside Vidcaster Admin > Site > Custom HTML.

In order to start customizing your theme, navigate to the Custom HTML area in Vidcaster Admin > Site > Custom HTML. You will see a list of all the available template files you can customize. See our theme content outline for an overview of the main page templates. The files that are loaded into the code editor are the original files of the prebuilt theme you have currently selected in Site > Design.

Before you have made edits to your Custom HTML files, you can toggle between prebuilt themes to get new template files in the code editor. HOWEVER, once you start editing files in the code editor, those edited files will override their respective equivalents within the prebuilt theme. This will result in a very broken looking theme. It's important to stick with one prebuilt theme as the code base, once you start editing it. If you edit every single file within Custom HTML (rather than just a few), then it of course doesn't matter which prebuilt theme you have chosen, since the entire theme will be overwritten with your custom theme. It's a good idea to have all your templates customized when you're done with your custom theme, to make sure your theme is completely protected and takes precedence over any other prebuilt theme.

Note: At the current time, Vidcaster does not support static asset uploads, so you will have to host JavaScript, CSS, and image files on your own server or hosting service.

A great way to get started is to review the templates on the theme content outline and start designing in Photoshop or directly with HTML locally or your own server. You can then integrate your code with Django in the Custom HTML area when you're ready. Another helpful thing to do is go through the prebuilt themes and look at the code within the Custom HTML idea to familiarize yourself with the basic structure and Django templates.

Download a zip file of the four main templates as psd examples. These are helpful in understanding the main elements of a Vidcaster theme and giving you some layout ideas. Don't be afraid to go crazy though, there are no limits in terms of what is possible with your design and layout!

Next section →