In fact, when ever we talk about “theming” we talk about editing just a little CSS and optionally apply some configuration options to the “controlbar”-plugin. A bare Projekktor does not require any “theming”. Its not more or less than a <div> container where all the media stuff is injected into. Nevertheless the “controlbar”-plugin is a central one - in function and visually. As such it is the designer´s plugin of choice.

Customizing the control-visuals includes two steps:

• customization of the DOM structure (optional)
• hacking the CSS, e.g. maccaco/style.css

Ok, let´s take a look on the default controlbar template. You can alter it by setting the plugin_controlbar.controlsTemplate, and plugin_controlbar.controlsTemplateFull config parameters. The one at controlsTemplate is always used while controlsTemplateFull is NULL by default. If you apply a template to it the player will grab it when ever set to “fullscreen” which allows very fancy effects and designs. Anyhow, back to the first one:

<div {fsexit}></div><div {fsenter}></div><div {play}></div><div {pause}></div><div {prev}></div><div {next}></div><div {title}></div><div {timeleft}><span {timedur}>{min_dur}:{sec_dur}</span><span {timeremaining}> | {min_rem}:{sec_rem}</span></div><div {scrubber}><div {loaded}></div><div {playhead}></div></div><div {vslider}><div {vmarker}></div><div {vknob}></div></div><div {mute}></div><div {vmax}></div>'

It looks more complex than it actually is. This is because all carriage returns, tabs and so on has been stripped out. Let´s clean things up a little:

<div {fsexit}></div>
<div {fsenter}></div>
<div {play}></div>
<div {pause}></div>
<div {prev}></div>
<div {next}></div>
<div {title}></div>

<div {timeleft}>
    <span {timedur}>{min_dur}:{sec_dur}</span>
    <span {timeremaining}> | {min_rem}:{sec_rem}</span>
</div>

<div {scrubber}>
    <div {loaded}></div>
    <div {playhead}></div>
</div>

<div {vslider}>
    <div {vmarker}></div>
    <div {vknob}></div>
</div>

<div {mute}></div>
<div {vmax}></div>

Ah, much better. Still a little bit cryptic but it begins to make sense, doesn´t it? Of course you noted the ”{}”-tags. And of course they are just place-holders which are overwritten during runtime. Assumed you have a player having the cssClassPrefix set to pp (which is the default) the controlbar plugin would generate the following HTML based on the above template:

<div class="ppfsexit"></div>
<div class="ppfsenter"></div>
<div class="ppplay"></div>
<div class="pppause"></div>
<div class="ppprev"></div>
<div class="ppnext"></div>
<div class="pptitle"></div>

<div class="pptimeleft">
     <span class="pptimedur">00:00</span>
     <span class="pptimeremaining"> | 00:00</span>
</div>
     
<div class="ppscrubber">
     <div class="pploaded"></div>
     <div style="width: 0%;" class="ppplayhead"></div>
</div>

<div class="ppvslider">
     <div class="ppvmarker"></div>
     <div class="ppvknob"></div>
</div>

<div class="ppmute"></div>
<div class="ppvmax"></div>

The following tags are replaced by class attributes and are bound to specific controlbar functions. Eg.

<div {play}>PLAY</div>

will become

<div class="ppplay">PLAY</div>

and will be bound to a “click” handler which causes the player to start playback once triggered.

This way you can use a template string like this:

'duration: {hr_dur}:{min_dur}:{sec_dur} | remaining: {hr_rem}:{min_rem}:{sec_rem}'

Assumed you have a media file with a duration of 5.640 seconds (94 minutes), after 228 seconds of playback the above string will end up in this:

'duration: 01:34:00 | remaining: 01:30:12'

All tags which are not recognized as “dedicated”- or “timecode”- tags can be used for what ever you want to. {myname} will become 'class=“ppmyname”', {foo} will become 'class=“ppfoo”' and so on. As such you get classes taking the cssClassPrefix-config-option into consideration.

Take a look into the style.css of the reference theme bundled to the distro-package. Its perfect point to start customizing from. In general it´s recommended to use relative positioning and use percentage instead of “px” where possible. Keep in mind that a player can be of different dimensions and that you may want to use the same template for both, fullscreen and “normal” mode.

If you made a theme for your own why not give us a note? We like totally love to see new themes and we would be proud to featured yours in our download section. Just follow these six simple steps to make it easier for us to integrate your kind contribution then:

• Put all relevant files (images, css-files etc.pp.) in one directory.
• Add a plain text file called “theme_id.diz” to it.
• Copy and paste the following template into the “theme_id.diz” and alter information as you like or need them:

      Theme Name: Totally Looks Like
      Version: 0.8
      Theme URI: http://themes.projekktor.com/totallylookslike
      Preview Image: http://themes.projekktor.com/totallylookslike/theme_preview.png
      Description: This theme totally looks like...
      Author: Sascha Kluger
      Author URI: http://www.spinningairwhale.com
      License: http://www.projekktor.com/license/
      controlsTemplate: ....your template here...
      controlsTemplateFull: ....your template here...      
      toggleMute: true or false

Note that “controlsTemplate”, “controlsTemplateFull” and “toggleMute” are optional and only required in case you do not use the default templates.

• Put all the content of the mentioned directory into a ZIP archive.
• Post a link to the archive to our forum.
• Let the magic do its job.