6. Customizing

TubePress is designed to be easily customized. The appearance and structure of the galleries and videos it generates can be changed with some simple CSS and/or HTML modifications.

6.1 CSS

By adding a few snippets of CSS to your site, you can completely change the appearance of your video galleries and videos. This includes (but is not limited to)

  • the number of videos per row

  • the properties of the fonts

  • the alignment of videos and their surrounding text

  • the overall width/height of the thumbnail gallery

By default, TubePress will use the CSS stylesheet found at ui/gallery/css/tubepress.css. It is strongly recommended that you do not edit this file directly, as it will be regularly overwritten on upgrades to TubePress. Instead, simply override/add any TubePress-specific CSS properties via your site's existing CSS files.

A very easy way to experiment with CSS changes is by using FireBug. Here's a short introductory video about FireBug that will help you get started quickly

6.2 HTML Templates

Sometimes you need to change not just the style of the galleries, but the entire HTML structure. TubePress also makes this easy via customizable templates that require no special knowledge to edit. By default, TubePress ships with the following four templates:

  • ui/gallery/html_templates/default.tpl.php

    TubePress's standard template structure. Well suited for most sites.

  • ui/gallery/html_templates/sidebar.tpl.php

    A template designed for sidebars.

  • ui/gallery/html_templates/iphone-ipod.tpl.php

    TubePress will use this template when it detects the client is using an iPod/iPhone. It will allow the user to play your videos using Apple's YouTube player while remaining on your site.

  • ui/single_video/html_templates/default.tpl.php

    TubePress's default template for embedding a single video along with its meta information

The procedure for customizing templates is as follows

  1. Make a copy of the template you'd like to modify. This will protect your changes from future upgrades to TubePress. Make sure you store the copy alongside the other templates, either in ui/gallery/html_templates or ui/single_video/html_templates, as these are the only permissible locations for templates.

  2. Edit your copied template to suit your needs. Generally, the variables found in the default templates are the only ones available to the template.

  3. Tell TubePress to use your new template via the template shortcode. For instance 

    [tubepress template="my_custom_template.tpl.php"]

    would tell TubePress to use the template located at ui/gallery/html_templates/my_custom_template.tpl.php. Or if you're embedding a single video 

    [tubepress video="J51kfduN5aA" template="my_custom_template.tpl.php"]

    would tell TubePress to use the template located at ui/single_video/html_templates/my_custom_template.tpl.php

Prev   Next
5. Embedding a Single Video Home 7. TubePress Shortcodes