How to customize the audio player in Squarespace

Aug 18

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

This tutorial will show you how to change the look of an audio player on your Squarespace site.

A few important things to note before you copy and paste this into your own site:

→ There is more than one way to do this! This is just one approach of many because code is super customizable.
→ I want to encourage you to play around with the creative parts of this code, like spacing, sizes, and colors! For more info on specific color types, check out this article: insidethesquare.co/colors

→ These codes work for both Squarespace 7 & 7.1, any theme and any version, but is specific for the "minimal" player style, not the classic style.

Download Transcript

Here are the codes from the tutorial:

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}

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}

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}