Table of Contents

Projekktor Theming

Preamble

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.

Customizing the Controlbar´s Layout

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

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:

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'

Open Tags

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.

Customizing the CSS

… 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:

classname

Description

playhead

Area indicating the current playhead position / current timeindex in percent of the total duration - “width”-style is set accordingly.

loaded

Area indicating how much of the media file has been loaded in percent - “width”-style is set accordingly.

scrubber

Wrapper for the playhead & loaded marker

scrubberdrag

A knob which enables “live scrubbing”

play

The play-button. Is visible if player is paused, invisible elsewise.

pause

The pause-button. Is visible if player is playing, invisible if paused.

prev

“Previous” button

fsexit

Exit fullscreen button. Is invisible if player is in fullscreen mode.

fsenter

Enter fullscreen button. Is invisible if player is NOT in fullscreen mode.

vslider

Wrapper for the “Volume Marker” vmarker and vknob.

vmarker

Area indicating the current volume in percent - “width”-style is set accordinigly.

vknob

The knob which can be dragged and dropped by the user in order to set the volume.

mute

The mute-button - sets volume to 0 when clicked.

vmax

The mute-button - sets volume to 100 when clicked.

title

Once an item starts playback, the innerHTML of this is filled with the current item´s title.

start

The startbutton showing up during IDLE

buffering

The buffer-indicator

Projekktor-izing Anything

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

Share your Work

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.