What's new

Welcome to StoreFront Forums

Join us now to get access to all our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, and so, so much more. It's also quick and totally free, so what are you waiting for?

Ask question

Ask Questions and Get Answers from Our Community

Answer

Answer Questions and Become an Expert on Your Topic

Contact Staff

Our Experts are Ready to Answer your Questions

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

rani

New member
Trusted Uploader
Joined
Aug 26, 2021
Messages
21
Reaction score
24
Points
3
Coming Soon.....

Check next comment for mode tutorial
 
Last edited:

rani

New member
Trusted Uploader
Joined
Aug 26, 2021
Messages
21
Reaction score
24
Points
3
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


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
 

180nobs

New member
Joined
Aug 28, 2021
Messages
26
Reaction score
7
Points
3
Age
28
Location
Abuja
Website
180paypoint.com
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


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
 

rani

New member
Trusted Uploader
Joined
Aug 26, 2021
Messages
21
Reaction score
24
Points
3
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.
 
shape1
shape2
shape3
shape4
shape7
shape8
Top
AdBlock Detected

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.

I've Disabled AdBlock    No Thanks