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.  

1181074954_Screenshot2021-06-14at09_28_46.thumb.png.da04e4b63999152b6c8828109e38759c.png

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:

<style>
.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;
}
</style>

 

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

Link to comment

Archived

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.