Jump to content

Changing the colour of the Playbar for Audio

Recommended Posts

  • Replies 8
  • Views 997
  • Created
  • Last Reply
9 hours ago, RMcReynolds said:

Thanks for the reply. 

Is there a way to keep the background the same colour and to change the colour of either the playhead or progress bar?  

You mean this? https://prnt.sc/150eppp


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

I don't think so.   

I am looking to have the colours the same when you load the site.  It is when you play a track that I want a change.

On the default player(shown in the image) there is a bar that shows you how far you are through a track.  It makes everything left of it slightly grey.  Ideally I would be able to change both the bar and the part left of the bar.  Is this possible?  

Thanks for your help.  Apologies if haven't explained it well.  


Link to comment

I think that will work but it doesn't yet.  I accidentally put it in the code for the whole site and it placed in front of the text on the player.  When I put it on the css for just this page it doesn't do anything.  This is the code i am using:

.sqs-widgets-audio-player {background:White!important} 
.sqs-widgets-audio-player .title-wrapper 
.title,.sqs-widgets-audio-player .artistName, .sqs-widgets-audio-player .time{color:grey!important} .sqs-widgets-audio-player .action .play-button {border-left-color:hsla(209, 58%, 55%, 0.61)!important} .sqs-widgets-audio-player .action .pause{border-color:hsla(209, 87%, 43%, 0.61)!important} .sqs-widgets-audio-player .artistName {text-transform:uppercase; letter-spacing: .1rem; font-size: .75rem}
    .sqs-widgets-audio-player.dark .played {
    background-color: lightblue;


Where should i put your code so that it goes behind the text?  Or can I change the transparency of it?  

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.