Audio Block

Description

The audio block is used to add playable audio files. You can upload a file from your computer or link from an external file.

Custom CSS

For style changes across multiple pages, add the code snippet to your Custom CSS panel and each page will be updated.

Advanced Code Injection

For style changes on one page, add the code snippet to the page Advanced Code Injection so only that page will be updated. Enclose your code in style brackets like this:

<style>

.sqs-widgets-audio-player {
}

</style>

Custom CSS

To target the entire audio player block

/* audio player block */
.sqs-widgets-audio-player {	
}

To target the background

/* audio player background */
.sqs-widgets-audio-player .track {
}

To target the play and pause button

Hot Tip: The play and pause button use a left border code. You can change the size and color using the border-left code like this:
.sqs-widgets-audio-player .play .play-button {border-left: 25px solid red;}

/* play button */
.sqs-widgets-audio-player .play .play-button {
}

/* pause button */
.sqs-widgets-audio-player .action .pause {
}

To target the track title

/* track title */
.sqs-widgets-audio-player .title-wrapper .title {
}

To target the author/artist

/* author/artist */
.sqs-widgets-audio-play .artistName {
}

To target the time

/* time */
.sqs-widgets-audio-play .time {
}

/* time played */
.sqs-widgets-audio-player .time .progress {
}

/* time total */
.sqs-widgets-audio-player .time .total {
}