Okay
  Public Ticket #3212851
Colors of the "sticky player" on mobile and desktop
Closed

Comments

  • Trent started the conversation

    I am using wordpress and elementor to design the playlists for a christian radio show. I am using the pro version of the MP3 audio plugin and i want to customize the colors of what i believe is the "sticky player" but i could have the name wrong. I want to change the colors of the thing that pops up at the bottom of the screen when somebody clicks a song. Can you show me how to change the colors on desktop and on mobile?

    Can you also tell me how I can disable it all together?

    Attached files:  Screen Shot 2023-01-20 at 6.52.22 PM.png

  •  1,114
    Max replied

    Hi,

    You can change the colors of the sticky player in wp-admin > mp3 player > settings > sticky player

    Thanks,


    Max from the Sonaar.io Crew

  • Trent replied

    I was able to fix the colors but now i am having an issue with the mobile version. When someone plays a song and then opens the full playlist through the sticky player, the playlist title and the "x" button are right on top of eachother (top of the screenshot below). How can i move the playlist title down so that it doesn't overlap the "x" or "close" button?

    Attached files:  Image.jpeg

  •  669
    Alexandre replied

    Hi Trent,
    Please use this custom css code.
    If you dont know where to add it, please go to wp-admin>appearance>customize>additional CSS

    @media only screen and (max-width: 860px){
    #sonaar-player .playlist .title{
    margin-top: 20px;
    }
    }

    Thanks,


    Alexandre from the Sonaar.io Crew

  • Trent replied

    Appreciate the help Alexandre! Unfortunately it still seems to be having the same issue. Did you write that CSS in respect to the mobile version? Feel free to double check on your end but i've cleared my cache multiple times and it appears the same. It only matters when the playlist has a long playlist title but nonetheless, I'll need it fixed because they have a lot of playlists with long titles.

  •  669
    Alexandre replied

    Sorry. The CSS I have provided was not strong enough. 

    Please replace it by this one:

    @media only screen and (max-width: 860px){
    #sonaar-player .playlist .title{
    margin-top: 20px !important;
    }
    }

    Thanks,


    Alexandre from the Sonaar.io Crew

  • Trent replied

    that worked! thank you very much

  •  669
    Alexandre replied

    you are welcome

    Thanks,


    Alexandre from the Sonaar.io Crew