Squarespace Tips #2 - Line & Quote Block Styling

 

Line block - general styling

The line block on Squarespace can be a great tool for breaking up content, however it is super limited in terms of customisation. These code snippets will allow you to change various style elements of the Horizontal Line block.

The following code snippets need to be inserted into your main CSS Editor window. The values in bold can be changed to suit your site design. If you need help adding CSS to your Squarespace site please read our guide here.

Where colour values are added, you can either of the following:

  • Valid colour name e.g. 'red' or 'yellow'

  • Hex value e.g. #FECB2F

  • RGB value (optional opacity values '0.8') e.g. rgba (255,255,255,0.8)

Margin
// REMOVE LINE MARGIN //
 .sqs-block hr { 
margin: 0; 
} 

Color
// LINE COLOR // 
.sqs-block hr { 
background-color: #fecb2f; 
} 

Height// LINE HEIGHT //
 .sqs-block hr { 
height: 2px; 
} 

All together
// LINE STYLE //.sqs-block hr {
margin: 0;
height: 2px;
background-color: #fecb2f;
}
 

 

Line Block - border styling

Want to make your lines a little extra special? Why not add an extra coloured border around them!

The following code snippets need to be inserted into your main CSS Editor window. The values in bold can be changed to suit your site design. If you need help adding CSS to your Squarespace site please read our guide here.

Where colour values are added, you can either of the following:

  • Valid colour name e.g. 'red' or 'yellow'

  • Hex value e.g. #FECB2F

  • RGB value (optional opacity values '0.8') e.g. rgba (255,255,255,0.8)

Here's a normal line:

 

 

Here's a line with a yellow border:

 

 

Here's the code:

// LINE BLOCK BORDER // 
.sqs-block-content hr { 
background-color: #000000 !important; border: 
#fecb2f 3px solid !important; 
} 

Or, if you'd like to have different colours and thicknesses around your line:

// LINE BLOCK BORDER //
.sqs-block-content hr {
background-color: #000000 !important; 
border-top: #fecb2f 3px solid !important; 
border-right: #fecb2f 3px solid !important; 
border-bottom: #fecb2f 3px solid !important; 
border-left: #fecb2f 3px solid !important; 
} 
 

 

Quote Block - source styling


Squarespace allows limited customisation of the quote block in the main Style Editor - to add some extra style to your quote sources, try some of these!

The following code snippets need to be inserted into your main CSS Editor window. The values in bold can be changed to suit your site design. If you need help adding CSS to your Squarespace site please read our guide here.

Where colour values are added, you can either of the following:

  • Valid colour name e.g. 'red' or 'yellow'

  • Hex value e.g. #FECB2F

  • RGB value (optional opacity values '0.8') e.g. rgba (255,255,255,0.8)

Colour
// QUOTE SOURCE COLOR // 
.sqs-block-quote .source { 
color: #fecb2f; 
} 

Size
// QUOTE SOURCE SIZE // 
.sqs-block-quote .source { 
font-size: 16px; 
} 

Weight
// QUOTE SOURCE WEIGHT // 
.sqs-block-quote .source { 
font-weight: 600; 
} 

All together
// QUOTE SOURCE STYLE // 
.sqs-block-quote .source { 
color: #fecb2f; 
font-size: 16px; 
font-weight: 600; 
}

Thumbnail photo credit - Squarespace.

 
TipsAdam Matheson