TubePress Themes

The HTML output of TubePress is entirely customizable via TubePress "themes". If you need to change any way your gallery or videos are presented, you should do so via a theme. TubePress themes

  • use no special syntax (just plain HTML and PHP)
  • are easy to create and use
  • are "upgrade safe" (i.e. you can carry them over between TubePress versions)
  • are uniquely identified by name

Usage

You can activate themes by using the - wait for it - theme shortcode attribute and supplying the name of the theme you want to use. e.g. in order to activate a theme called "my_slick_theme", you would use the following shortcode:

Pre-Packaged

TubePress ships with a handful of themes located at tubepress/ui/themes. Here's a short description each:

Theme Name Description
default

The "fallback" theme that TubePress will use if you don't specify otherwise via the theme shortcode attribute. Provides an elegant gallery/video layout suitable for many sites.

sidebar

A theme well suited for sidebar/widget galleries. Aligns video thumbnails in a single vertical column.

vimeo

Nearly identical theme to default, but provides HTML links to video author page on vimeo.com.

youtube

Nearly identical theme to default, but provides HTML links to video author page on youtube.com.

To activate one of these built-in themes, simply use the theme shortcode attribute. e.g. to activate the vimeo theme, your shortcode would look something like

Creating Your Own Theme

It's dead simple to create and use your own theme. Let's create a theme called mytheme. There are two steps involved:

  1. Create a directory to house your theme. In WordPress, you'll want to save the directory at wp-content/tubepress-content/themes/mytheme. In standalone PHP, save the directory to tubepress/content/themes/mytheme. Choose a theme name that doesn't contains spaces, and is all lowercase.
  2. Activate your theme via the theme shortcode attribute. e.g.

That's it! You've created a perfectly functional theme. But obviously this theme doesn't do special anything yet. In fact, TubePress will recognize that your theme is missing elements and will instead use all of the theme contents from the default theme found at tubepress/ui/themes/default.

This is an important concept: If TubePress can't find a theme element in your custom theme, it will instead use the missing element from tubepress/ui/themes/default. This way, your theme can contain just the elements you want to customize. So, what are the theme elements that you can customize? Let's look at the contents of the default theme at tubepress/ui/themes/default:

Theme Element Description
gallery.tpl.php

The HTML/PHP template that TubePress will use to display a video thumbnail gallery.

single_video.tpl.php

The HTML/PHP template that TubePress will use to display a single video with meta information.

players

Directory containing HTML/PHP templates for use by the various TubePress players (e.g. Shadowbox, jqModal, etc)

embedded_flash

Directory containing HTML/PHP templates that TubePress will use to generate the embed code for the various video player implementations (e.g. YouTube, Vimeo, JW FLV Player, etc).

Let's say that you want to customize just the HTML structure of the video galleries that TubePress generates. You simply need to

  1. Copy the gallery.tpl.php template into your new theme.
    e.g. cp tubepress/ui/themes/default/gallery.tpl.php tubepress/content/themes/mytheme/gallery.tpl.php
  2. Edit tubepress/content/themes/mytheme/gallery.tpl.php to suit your needs

The procedure is identical for customizing other elements of your theme: just copy the corresponding file from tubepress/ui/themes/default and place it in the corresponding spot in your tubepress/content/themes/mytheme directory.

CSS and Styling

Often you can get away with simply making a few CSS changes to your site, while keeping the HTML structure the same. While TubePress has supported CSS in themes, this feature is now deprecated. Instead, you should keep your TubePress-specific CSS in a separate CSS file that you maintain on your own. WordPress users can benefit from this plugin to achieve this.

customize/themes.txt · Last modified: 2012/01/02 22:47 by Eric Hough
GNU Free Documentation License 1.3