CSS code for Audio Blocks

@ashleemundywebsitede

Add the following to Design > Custom CSS.

.sqs-widgets-audio-player .player {

  font-size: 20px;
  
  }

.sqs-widgets-audio-player .title-wrapper .title {

  font-size: 1.2em;
  line-height: 1.1em;
  
  }

Let us know how it goes.

12 hours ago, creedon said:

@ashleemundywebsitede

Add the following to Design > Custom CSS.

.sqs-widgets-audio-player .player {

  font-size: 20px;
  
  }

.sqs-widgets-audio-player .title-wrapper .title {

  font-size: 1.2em;
  line-height: 1.1em;
  
  }

Let us know how it goes.

That worked like a charm! Thank you so much!

Is there a custom css that allows you to move or add the audio player above the add to cart button?

@JHoward

Please post the URL for the page where you want to accomplish this effect.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

On 10/20/2020 at 11:03 PM, creedon said:

@ashleemundywebsitede

Add the following to Design > Custom CSS.

.sqs-widgets-audio-player .player {

  font-size: 20px;
  
  }

.sqs-widgets-audio-player .title-wrapper .title {

  font-size: 1.2em;
  line-height: 1.1em;
  
  }

Let us know how it goes.

This worked beautifully! 🙂 Thank you!

Is there a way to use a custom font for song title and artist name in Audio Block? 

On 3/9/2022 at 9:35 PM, Mlekoman said:

Is there a way to use a custom font for song title and artist name in Audio Block? 

Possible. Can you share link to page where you use Audio Block, we can give exact code

On 3/13/2022 at 11:59 AM, tuanphan said:

Possible. Can you share link to page where you use Audio Block, we can give exact code

https://ritmiweb.squarespace.com/01-still-corners-16-4-2022

Password: ritmiweb

Thank you very much!

Hello there, Is it possible to change the size of the audio block only on mobile ?

Thank you for your help. 🙂

https://brondyhumphrey.com/photographies/photographie-les-sables-olonne
psw: pure

On 8/18/2022 at 5:47 PM, iJizzy1 said:

Hello there, Is it possible to change the size of the audio block only on mobile ?

Thank you for your help. 🙂

https://brondyhumphrey.com/photographies/photographie-les-sables-olonne
psw: pure

You mean reduce width or?

Yes, I meant the width of the audio block.

On 8/21/2022 at 3:51 PM, iJizzy1 said:

Yes, I meant the width of the audio block.

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1639248384901_6868 {
    width: 30%;
    margin: 0 auto;
}
}

Do you have a code for all audio blocks ?

Thank you again @tuanphan

On 8/25/2022 at 4:19 AM, iJizzy1 said:

Do you have a code for all audio blocks ?

 

Thank you again @tuanphan

 

Use this code

@media screen and (max-width:767px) {
div.audio-block {
    width: 30%;
    margin: 0 auto;
}
}

There is still the grey bar on the audio block :

 

20 hours ago, iJizzy1 said:

There is still the grey bar on the audio block :

 

No grey line here

Hi there, do you have code to round the corners of the audio block and to centre-align the text?

On 6/13/2023 at 9:08 PM, lilliebeale said:

Hi there, do you have code to round the corners of the audio block and to centre-align the text?

Can you share link to page where you use audio block? We can check easier

Hey @tuanphan, do you have code to change the colour of the play button? I've tried to find the element ID using inspect tool but can't isolate it from the rest of the player block. I'd be grateful for your help as I have managed to make the other changes I need. thanks

I figured it out, here is my code for anyone else that may need it:

//*audio block tweaks*//
.sqs-widgets-audio-player.dark {
    background: black;
      color: #F8CB3D !important;
      font-family: 'Overpass Mono';
      font-size: 16px;
      font-weight: bold;
}
.sqs-widgets-audio-player.dark .play .play-button {
    border-left-color: #F8CB3D !important;
}

Note: it wasn't possible to isolate the element .play-button because I had no files uploaded yet and so inspect tool could not see that button. When I added trackes, problem solved!

On 1/10/2024 at 6:00 PM, zoester300 said:

Hey @tuanphan, do you have code to change the colour of the play button? I've tried to find the element ID using inspect tool but can't isolate it from the rest of the player block. I'd be grateful for your help as I have managed to make the other changes I need. thanks

 

I figured it out, here is my code for anyone else that may need it:

//*audio block tweaks*//
.sqs-widgets-audio-player.dark {
    background: black;
      color: #F8CB3D !important;
      font-family: 'Overpass Mono';
      font-size: 16px;
      font-weight: bold;
}
.sqs-widgets-audio-player.dark .play .play-button {
    border-left-color: #F8CB3D !important;
}

Note: it wasn't possible to isolate the element .play-button because I had no files uploaded yet and so inspect tool could not see that button. When I added trackes, problem solved!

2-3 weeks ago I just solved a same case on forum, you try searching again on forum

Or share link to page where you have problem, I can inspect code easier