How to customize the audio player in Squarespace // Squarespace CSS Tutorial

Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 insidethesquar...
---
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): insidethesquar...
---
💕 Love this free Square space tutorial? You can donate via Paypal to help support my KZbin Channel www.paypal.com...
---
This tutorial is for any version of Squarespace, 7 or 7.1!
---
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!
Thess codes work for both Squarespace 7 & 7.1, any theme and any version, but is specific for the "minimal" player style, not classic style.
Anywho - hope ya love it! Codes below:
//-- 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}
---
🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you're ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 InsideTheSquar...
---
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): insidethesquar...
---
🙋 Need some help? Visit ​insidethesquar... to see my current support options.
---
The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥
---
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips

[@InsideTheSquare]

⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation! To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: kzbin.info/www/bejne/m6atonuOqMR_Z68

[@theredeyepod]

Firstly - oh my goodness I'm so glad I've found you! Thank you for making coding easy to follow and understand! I'm playing with my audio player design and can't work out what the right code is to change the color of the download button. Do you have it?

[@InsideTheSquare]

You are so welcome - I'm glad my content is helping you with your site! I think that link responds to this selector class: .sqs-widgets-audio-player a

[@tordfjermestad2538]

this video is amazing! that rounded gradient one at the end really took it to another level, really looking forward to playing around with these!

[@shauntownsend9511]

Thank you so much for this! I used the round gradient and it looks awesome!

[@deanhomicki5782]

This a great tutorial. It's great to see how much you enjoy sharing your knowledge and expertise about Sqaurespace. Thank you!

[@pkim842]

Super helpful - thanks!

[@AdiGoldsteinComposer]

Great video, thanks for sharing ❤ How do I make the audio file work on iOS mobile? It’s seems like all the audio blocks are opening on a new window and then I need to click “back” to get into the main page..do you have any suggestions or a tutorial video for this issue?

[@InsideTheSquare]

That is so interesting- I’ve never encountered that issue! I’d recommend posting in the Squarespace forum to see if anyone had a workaround.

[@raquelrosser]

Thank you so much! It worked! 😄

[@InsideTheSquare]

Yay! Glad I could help!

[@raquelrosser]

@@InsideTheSquare Do you know if there's a way to customize the "classic" audio block in Squarespace 7.1? I'm currently using the non classic audio block so that I could change the color, but what I like about the classic is that it has a time key and volume bar whereas the non classic block does not.

[@profoundpsychotherapy6055]

Thank you! You rock!

[@vincent79424]

Thank you!

[@flowerpower72]

Thank you!!!

[@121sheldon121]

Can you modify the audio block to only show the play/pause button and get rid of the title and author section?

[@InsideTheSquare]

Great question - and yes! Add a space in the title and it will remove the "unknown" auto text, and leave the artist/author space empty.

[@johannesrys7031]

Hallo! Thank you for the support. awesome. Just wanted to know if its possible to get just a round button with the play symbol, so without text?

[@InsideTheSquare]

Great question! Totally possible with CSS, but I don’t have that specific code written already. I’ll add it to my tutorial to do list, but feel free to email me if you need it sooner: support-at-insidethesquare.co

[@memoriesmuseum2824]

Can you please do a tutorial on autoplaying and looping the music?

[@InsideTheSquare]

Hey there! Unfortunately that is a function and not a style so it's not something we can do with CSS. I also want to add that it's actually *really* pushing the boundaries on web accessibility standards, so I would strongly advise against it. 😬 Here is an article with more info: www.boia.org/blog/why-autoplay-is-an-accessibility-no-no

[@rachelledendlecrerar2406]

Hi! Do you have a tutorial on how to have sound on the background video? Or how to Auto-play the audio when the site is opened?

[@InsideTheSquare]

That kind of feature isn’t something we can change with CSS, but the official support articles at Squarespace might be of help: support.squarespace.com/

[@MARVELousBros]

How do I make the line in the middle that is between the actual button and the main text part of the button, I have the background transparent so it looks like floating text next to the play button but the line between them is still visible and I want to make that transparent as well, is there a way to do this???

[@InsideTheSquare]

Hey Walter! I think that's a border on the action; give this code a try: .sqs-widgets-audio-player .action{border-right:none!important}

[@MARVELousBros]

@@InsideTheSquare nope, unfortunatley still there

[@LillieBeale-c7g]

This is super helpful! Is there a way to make the audio player have rounded edges? I have rounded buttons and want the audio player to match this. Thanks!

[@InsideTheSquare]

Great idea - and yes- totally possible! You can curve the corners with a property called "border radius". Adjust the 30px in this code to make it uniquely yours: .sqs-widgets-audio-player {border-radius: 30px!important}

[@priamdavid4827]

Hi! Thank you for this. Is there a way to change the size of the play button?

[@InsideTheSquare]

Oooh I love this idea! I’ll definitely add this to my tutorial to-do list; stay tuned 😉

[@priamdavid4827]

@@InsideTheSquare I wanted to have a play button that fits over an image block. Wanted everything else to be translucent except for the play button with some sort of opacity level where you can clearly see the image behind.

[@adventuresofling]

Do you have any tips for music player to auto-play or loop i background?

[@amandaholland7538]

Hi there! Thanks for all of your great videos! Is there a way to customize the embedding code for colors/style/etc for Spotify on the website?

[@MrNinjaRope]

The colors for the embed player from Spotify are inherited from the album artwork for the track. After a lot of research and crash course tutorials, I've only been able to create CSS customizations. Like hover over effects and border-box outline animations. Short answer: No. Long answer: Sorta?

[@soundescapes_]

Is there a way to change the color of the progression bar? Not sure if that's what its called but the moving section as the song plays.

[@InsideTheSquare]

I am not quite sure what you are trying to create but I would love to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help

[@philippamichael]

When I change the colour of the play/pause button it is really faint.. as if the opacity is low. Any ideas how to resolve this? All the other codes work perfectly.

[@InsideTheSquare]

Have you tried adjusting the values found in this part of the code? rgba(0,0,0,0.2)

[@philippamichael]

@@InsideTheSquare I figured it out.. there was no audio file in it at the time, but the code works fine when there is 😅 thanks for the great tutorial !

[@waydbloom]

What if I wanted to have a player somewhat similar to Artlist.io ? Is this possible in square space? The ability to search/Browse sounds and play them??

[@chrystelelacroix4681]

I'm looking for the same thing

[@zeeshanmanzoor5280]

how can i add custom validation on form ? Thanks is advance

[@chrystelelacroix4681]

I tried on 7.1 with the minimal player but the codes don't work...:(

[@InsideTheSquare]

Hey Chrystèle! If your site doesn't respond the way mine does in the video, check out some of my troubleshooting tips at insidethesquare.co/troubleshooting

[@chrystelelacroix4681]

@@InsideTheSquare Hi Becca, I went on your website but I didn't find anything about it. I tried some of your code that you provided here in this video, but nothing works. Is it because of the fluid engine? I need just a small rounded button on SOME of my blog pages because I display short recordings of French phrases. I have about 100 recordings to add and I want something very small near the text. How can I achieve this? I read below that some other people are looking at doing the same thing. How target specific blog pages only? How to have a small pill player with no title and no other information?

[@cydneyboatwright767]

is there anyway to make this an animated gradient? we are on verison 7.1

[@InsideTheSquare]

Totally! You can apply any keyframe animations to that same code name from the tutorial :)

[@chriswastyping]

Anyone any idea why the 'dowload' button is not aligning anymore? lol

[@InsideTheSquare]

Are you using Fluid Engine?

[@sheilasanjuan6078]

@@InsideTheSquare I have a section that is using the fluid engine and I'm not discovering that things are misaligned. Other sections, using a the classic editor, is fine.