Blubrry Podcasting Community Forum
Hey Blubrry => Blubrry PowerPress WordPress Plugin => Topic started by: matt1027 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.
-
can you link to a screen shot how this looked in PodPress?
-
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.
-
I sent you a solution via email, is it ok to post here as well?
-
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"> </td><td style="vertical-align: middle;">';}
I created my own background image and then modified the table above that displays it and the player.
-
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.
-
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/ (http://help.blubrry.com/blubrry-powerpress/customizing-with-your-wordpress-theme/).
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
What's the URL to your blog so I can take a look?
-
Here's the blog URL.
godliferadio.com (http://godliferadio.com)
-
I experimented with the template functions listed here:
http://help.blubrry.com/blubrry-powerpress/customizing-with-your-wordpress-theme/ (http://help.blubrry.com/blubrry-powerpress/customizing-with-your-wordpress-theme/)
Which are:
<?php the_powerpress_content(); ?>
and
<?php if( $episode_content = get_the_powerpress_content() ) { ?>
<fieldset class="episode-box">
<legend>Podcast Episode</legend>
<?php echo $episode_content; ?>
</fieldset>
<?php } ?>
They both worked perfectly on my XAMPP/localhost installation. And the original, simple background image scheme that I had been using for the past year works perfectly there also, where the player appears in the default position at the end of content.
So I created a new addon domain at my webhost for testing purposes before I made any changes to my actual blog. I installed the current WordPress and PowerPress and my custom theme. The media player plays correctly but the background image will not show.
But the surprising thing was, when I added the background style and the image to the default twentyten theme it did work.
So I guess it is an issue with my theme but the strange thing is that my theme worked for at least a year. And it still works with XAMPP/localhost, although I do have to change the positioning on the background-image when it's on localhost.
So there must be something different about the way that XAMPP processes all of it and the way my web host server processes it.
-
Got your web site link from previous page of this thread, http://godliferadio.com/.
There may be some caching, loading up the page with Firebug to see if the CSS attribute is even set will give some indication of the problem.
Update: Okay I loaded firebug, there is no css class for .powerpress_player. I then looked at your source code and I do see a problem. The style "#about-image-2" is not properly terminated with a closing }. Properly close that set of CSS attributes and all will be better.
You should also see some other styling items missing from your "Listen" pages, there's a good chunk of CSS not being applied due to this syntax error.
I would politely yell at your web developer and recommend to him/her to use a CSS editor (Dreamweaver is highly recommended). :)
-
Thank you!!!!!!
That fixed it. And the Listen page looks like it is supposed to also. You're a genius!
I am very sorry to bother you with a dumb syntax error. And my web developer is terribly sorry and embarrassed too. :) He will start using Firebug and maybe even get Dreamweaver.
-
No worries. Happens to the best of us, I was just being a smarty pants. I do like the CSS editor in Dreamweaver though, it's hands down best CSS editor available.