HubDub Theming: A "How To" Guide

The Engagement 4Cast

HubDub Theming: A “How To” Guide

Avatar

Blog

03/06/2015

Alexis Findiesen

Previously, we announced our new interactive video module for Drupal, HubDub. We followed that up with a more detailed under-the-hood look at how HubDub works and a discussion about a key part of the technology that drives HubDub: jPlayer. Now, for those of you who have downloaded the free module, here’s a quick “How To” on theming with HubDub!

HUBDUB THEMING

The HubDub module uses the jPlayer class system in order to work well with library updates. As such, themers familiar with skinning jPlayer will recognize most of these classes, though many of them have been restructured for better responsiveness and simplification of the controls. There are two places to look for theme files – both live within the theme folder of the module. “Skins” is for the video controls themselves (play, seek, fullscreen), while “Overlays” is for the HubDub popups design. The module uses SASS for CSS preprocessing, and will continue to be updated for optimized CSS organization and cleanliness of code.

 

THEMING VIDEO CONTROLS

The video controls are themed through the “skins” subdirectory of the module’s “theme” folder. This is to separate the overall look of the player from the look of the overlays, and maps better to the original setup of jPlayer. We plan on adding more skins to choose from in the future, and this structure supports that.

First Bar (Displays at all times)

Second Bar (Displays while hovering on the video controls)

Main Play Button Overlay

.jp-video-play-icon – the centered play button, set with an svg background with background-size property. If you need greater support for older browsers, replace this with a raster instead and reset the background-size property.

Additional Optional Controls

.jp-stop – available stop button which is not currently enabled by default, as the pause button effectively reaches the same goal. If you wish to turn it on, you’ll need to edit the hubdub-video.tpl.php file, as well as style and position it to your liking.

.jp-previous and .jp-next – available for playlists, but not currently enabled by default and functionality has not been tested with the overlays – enable at your own risk!

There are also a ton of playlist options which we have not enabled, but which jPlayer supports, so if you’re feelin’ fancy, go ahead and get down and boogie with it. 🙂

THEMING OVERLAYS

The overlays control is set within the module theme folder, inside of the “overlays” subdirectory. Currently has very minimal styling other than to set a semi-transparent black background on the overlays with white copy inside.

About the Engagement 4Cast

4Site Interactive Studios is a talented troupe of web professionals who are passionate about creating tools to support digital marketers. We love to hear from our community! Reach out to us with your thoughts and questions. And don’t forget to subscribe below to get notified when we post new blogs – no spam, just content👍🏼

Subscribe & stay ahead of the crowd with sage marketing tips and predictions.