Hello. Is it possible to change the hover color of the Sticky Player buttons? It is currently set to a default light gray when hovering over the buttons. I can't seem to find any way to customize it. I am using Kadence Theme with Gutenberg (no Elementor). Please advise. Thanks!
We cant style the sticky player through elementor either. The only way to set its style is through the plugin options. Go to wp-admin>mp3 player>sticky player If you need to go beyond those options, you have to use custom css.
Thank you for the CSS code. It worked for all of the icons EXCEPT the "Add To Cart" icon (see pic). Perhaps there is some additional code that I could add? I really appreciate your assistance. Let me know if you have any more suggestions.
Hello. Is it possible to change the hover color of the Sticky Player buttons? It is currently set to a default light gray when hovering over the buttons. I can't seem to find any way to customize it. I am using Kadence Theme with Gutenberg (no Elementor). Please advise. Thanks!
Hi,
You can customize this with custom CSS. thats the only way,
Something like
#sonaar-player .control .control--item:hover { color: #fff!important; }Thanks,
Max from the Sonaar.io Crew
Hi Jeremy,
We cant style the sticky player through elementor either. The only way to set its style is through the plugin options. Go to wp-admin>mp3 player>sticky player
If you need to go beyond those options, you have to use custom css.
Thanks,
Alexandre from the Sonaar.io Crew
Hi Alexandre.
I've replied to your request to access the video link. Please let me know if you have any further suggestions. Thank you very much. Cheers!
Jeremy
Hi,
The hover use by default the css Filter.
To remove it please add this code:
#sonaar-player .player .control--item.list:hover, #sonaar-player .player .control--item.previous:hover, #sonaar-player .player .control--item.play:hover, #sonaar-player .player .control--item.next:hover, #sonaar-player .player .control--item.shuffle:hover, #sonaar-player .player .control--item.volume .sricon-volume:hover:before {
filter: unset !important;
}
Thanks,
Alexandre from the Sonaar.io Crew
Hi,
Thank you for the CSS code. It worked for all of the icons EXCEPT the "Add To Cart" icon (see pic). Perhaps there is some additional code that I could add? I really appreciate your assistance. Let me know if you have any more suggestions.
Attached files: Sonaar-Sticky-Hover-Cart_12.27.22.png
Add this code:
#sonaar-player:not(.sr-float) .player .store .track-store li a:hover{
filter: unset !important;
}
Thanks,
Alexandre from the Sonaar.io Crew
Excellent! That did it. Thanks for the stellar customer support. Do you have a tip jar? I'd like to buy you a coffee!!!
You are welcome
Our tip jar is a 5 Stars rate.
Simply click here https://www.trustpilot.com/evaluate/sonaar.io, hit 5 stars and you're done.
Thank you so much! I appreciate !!
Thanks,
Alexandre from the Sonaar.io Crew
Done.
"Fast, friendly and knowledgeable. Great product. Excellent customer service!"
Awesome,
It is very appreciated
Thanks,
Alexandre from the Sonaar.io Crew