Author Topic: Customizing 1 Pixel Out Player  (Read 5582 times)

matt1027

  • Full Member
  • **
  • Posts: 21
Customizing 1 Pixel Out Player
« on: March 01, 2010, 04:24:50 pm »
I would like to customize the 1 Pixel Out Player in PowerPress to have the same background image that I used to customize it in the podPress plugin.

In podPress I found the code to do that in wp-content > plugins > podpress > podpress.js. 

I created my own custom background image to replace the original image included with podPress and tweaked the spacing.

Does anyone know what file would contain the code to add a background image to the 1 Pixel Out player?

Thanks.

angelo

  • CIO, RawVoice
  • Administrator
  • Hero Member
  • *****
  • Posts: 4483
Re: Customizing 1 Pixel Out Player
« Reply #1 on: March 01, 2010, 10:00:25 pm »
can you link to a screen shot how this looked in PodPress?

matt1027

  • Full Member
  • **
  • Posts: 21
Re: Customizing 1 Pixel Out Player
« Reply #2 on: March 03, 2010, 02:04:53 pm »
Here are some screenshots for anyone interested.

Added: Apparently the attached image is not visible unless you are logged in.  I haven't figured out how to make the insert image feature work yet.
« Last Edit: March 03, 2010, 06:26:15 pm by matt1027 »

angelo

  • CIO, RawVoice
  • Administrator
  • Hero Member
  • *****
  • Posts: 4483
Re: Customizing 1 Pixel Out Player
« Reply #3 on: March 03, 2010, 03:20:27 pm »
I sent you a solution via email, is it ok to post here as well?

matt1027

  • Full Member
  • **
  • Posts: 21
Re: Customizing 1 Pixel Out Player
« Reply #4 on: March 03, 2010, 06:13:30 pm »
Yes.

The Listen Wrapper in the podPress settings is a background image called listen_wrapper.gif.  It's controlled by this line of code in podpress.js.


if(podPressMP3PlayerWrapper) {strResult += '<table width="342" height="40" cellpadding="0" cellspacing="0" background="'+podPressBackendURL+'images/listen_wrapper.gif"><tr><td width="45">&nbsp</td><td style="vertical-align: middle;">';}


I created my own background image and then modified the table above that displays it and the player.


matt1027

  • Full Member
  • **
  • Posts: 21
Re: Customizing 1 Pixel Out Player
« Reply #5 on: March 03, 2010, 10:17:26 pm »
Okay, following your instructions on how to customize the 1 Pixel Out audio player in PowerPress, here's what I did and it worked great!

I created an image (powerpress_player_background.gif) and put it in the images file in the theme's directory. Then I added the following code to the CSS file in the theme's directory.


.powerpress_player {
   background-image:url(images/powerpress_player_background.gif);
   background-repeat: no-repeat;
   background-position: 95px 17px;
   padding-top: 10px;
   margin-bottom: -5px;
}

The text image isn't clickable but it helps people who have no idea what the player image is and that it will play an audio program if they click on it.  That might seem surprising but they are out there.

I'm attaching an image of screenshots but they won't show up in the post unless you log in to the forum.

angelo

  • CIO, RawVoice
  • Administrator
  • Hero Member
  • *****
  • Posts: 4483
Re: Customizing 1 Pixel Out Player
« Reply #6 on: March 15, 2010, 04:55:34 pm »
This is a great example how to customize PowerPress for your blog. With the next update of PowerPress coming in the next few days (version 1.0.7) you will be able to turn off the option of displaying the player above/below your post content and instead us the PowerPress the_powerpress_content() and get_the_powerpress_content() theme functions to place the player and/or media links where you want them in your theme. Documentation on this is available on our help site, here is a direct link: http://help.blubrry.com/blubrry-powerpress/customizing-with-your-wordpress-theme/.

matt1027

  • Full Member
  • **
  • Posts: 21
Re: Customizing 1 Pixel Out Player
« Reply #7 on: March 12, 2011, 09:50:38 pm »
It's a year later now, since the previous posts in this thread, and I just upgraded WordPress from something like 2.9 to 3.1.  I also upgraded PowerPress to the new 2.0.

The background image that I was using to customize the appearance of the audio player is no longer showing up.

I created an image (powerpress_player_background.gif) and put it in the images file in the theme's directory. Then I added the following code to the CSS file in the theme's directory.

.powerpress_player {
   background-image:url(images/powerpress_player_background.gif);
   background-repeat: no-repeat;
   background-position: 95px 17px;
   padding-top: 10px;
   margin-bottom: -5px;
}

I think it may be related to WordPress rather than the PowerPress plugin.  Because I have an old version (2.8) of WordPress running on my machine with XAMPP under localhost and I upgraded the PowerPress plugin for that installation and the background image shows up there.

If you look at my previous posts you'll see an image of how the background image appears when it is working right.

Does anyone have any ideas about what happened hear or another way to accomplish the same thing?  Thanks.

matt1027

  • Full Member
  • **
  • Posts: 21
Re: Customizing 1 Pixel Out Player
« Reply #8 on: March 13, 2011, 11:33:59 am »
I upgraded a localhost/XAMPP installation of WordPress to version 3.1 and PowerPress 2.0.

The background image scheme for the PowerPress player as implemented above works with the old default theme but not with the new Twenty Ten WP theme and not with my custom theme.

Does that shed any light on the issue?

Thanks.

matt1027

  • Full Member
  • **
  • Posts: 21
Re: Customizing 1 Pixel Out Player
« Reply #9 on: March 13, 2011, 01:00:55 pm »
Update:

I discovered that if I put the style for .powerpress_player in the head element, as the last thing, right before the closing head tag, then it will display the background image.  And I had to change the positioning.

<style type="text/css">
<!--
   .powerpress_player {
      background-image: url(images/powerpress_player_background.gif);
      background-repeat: no-repeat;
      background-position: 0px 0px;   /*x-pos y-pos*/
      padding-top: 10px;
      margin-top: -11px;
      margin-bottom: -6px;
      }      
-->
</style>

So it's an issue of the way the stylesheet is being applied or superseded by something else.

I would like to find out how to put the style back in the main stylesheet just to keep all styles together and keep things simple for future maintenance.

If you have any thoughts or ideas I would appreciate them.

Thanks.

angelo

  • CIO, RawVoice
  • Administrator
  • Hero Member
  • *****
  • Posts: 4483
Re: Customizing 1 Pixel Out Player
« Reply #10 on: March 13, 2011, 05:00:56 pm »
You figured out a lot before I had a chance to read your thread!

Here's the deal, there's a function in your header.php for your theme. When at function wp_head() is called, all the plugins including PowerPress adds its stuff. Most themes following the call then include their own CSS files, that way the last applied CSS takes priority. I'll bet money the 20-10 theme includes it's css before the wp_head call.

matt1027

  • Full Member
  • **
  • Posts: 21
Re: Customizing 1 Pixel Out Player
« Reply #11 on: March 13, 2011, 05:40:47 pm »
Thanks for answering.  I just saw your response when I came back to post a new detail.

My solution works on my localhost/XAMPP installation but it does not work on my actual site.

I've been trying all kinds of things including adding the css to the PowerPress jquery.css.  So far nothing is working on my actual site even though the solution works perfectly on my local installation.

I'm going to read through your answer and start experimenting again.

Thanks.

matt1027

  • Full Member
  • **
  • Posts: 21
Re: Customizing 1 Pixel Out Player
« Reply #12 on: March 13, 2011, 06:42:33 pm »
I tried moving the link to stylesheet, moving the wp_head() call.  No success with that, except for ruling out some more things.  :)

What's strange is that it works perfectly on my localhost but not on the actual site.

As last resort I can try to disable the display option and use the manual customizing options:

<?php the_powerpress_content(); ?>
<?php $podcast_content = get_the_powerpress_content(); ?>

The .powerpress_player background-image was so clean and easy and worked so well I was trying anything to get that working before I started over with something new. 

If you have any ideas please let me know.

Thanks again.

angelo

  • CIO, RawVoice
  • Administrator
  • Hero Member
  • *****
  • Posts: 4483
Re: Customizing 1 Pixel Out Player
« Reply #13 on: March 14, 2011, 02:52:41 pm »
What's the URL to your blog so I can take a look?

matt1027

  • Full Member
  • **
  • Posts: 21
Re: Customizing 1 Pixel Out Player
« Reply #14 on: March 14, 2011, 06:00:43 pm »
Here's the blog URL. 

godliferadio.com