WordPress.org

Ready to get started?Download WordPress

Forums

Haiku minimalist audio player
Remove whitespace (9 posts)

  1. barnyard
    Member
    Posted 1 year ago #

    Sorry if this is a real newbie question. The plugin automatically puts 2 or 3 lines of whitespace between successive songs on my wordpress page. Is there a way to edit it that removes this whitespace so that the songs appear single-spaced, one song per line?

    Thanks!

    http://wordpress.org/extend/plugins/haiku-minimalist-audio-player/

  2. austenm
    Member
    Posted 1 year ago #

    For this you'll have to get into some HTML code. Click on Pages > your desired page > edit.

    Now, you'll need to select the tab in the top right that says HTML. Now you'll be able to see source code HTML tags. remove <br /> which are line breaks and also you can remove unnecessary <p> [paragraph] tags. Just keep in mind that if you remove a <p>, you should also remove it's closing </p> tag so you don't have junk code sitting there.

    If you don't see any extra line breaks, try setting up a table so you can control your data more accurately and neatly. You should be able to insert your audio player / script / link in one of the cells of a table. (Note, with CSS design code and classes/id's, you can control the amount of white space by the pixel.)

  3. barnyard
    Member
    Posted 1 year ago #

    Thanks for the tips, Austenm! I think my problem's a bit more complicated than that, though. In the HTML for the page in question, I'm calling the shortcode for the Haiku plugin (e.g.: [haiku url="http://example.com/file.mp3" title="Title of audio file"] ) and there are no line breaks, just a few of these shortcodes (one per song).

    I'm guessing the extra whitespace is somehow built into the code of the plugin or something. Any ideas how to edit the plugin itself, if this is the case?

  4. JonathanWright
    Member
    Posted 1 year ago #

    I also would like to use Haiku, but that white space just makes it impossible. It's a great player and everything, but why all that border?

    I hope someone can help us figure this out... been on it for a few hours and can't find where the code is that defines the cushion or border for this plugin...

  5. Danny
    Member
    Posted 1 year ago #

    I've been having a similar issue. I wanted to add text below the player that says "Right click to save".

    If you open up haiku-player.css, you'll see this line of code:

    .player-container{visibility:hidden;border:none;height:30px;width:162px;padding:0 20px 20px 0;}

    If you change the two '20px' to 0px it will remove the spacing between the player. on the top and the bottom of the player.

    The problem you may run into which I'm having now is that the container for the slider is lower than the player. So even though I have the white space removed, when I press play is takes all the wording except the first word and moves it down onto a second line.

    Hope this helps, if anyone knows how I can fix my current issue, please let me know. thanks!

  6. Danny
    Member
    Posted 1 year ago #

    I solved my issue as well. If you open up haiku-player.css locate this line of code:

    .player-container li.sliderplayback{position:relative;width:100px;height:1px;}

    and change it to this:

    .player-container li.sliderplayback{position:absolute;width:100px;height:1px;}

    the container for the slider will be lined up with the container for the player perfectly.

  7. JonathanWright
    Member
    Posted 1 year ago #

    Danny! You totally rock! Thanks! I don't even know if it works yet, but I'm confident it does! I could not find where that dang code was! Thanks a ton...
    Don't you just wish sometimes you could search all your files and the contents of them for the exact line of code you're looking for? Geeze!

  8. markpea
    Member
    Posted 1 year ago #

    Hey -- I know an answer to this one.
    If you're a Mac user and like to use the command line (as I do) there's a great utility called 'ack' (http://betterthangrep.com/) which does exactly what you're looking for, that is, 'search all your files and the contents of them for the exact line of code you're looking for'. Take a look at the web site above and follow the instructions to install. It's fairly painless and it works much better for finding code than the Mac Finder search.

  9. Iphnk
    Member
    Posted 1 year ago #

    Sorry to bring this topic back to life.
    After updating my WP to version 3.5.1 the whitespace issue has re-appeared.
    In the .css file I have removed 2 x 20 px as mentioned above
    .player-container{visibility:hidden;border:none;height:40px;width:182px;padding:0 0 0 0;}

    This solved my whitespace issue before the 3.5.1 upgrade but now unfortunately it's back.

    Yes I have changed the height and width but I have also modified the resources.

    In the HTML code there are no p /p or br tags
    <center><img alt="" src="http://www.n-k.dk/Music/Player_Global.gif" title="Play" width="182" height="155" />[haiku url='http://stream17.mixcloud.com/cloudcasts/originals/4/5/0/1/01b2-6d90-49ed-9834-386ae21133ec.mp3' defaultpath='disabled' width='50']</center>

    View the problem

    I would highly appreciate any suggestions on what to do, since this player is the one that suit my needs the best.

    Best Regards

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.