In this tutorial I will show you a simple way to make your WordPress Audio Player/Downloader Button Artist Cover Art Image to spine in your post.Coming Soon.....
.mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body { background: #06801e; } .njl-music-widget .mejs-container { margin: 0 !important; } .njl-music-widget .artwork { display: block; background-size: cover; background-repeat: no-repeat; background-position: center; float: left; top: 10px; line-height: 0; margin-right: 5px; margin-bottom: 15px; width: 100px; height: 100px; border-radius: 100px; border: 5px solid white; border-left-color: green; border-right-color: green; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; } @keyframes spin { 100% {transform: rotate(180deg);} } .njl-music-widget .details { display: block; overflow: hidden; margin-bottom: 10px; color: #fff; padding-top: 17px; padding-left: 100px; }
In this tutorial I will show you a simple way to make your WordPress Audio Player/Downloader Button Artist Cover Art Image to spine in your post.
This comes with a nice two color border-radius, which in my case I choose white and green, making like green white green.
Requirements
- You must have the Plugin by Pedro, or should purchase it if you don't have it. Click https://storefront.com.nghreads/audio-player-and-download-button-plugin-new-version.87 to download the plugin.
- Make sure your theme has the WordPress wp_head() and wp_footer(), don't worry about this as many them has it as a most.
Procedure to fix this modification:
- Login to your WordPress website
- On your dashboard--->Appearance----> Customize.
- Go down to (Additional Css)
Past the CSS code I shared here, in case you have some custom CSS codes there, you can add this one at the end of the codes you have there before.
.mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body { background: #06801e; } .njl-music-widget .mejs-container { margin: 0 !important; } .njl-music-widget .artwork { display: block; background-size: cover; background-repeat: no-repeat; background-position: center; float: left; top: 10px; line-height: 0; margin-right: 5px; margin-bottom: 15px; width: 100px; height: 100px; border-radius: 100px; border: 5px solid white; border-left-color: green; border-right-color: green; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; } @keyframes spin { 100% {transform: rotate(180deg);} } .njl-music-widget .details { display: block; overflow: hidden; margin-bottom: 10px; color: #fff; padding-top: 17px; padding-left: 100px; }
In you get confused, drop a comment, will be glad to respond.
I will be dropping more modifications here time to time.
Thank you.
Demo: Click here
After inserting this code, The thing no work.
Alright, follow it well and give us feedbackMake I try am
We get it, advertisements are annoying!
Sure, ad-blocking software does a great job at blocking ads, but it also blocks useful features of our website. For the best site experience please disable your AdBlocker.