How to customize a Squarespace audio block

content block

Sep 26

Audio blocks are fantastic for sharing your favorite tunes, podcasts, or sound bites. But let's face it - sometimes they could use a little extra style to really match your site's unique vibe

With just a splash of CSS magic, we can transform those audio players from basic to beautifully on-brand!

On this blog post, you’ll find ten awesome ways to customize your Squarespace audio blocks. These codes cover everything from changing background colors and tweaking fonts to creating sleek, minimal designs and eye-catching gradient styles.

You can copy these codes from the blog and customize the values, like colors, borders, and more, to make them uniquely yours. If you are brand new to CSS, I’ve added some more info below that will help you use these codes like a pro.

//-- Change the background color of the player itself
.sqs-widgets-audio-player {background:orange!important}

//--Change the color behind the play/pause button
.sqs-widgets-audio-player .action {background:orange!important}

//-- Change the color of the play/pause button
.sqs-widgets-audio-player .action .play-button {border-left-color: purple!important}
.sqs-widgets-audio-player .action .pause{border-color: purple!important}

//--Change the color of the title
.sqs-widgets-audio-player .title-wrapper .title{color: purple!important}

//--Change the title font size
.sqs-widgets-audio-player .title-wrapper .title {font-size: 2rem!important}

//-- Change the artist font size
.sqs-widgets-audio-player .artistName {font-size: 2rem!important}

//-- Change the artist to uppercase
.sqs-widgets-audio-player .artistName {text-transform:uppercase!important}

//-- Change the color of the time
.sqs-widgets-audio-player .time {color: purple!important}

//-- Style Plugin: Minimal style 
.sqs-widgets-audio-player {
background:transparent!important
}
.sqs-widgets-audio-player .title-wrapper .title, .sqs-widgets-audio-player .artistName, .sqs-widgets-audio-player .time{
color:#50bdb8!important
}
.sqs-widgets-audio-player .action .play-button {border-left-color:#50bdb8!important}
.sqs-widgets-audio-player .action .pause{
border-color:#50bdb8!important
}
.sqs-widgets-audio-player .artistName {
text-transform:uppercase;
letter-spacing: .1rem;
font-size: .75rem
}

//-- Style Plugin: Rounded gradient
.sqs-widgets-audio-player {
box-shadow: 2px 5px 15px rgba(0,0,0,0.2);
background:linear-gradient(to right, lightblue,pink)!important;
border-radius: 35px!important
}
.sqs-widgets-audio-player .title-wrapper .title, .sqs-widgets-audio-player .artistName, .sqs-widgets-audio-player .time {
color: #fff!important
}
.sqs-widgets-audio-player .action .play-button {
border-left-color: #fff!important
}
.sqs-widgets-audio-player .action .pause{
border-color: #fff!important
}