Jump to content

Change color on the audio player?

Recommended Posts

  • 6 months later...
  • Replies 7
  • Created
  • Last Reply

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 comment
  • 3 weeks later...
  • 2 years later...
  • 1 month later...
  • 1 year later...
  • 2 months later...

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 comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.