Okay
  Public Ticket #1789611
Sonar audio player display
Closed

Comments

  • James Beaubeaux started the conversation

    Is it possible to add some CSS code to remove the large blank area above the 'play' button.  You can see the large area in the attached snap shot, or you can go to the website I included with this ticket.

    Thanks!

  •  645
    Alexandre replied

    Hi,

    Here the custom css code:

    .iron-audioplayer .player .control {
    margin0 auto;
    }
    .iron-audioplayer .player .wave {
    margin-bottom: 0;
    }

    Thanks,


    Alexandre from the Sonaar.io Crew

  • James Beaubeaux replied

    Alexandre,

    I pasted the CSS code into our Wordpress.com website, but nothing happened.

    The before and after are identical.

    I attached the snapshot of the pasted code in our website.

    You can see the player here: https://livinginbeauty.net/2018/11/19/port-townsend/

    Any ideas why it did not work?

    By the way, I just noticed the words "album image" or Album cover" or something like that flashed for a moment in the blank area I would like to be removed.

  •  645
    Alexandre replied

    You probably have to clear the cache. 

    Here what I see now with the custom code:



    And now without the custom css

    Thanks,


    Alexandre from the Sonaar.io Crew

  • James Beaubeaux replied

    Alexandre,

    Thank you for your help!

    I might have not have clearly indicated the white area I wanted to remove.

    I have circled in in red on the attached snapshot.



  • James Beaubeaux replied

    Alexandre,

    Just checking up on my question last Wednesday.

    Is there a way to remove the blank area I circled in red on the attachment?

    Thanks for you help!

  •  645
    Alexandre replied

    Hi James,
    Here I custom css to remove a small part of the black area.
    .iron-audioplayer .album-player{ margin-top: 0; }

    Thanks,


    Alexandre from the Sonaar.io Crew

  • James Beaubeaux replied

    Alexandre,

    Sorry to be such a pest. Maybe the blank space cannot be removed.

    I used your latest CSS code, but the blank white space is still there.

    I took a snap shot of what it shows immediately when the page starts to load, where you can see the words 'album art' in for a few seconds before the page is fully loaded.

    Here is our latest blog post and you can still see the large white space

    https://livinginbeauty.net/2018/11/19/port-townsend/

  •  645
    Alexandre replied

    Hi,

    The code I gave work fine, but only 20px have been removed. It is the best I can do. 
    Sorry but but this kind of customisation is a bit beyond the scope of our supporté

    Thanks,


    Alexandre from the Sonaar.io Crew