I'm currently playing around with the "default widget player settings" to customise the look of the player I created with a shortcode. I use DIVI as my website theme, so none of your other options suits me.
I am a web developer, so I understand code. However, there doesn't seem to be any information in your documentation for creating custom themes/styles for the player other than using the shortcode or default settings.
I am trying to create something similar to example 006 in the Playlist Layouts section, but I don't see any options in the shortcode or default settings that allow me to do this.
Do you have any guides or documentation on how to style the player or create custom themes? Alternatively, could you point me in the right direction (list of CSS elements to target, etc.) so I can work it out for myself? I'd pay for the themes, but they only work for Elementor, which I don't use.
Just another quick question, if you don't mind. I was looking at the example below, 007, and noticed that the artwork to the left of the controls changes when you select another item in the playlist. Is this because each track is in a separate playlist? I have added different images to each of my tracks, but they're all in the same playlist. Is it possible to change the "album" artwork when the track changes so it shows the track artwork instead?
I'm currently playing around with the "default widget player settings" to customise the look of the player I created with a shortcode. I use DIVI as my website theme, so none of your other options suits me.
I am a web developer, so I understand code. However, there doesn't seem to be any information in your documentation for creating custom themes/styles for the player other than using the shortcode or default settings.
I am trying to create something similar to example 006 in the Playlist Layouts section, but I don't see any options in the shortcode or default settings that allow me to do this.
Do you have any guides or documentation on how to style the player or create custom themes? Alternatively, could you point me in the right direction (list of CSS elements to target, etc.) so I can work it out for myself? I'd pay for the themes, but they only work for Elementor, which I don't use.
Many thanks, James
Hi James,
the shortcode we used in example 006 is:
(replace albums id by your albums id)
In addition, there is a custom CSS to display the album artwork at the top of the playlist which is:
.sonaar-grid { flex-direction: column; }See this article for our shortcode and its attributes https://sonaar.io/docs/add-audio-player-with-shortcode/
For the colors, you can set overall colors in wp-admin > mp3 players > settings > widget player.
For specific color on the player widget shortcode, you will need to use custom CSS to customize it to your own needs.
Hope it helps!
Thanks,
Max from the Sonaar.io Crew
Hi Max
That's exactly what I was looking for. Thank you.
Just another quick question, if you don't mind. I was looking at the example below, 007, and noticed that the artwork to the left of the controls changes when you select another item in the playlist. Is this because each track is in a separate playlist? I have added different images to each of my tracks, but they're all in the same playlist. Is it possible to change the "album" artwork when the track changes so it shows the track artwork instead?
Cheers, James
Its because each track has its own cover set here: https://drops.sonaar.io/i/xHDUAu
Thanks,
Max from the Sonaar.io Crew
Thanks for that. I already added images to each track, but the artwork wasn't showing. It turns out I needed to add an image to the playlist as well.
It's all working as it should now. Thanks so much for your help!
James
You are welcome
Thanks,
Max from the Sonaar.io Crew