TUTORIAL How to Make your WordPress Audio Player/Downloader Button Artist Cover Art Image to Spin in your Post

[rani]

Coming Soon.....

Check next comment for mode tutorial

 

[rani]

Coming Soon.....

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:

1. Login to your WordPress website
2. On your dashboard--->Appearance----> Customize.
3. 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.

 

[180nobs]

Will this plugin work for it.

 

[180nobs]

After inserting this code, The thing no work.

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:

1. Login to your WordPress website
2. On your dashboard--->Appearance----> Customize.
3. 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

 

[snowzstexzy]

Make I try am

 

[rani]

Drop your website link, and I will see to it, probably ur style sheet class are different that's why, I will get yours and drop it here for you too.

After inserting this code, The thing no work.

 

[rani]

Make I try am

Alright, follow it well and give us feedback

 

[Dan]

Well done

 

[Johnpablo]

@rani boss ive set up as followed, still not working