WordPress.org

Forums

Audio Player
Align 2 Audio Players next to each other in a Post? (17 posts)

  1. CrazyHunter
    Member
    Posted 3 years ago #

    Hey,

    I want to align 2 Audio Players next to each other in a post but it will not work. How do you align them next to eachother or on the same
    line.

    This is what i get:
    http://www.imagebanana.com/view/9263mfwy/audioplayer.JPG

    Thanks

  2. alvaro05
    Member
    Posted 3 years ago #

    You'll have to put them inside a div in your post HTML. Have to try to insert both in the same div or in separate divs and then apply some css which depends on each case.

  3. befree22
    Member
    Posted 3 years ago #

    I'd like to align the audio player button and title next to each other in a post. Can you help me with the code I have to add to the page.php? I read http://stackoverflow.com/questions/5303193/two-elements-on-one-line-using-div-tags but I'm still clueless about the .php code and .css code.

  4. befree22
    Member
    Posted 3 years ago #

    I'd like to align the audio player button and title next to each other in a post. Can you help me with the code I have to add to the page.php? I read http://stackoverflow.com/questions/5303193/two-elements-on-one-line-using-div-tags but I'm still clueless about the .php code and .css code.

    I also read http://wordpress.org/support/topic/plugin-audio-player-player-position?replies=4 but my issue is a related to text formatting.

  5. alvaro05
    Member
    Posted 3 years ago #

    Could you provide some code?

  6. alvaro05
    Member
    Posted 3 years ago #

  7. befree22
    Member
    Posted 3 years ago #

    The current code on the Music page is

    Denise - Free Now [audio:http://www.website.com/wp-content/ueifs/FreeNow.mp3|loop=yes|bg=0x0000ff|righticon=0xff0000]

    The title appears one line above the audio button which is default audio player format as seen on http://wpaudioplayer.com/whatsnew/.

    I want the title and audio button displaying next to each other on same line.

    Now I'd like help coding the desired layout.
    So, should I place the following code in the header.php?

    <style type="text/css">
    #box {float:left;border:1px solid}
    </style>

    And in the page.php what should I add in the div tag?

    <div id="container">
    <div id="box">This is box 1.</div>
    <div id="box">This is box 2.</div>
    </div>

  8. alvaro05
    Member
    Posted 3 years ago #

    You are trying to insert two audio players inside a post (in the body)?

    Try inserting this in the post body (Html, not Visual):

    <div style="float:left;">[audio:http://www.website.com/wp-content/ueifs/FreeNow.mp3|loop=yes|bg=0x0000ff|righticon=0xff0000]</div>
    <div style="float:left;">[audio:http://www.website.com/wp-content/ueifs/FreeNow.mp3|loop=yes|bg=0x0000ff|righticon=0xff0000]</div>

  9. befree22
    Member
    Posted 3 years ago #

    Oops! I saw my error and check this post and viola! you already responded. You're amazing.

    No, there's only 1 audio player with the title. So, should I insert this in the html section of the edited post...

    <div style="float:left;">[audio:http://www.website.com/wp-content/ueifs/FreeNow.mp3|loop=yes|bg=0x0000ff|righticon=0xff0000]</div>
    <div style="float:left;">Denise - Free Now</div>

  10. befree22
    Member
    Posted 3 years ago #

    Hi alvaro05,

    The code above works! Thanks so much for your valuable time.

  11. alvaro05
    Member
    Posted 3 years ago #

    I'm glad it worked, if you have any other doubts I can help you with, just ask'

  12. befree22
    Member
    Posted 3 years ago #

  13. befree22
    Member
    Posted 3 years ago #

    Hi alvaro05,

    Now I'm experiencing a misalignment of the estore products with the audio player.

    I have 4 wp estore plugin items which are .mp3 files. I also have 1 wp estore plugin item containing all 4 .mp3 files (bundled product) but this product doesn't include the audio player button with title above it since it's a bundled product. Only the 4 individual items have an audio player with title included. View [IMG]http://i39.tinypic.com/2s8qwps.png[/IMG]

    The above image shows the bundled product on the bottom and the correct width for all products. How do I fix the WP admin html code so that all of the individual products display the correct width?

    Here's the code for the bundled product and the individual product above it:

    <div style="float: left;">[audio:http://www.djm.com/wp-content/whatever9210/Mr Sorry.mp3|loop=yes|bg=0x0000ff|righticon=0xff0000]</div>
    <div style="float: left;"><span style="font-family: Arial, Helvetica, sans-serif;">DJ - Sorry</span></div>&nspb;&nspb;&nspb;
    [wp_eStore_buy_now_fancy id=3]
    <div style="float: left;">[audio:http://www.djm.com/wp-content/whatever9210/Somehow Someway.mp3|loop=yes|bg=0x0000ff|righticon=0xff0000]</div>
    <div style="float: left;"><span style="font-family: Arial, Helvetica, sans-serif;">DJ - Somehow</span></div>&nspb;&nspb;&nspb;
    [wp_eStore_buy_now_fancy id=4]

  14. befree22
    Member
    Posted 3 years ago #

    Oops! This is the code for the bundled product and the individual product above it:

    <div style="float: left;">[audio:http://www.djm.com/wp-content/whatever9210/Somehow Someway.mp3|loop=yes|bg=0x0000ff|righticon=0xff0000]</div>
    <div style="float: left;"><span style="font-family: Arial, Helvetica, sans-serif;">DJ - Somehow</span></div>&nspb;&nspb;&nspb;
    [wp_eStore_buy_now_fancy id=4]

    [wp_eStore_buy_now_fancy id=5]

    NB: I've been adding &nspb;&nspb;&nspb; before each estore shortcode because it was misaligning the title but when I save the wp html code, the wp deletes the &nspb;&nspb;&nspb;

  15. alvaro05
    Member
    Posted 3 years ago #

    The above image shows the bundled product on the bottom and the correct width for all products. How do I fix the WP admin html code so that all of the individual products display the correct width?

    I don't really understand what you are trying to do. If you could upload an image with what you exactly have, your code, and an image with what you want (created with photoshop maybe or paint) would really help' (when replying a comment you can press the CODE button, paste you code and press again the /CODE button).

  16. befree22
    Member
    Posted 2 years ago #

    Here is an image of what I currently have
    [IMG]http://i39.tinypic.com/33ab1o5.png[/IMG]

    and here's the current code in the WP admin html page:

    <div style="float: left;">[audio:http://www.djm.com/wp-content/dwn_music/Be Free.mp3|loop=yes|bg=0x0000ff|righticon=0xff0000]</div>
    <div style="float: left;"><strong><span style="font-family: Arial, Helvetica, sans-serif;">DJ - Be Free</span></strong></div>&nspb;&nspb;&nspb;
    [wp_eStore_buy_now_fancy id=1]

    Now, here's the image of what I want
    [IMG]http://i40.tinypic.com/2eevhg5.jpg[/IMG]

    Notice that the &nspb;&nspb;&nspb; code appears below the title when I attempt to widen the div. The good news is that adding the &nspb;&nspb;&nspb; fixes the width but I don't want the &nspb;&nspb;&nspb; appearing on the website.

  17. befree22
    Member
    Posted 2 years ago #

    Hi alvaro05,

    I think I found a solution that's working as of today.

    Last night I thought that I'd insert another <div> with a spacer.png between the audio player button and the title AND a spacer.png between the title and the shortcode and it's working.

    Here's the code I'm using:

    <div style="float: left;">[audio:http://www.djm.com/wp-content/dwn_music/Be Free.mp3|loop=yes|bg=0x0000ff|righticon=0xff0000]</div><div><img class="alignnone" title="space" src="http://www.djm.com/wp-content/themes/denise/images/spacer.png" alt="" width="12" height="12" /></div><div style="float: left;"><strong><span style="font-family: Arial, Helvetica, sans-serif;">DJ - Be Free</span></strong></div>
    <img class="alignnone" title="space" src="http://www.djm.com/wp-content/themes/denise/images/spacer.png" alt="" width="12" height="12" />[wp_eStore_buy_now_fancy id=1]

    Could you please help me with this issue: http://wordpress.org/support/topic/how-to-justify-blog-theme-left-and-right-margins?replies=1#post-2724473 ?

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic