How To: Theme the 1pixelout Flash Player - Part 1

Oct 22, 2007 By Matt Farina in

Now that we have the audio module setup, let's take a look at how to theme the default flash player that comes with the audio module. The 1pixelout flash player comes standard in gray. If you are like me you probably want the flash player to have the same color scheme as your website. Or, at least a color scheme that doesn't look out of place on your website.

The 1pixelout player is themed, by default, via the function theme_audio_1pixelout_node_player. Let's start by overriding this function. Drupals theme system lets us have a function titled either phptemplate_audio_1pixelout_node_player or mytheme_audio_1pixelout_node_player (where mytheme is the name of your theme) that overrides the default function. So, let's start with:

<?php
function phptemplate_audio_1pixelout_node_player($node, $options = array()) {
  return theme_audio_1pixelout_node_player($node, $options);
}
?>

theme_audio_1pixelout_node_player is still going to do the heavy lifting for us (i.e., the theming) which is why we return the output of that function. We are going to modify the options which is what will theme the player.

1pixelout

The list of themable options:

  • autostart=yes - The player will automatically open and start to play the track (default value is no)
  • loop=yes - The track will be looped indefinitely (default value is no)
  • bg=0xHHHHHH - Background colour option (where HHHHHH is a valid hexadecimal colour value such as FFFFFF or 009933)
  • leftbg=0xHHHHHH - Left background colour
  • rightbg=0xHHHHHH - Right background colour
  • rightbghover=0xHHHHHH - Right background colour (hover)
  • lefticon=0xHHHHHH - Left icon colour
  • righticon=0xHHHHHH - Right icon colour
  • righticonhover=0xHHHHHH - Right icon colour (hover)
  • text=0xHHHHHH - Text colour
  • slider=0xHHHHHH - Slider colour
  • loader=0xHHHHHH - Loader bar colour
  • track=0xHHHHHH - Progress track colour
  • border=0xHHHHHH - Progress track border colour

Let's modify our phptemplate_audio_1pixelout_node_player function to customize a few of these characteristics.

<?php
function phptemplate_audio_1pixelout_node_player($node, $options = array()) {
  $defaultoptions['leftbg'] = '0x000000';
  $defaultoptions['rightbg'] = '0x000000';
  $defaultoptions['lefticon'] = '0xFFFFFF';
  $defaultoptions['righticon'] = '0xFFFFFF';
  $options = array_merge($defaultoptions, $options);
  return theme_audio_1pixelout_node_player($node, $options);
}
?>

This sets the default left background, right background, left icon, and right icon colors. The options can still be overridden on a case by case basis throughout the theme. We will look at that in Part 2.

  • Add new comment