Audio Blocks

GENERAL ELEMENT COMPONENTS & CSS SNIPPETS

Select a Squarespace Element to Examine CSS Selectors: 

Squarespace Element Description
Audio Block Elements Refers to Audio Block elements.

 CSS Code Snippets for Customizing Audio Blocks

Set a custom border thickness for the two border elements in minimal style Audio Blocks

 
//Start: Set a custom border thickness for the two border elements in minimal style Audio Blocks
.sqs-block-audio .player .action {
  border-right-width: 2px;
}
.sqs-block-audio .player .played .icon {
  width: 2px;
}
//Start: Set a custom border thickness for the two border elements in minimal style Audio Blocks

Set custom font sizes for minimal style Audio Block Text Elements

 
//Start: Set custom font sizes for minimal style Audio Block Text Elements
.sqs-block-audio .player .labels .title {
  font-size: /*1em*/;
}
.sqs-block-audio .player .labels .artistName {
  font-size: /*1em*/;
}
.sqs-block-audio .player .secondary-controls .time {
  font-size: /*1em*/;
}
.sqs-block-audio .player .secondary-controls .download a {
  font-size: /*1em*/;
}
//Start: Set custom font sizes for minimal style Audio Block Text Elements

Set custom font sizes for classic style Audio Block Text Elements

 
//Start: Set custom font sizes for classic style Audio Block Text Elements
.sqs-block-audio .sqs-audio-embed .sqs-audio-player .audio-title {
  font-size: 1em;
}
.sqs-block-audio .sqs-audio-embed .sqs-audio-player .audio-author {
  font-size: 1em;
}
.sqs-block-audio .sqs-audio-embed .sqs-audio-player .duration {
  font-size: 1em;
}
.sqs-block-audio .sqs-audio-embed .sqs-audio-player .download a {
  font-size: 1em;
}
//End: Set custom font sizes for classic style Audio Block Text Elements
Previous

Form Blocks
Next

Shape Blocks