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

Change color on the audio player?

Question

Can someone give me CSS to change the color on the audio player (it’s black and I need a light blue) – or is it impossible?

Thanks in advance.

Edited by geirwerner
Tidy, fix tags

Share this post


Link to post

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;
   }

Share this post


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?

Share this post


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?

Share this post


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?

Share this post


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...