In fact, when ever we talk about “theming” we talk about editing the player´s CSS and optional applying selected configuration options to one or more plugins - e.g. the “controlbar”-plugin.

For your understanding: 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 plugins (which are in terms of the MCV-pattern “views”) usually add DOM-containers to the player´s container or somewhere else on the page.

The official packed Projekktor distribution features two built-in plugins: Controlbar and Display. So theming this distributions usually end up a customized CSS file replacing the default “theme/style.css” and sometimes providing custom config parameters for one or both of the mentioned plugins.

Ok, let´s have a look on the default controlbar template. You can alter it by setting the plugin_controlbar.controlsTemplate config parameters:

<ul class="left"><li><div %{play}></div><div %{pause}></div></li><li><div %{title}></div></li></ul><ul class="right"><li><div %{fsexit}></div><div %{fsenter}></div></li><li><div %{vmax}></div></li><li><div %{vslider}><div %{vmarker}></div><div %{vknob}></div></div></div></li><li><div %{mute}></div></li><li><div %{timeleft}>%{hr_elp}:%{min_elp}:%{sec_elp} | %{hr_dur}:%{min_dur}:%{sec_dur}</div></li><li><div %{next}></div></li><li><div %{prev}></div></li></ul><ul class="bottom"><li><div %{scrubber}><div %{loaded}></div><div %{playhead}></div><div %{scrubberdrag}></div></div></li></ul>

It looks more complex than it actually is. This is because all carriage returns, tabs and so on has been stripped out. Let´s get them back in:

<ul class="left">
   <li><div %{play}></div><div %{pause}></div></li>
   <li><div %{title}></div></li>
</ul>

<ul class="right">
   <li><div %{fsexit}></div><div %{fsenter}></div></li>
   <li><div %{vmax}></div></li>
   <li><div %{vslider}><div %{vmarker}></div><div %{vknob}></div></div></div></li>
   <li><div %{mute}></div></li>
   <li><div %{timeleft}>%{hr_elp}:%{min_elp}:%{sec_elp} | %{hr_dur}:%{min_dur}:%{sec_dur}</div></li>
   <li><div %{next}></div></li>
   <li><div %{prev}></div></li>
</ul>

<ul class="bottom">
  <li><div %{scrubber}><div %{loaded}></div><div %{playhead}></div><div %{scrubberdrag}></div></div></li>
</ul>

Ah, much better. But a little bit cryptic, though. 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 - the timecodes are just examples of course:

<ul class="ppleft">
   <li><div class="ppplay"></div><div class="pppause"></div></li>
   <li><div class="pptitle"></div></li>
</ul>

<ul class="ppright">
   <li><div class="ppfsexit"></div><div class="ppfsenter"></div></li>
   <li><div class="ppvmax"></div></li>
   <li><div class="ppvslider"><div class="ppvmarker"></div><div class="ppvknob"></div></div></div></li>
   <li><div class="ppmute"></div></li>
   <li><div class="pptimeleft">00:30:12 | 00:33:44</div></li>
   <li><div class="ppnext"></div></li>
   <li><div class="ppprev"></div></li>
</ul>

<ul class="ppbottom">
  <li><div class="ppscrubber"><div class="pploaded"></div><div class="ppplayhead"></div><div class="ppscrubberdrag"></div></div></li>
</ul>

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.

… is easy. As stated above all layout relevant stuff getting to live by a player instance is managed via plugins. Once you know the class-names of plugin-generated containers you can pimp them via CSS. From this point of view the CSS bundled with the official distribution is a CSS designing the output of the “controlbar-” and “display-” plugins.

To simplify things a little all class-names are prefixed with “pp” (which is a short for “Projekktor Player”). This prefix can be reconfigured for each installation but most people use the default “pp” one. Those who don´t should care for the relevant CSS changes for themselves.

Below the classes used in the official distro - without prefix:

… a very cool but complex feature to be described later.

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. ZIP all relevant files and post a link to the archive to your forum. Don´t forget to provide your name and URL to your homepage. Please note that we will only re-publish themes which are under GPL.