Jump to content

Remove playbar from audio player

Go to solution Solved by JayVanDyke,

Recommended Posts

Posted

@MiguelFerraoI think first step is to remove the space blocks on either side and make sure the audio block is in its own row by itself. Then we can remove some things and center it using CSS. 

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

 🛠️ Web Designer's Toolkit

**some of these contain affiliate links

Posted

@MiguelFerrao try this in your custom CSS. If it works then make your other page setup like this too.

.sqs-block-audio {
  text-align: center;
  .sqs-audio-embed {
    display: inline-block;
  }
  .sqs-widgets-audio-player {
    .track, .labels, .secondary-controls {
      display: none;
    }
  }
}

 

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

 🛠️ Web Designer's Toolkit

**some of these contain affiliate links

Posted (edited)

Thanks a lot for helping, @tuanphan and @jaeveedee.

The code below is almost getting it all:

Quote

 

<style> body
{background-color: #E6E6E6;}
#canvas {background-color: #E6E6E6;} 
</style>

<style>
#header {display: none;}
</style>

<style>  
.sqs-widgets-audio-player {background:white!important;}
.sqs-widgets-audio-player .action .play-button {border-left-color: black!important;} 
.sqs-widgets-audio-player .action .pause{border-color: black!important;}
.sqs-widgets-audio-player .progress {display: none !important;}
.sqs-widgets-audio-player .time {display: none !important;}
.sqs-widgets-audio-player .progress-bar {display: none !important;}
.sqs-widgets-audio-player .action {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
  transform: translate(-50%,-50%) !important;}   
</style>

<style>
div#page-section-65798fa962771a6b7f4a6a5a * {
    background-color: transparent !important;
}
.sqs-widgets-audio-player .track .icon {
    display: none !important;
}
.sqs-widgets-audio-player .action {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
}
  </style>

<style>
.sqs-block-audio {
  text-align: center;
  .sqs-audio-embed {
    display: inline-block;
  }
  .sqs-widgets-audio-player {
    .track, .labels, .secondary-controls {
      display: none;
    }
  }
}
  </style>

 

The only thing unneeded is the right border (in grey) next to the play button.

Do you think we can remove this?

Edited by MiguelFerrao
Posted

update to this

.sqs-block-audio {
  text-align: center;
  .sqs-audio-embed {
    display: inline-block;
  }
  .sqs-widgets-audio-player {
    .track, .labels, .secondary-controls {
      display: none;
    }
    .action {
      border-right: none !important;
    }
  }
}

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

 🛠️ Web Designer's Toolkit

**some of these contain affiliate links

Posted

Ok, I’ve created exactly the play/pause button I wanted.

Unfortunately, it is not centred. Can we fix that?

Here is the code I used:

.sqs-widgets-audio-player .action .play-button {
box-sizing: border-box;  
height: 40px;
border-style: solid;
border-width: 25px 0 25px 40px;
border-color: transparent transparent transparent white;
margin: 0;} 
.sqs-widgets-audio-player .action .pause{box-sizing: border-box;  
height: 50px;
border-style: double;
border-width: 0px 0px 0px 40px;
border-color: transparent transparent transparent white;} 

Posted

See if this works, it seems to work in the browser for me.

 

.sqs-widgets-audio-player .action {
  .play, .pause {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

 

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

 🛠️ Web Designer's Toolkit

**some of these contain affiliate links

Posted

Thanks a lot @jaeveedee

Should I substitute any code already there?

<style> body
{background-color: #E6E6E6;}
#canvas {background-color: #E6E6E6;} 
</style>

<style>
#header {display: none;}
</style>

<style>
.sqs-widgets-audio-player {background:white!important;}    
.sqs-widgets-audio-player .action:hover {background-color:transparent!important;}  
.sqs-widgets-audio-player .action .play-button {
box-sizing: border-box;  
height: 40px;
border-style: solid;
border-width: 25px 0 25px 40px;
border-color: transparent transparent transparent white;} 
.sqs-widgets-audio-player .action .pause{box-sizing: border-box;  
height: 50px;
border-style: double;
border-width: 0px 0px 0px 40px;
border-color: transparent transparent transparent white;} 
.sqs-widgets-audio-player .progress {display: none !important;}
.sqs-widgets-audio-player .time {display: none !important;}
.sqs-widgets-audio-player .progress-bar {display: none !important;}
.sqs-widgets-audio-player .action {
    position: fixed !important;
    top: 50% !important;
    left: 49% !important;  
  transform: translate(-50%,-50%) !important;} 
.sqs-widgets-audio-player .track .icon {
    background-color: none!important;}
</style>

<style>
div#page-section-65798fa962771a6b7f4a6a5a * {
background-color: transparent !important;}
.sqs-widgets-audio-player .track .icon 
{display: none !important;}
  </style>

<style>
.sqs-widgets-audio-player .action {
  .play, .pause {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}</style>

<style>
.sqs-block-audio {
  text-align: center;
  .sqs-audio-embed {
    display: inline-block;
  }
  .sqs-widgets-audio-player {
    .track, .labels, .secondary-controls {
      display: none;
    }
    .action {
      border-right: none !important;
    }
  }
}
</style>

  • Solution
Posted

@MiguelFerrao I think this wraps everything up together. See if it still works after you replace all that with this. Are you putting this into the header code injection instead of the custom css panel? 
 

<style>
  body {
    background-color: #E6E6E6;
}

#canvas {
    background-color: #E6E6E6;
}

#header {
    display: none;
}

div#page-section-65798fa962771a6b7f4a6a5a * {
    background-color: transparent !important;
}

.sqs-block-audio {
    text-align: center;

    .sqs-audio-embed {
        display: inline-block;
    }

    .sqs-widgets-audio-player {
        background: white !important;

        .action:hover {
            background-color: transparent !important;
        }

        .action {
            position: fixed !important;
            top: 50% !important;
            left: 49% !important;
            transform: translate(-50%, -50%) !important;
            border-right: none !important;

            .play-button {
                box-sizing: border-box;
                height: 40px;
                border-style: solid;
                border-width: 25px 0 25px 40px;
                border-color: transparent transparent transparent white;
            }

            .pause {
                box-sizing: border-box;
                height: 50px;
                border-style: double;
                border-width: 0px 0px 0px 40px;
                border-color: transparent transparent transparent white;
            }

            .play,
            .pause {
                left: 50% !important;
                transform: translateX(-50%) !important;
            }
        }

        .progress,
        .time,
        .progress-bar,
        .track,
        .labels,
        .secondary-controls {
            display: none !important;
        }

        .track .icon {
            background-color: none !important;
            display: none !important;
        }
    }
}
</style>

 

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

 🛠️ Web Designer's Toolkit

**some of these contain affiliate links

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.