Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Change color on the audio player?


geirwerner

Question

  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

7 answers to this question

Recommended Posts

  • 0

Try this! Found it and it worked for me. Just change the !webkit-linear-gradient! colors to your desire. You can also add/remove border, change volumebar color and more..


.sqs-audio-player {
     background-color: #b3b3b3 !important;
     background-image: linear-gradient(#eaeaea, #eaeaea) !important;
     background: -webkit-linear-gradient(#b3b3b3, #eaeaea) !important;
     border: 0px solid #b3b3b3 !important;
     border-radius: 0px 0px 0px 0px;
     color: #6B6B6B;
   }
   .audio-author {
     color: #707070 !important;
   }
   .audio-title {
     color: #ffffff !important;
   }
   .volume .bar.active {
     border-right-color: #36b3a8 !important;
   }
   .volume .bar {
     border-right-color: #b3b3b3 !important;
   }
   .progress {
     background: none repeat scroll 0 0 #707070 !important;
   }
   .controls {
     color: #707070 !important;
   }

Link to post
  • 0

@danielkadawatha I added this to the Custom CSS section on my site and changed a few colors and did not see any changes.

  1. Is Custom CSS the correct place to add this?
  2. Have the element names changed since 2014? is .sqs-audio-player still correct?
Link to post
  • 0

@danielkadawatha I added this to the Custom CSS section on my site and changed a few colors and did not see any changes.

  1. Is Custom CSS the correct place to add this?
  2. Have the element names changed since 2014? is .sqs-audio-player still correct?
Link to post
  • 0

I'm using the classic audio player, and have figured out how to use the above code to style it. One issue is that the progress loaded is showing a black background behind the text. When inspecting the code, I see it called span.progress.loaded - but I do not seem to be able to style this and remove the background. Any ideas?

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...