How to customize a horizontal line block in Squarespace
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About this tutorial
This tutorial was recorded using Squarespace 7.1 and will also work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
You can change the color of your horizontal line using the design menu in Squarespace. For any other customization, you’ll need some CSS and that is exactly what you’ll learn in this tutorial. We’ll be using custom code to change the thickness of the line, add a shadow, create a double line, and even change the line to a dotted one.
These customization options will help you make your line block stand out and add visual interest to your designs. Let's dive in and discover how to take your line block customization to the next level!
The codes from this tutorial are below, along with links to related content that will help you customize it even more.
Video tutorial
Code Example
Here are the codes from this tutorial. Be sure to update the values style to make this work for your own unique website design.
Change the height
.sqs-block-horizontalrule hr {
height: 20px
}
Add a shadow
.sqs-block-horizontalrule hr {
box-shadow: 0px 3px 5px 0px #333;
}
Create a double line
.sqs-block-horizontalrule hr {
box-shadow: 0px 3px 0px 0px #333;
}
Create a dotted line
.sqs-block-horizontalrule hr {
border-bottom:5px dotted #333;
background:none
}
