How to Change the Colour of a Line Block on Squarespace
In this tutorial, I'll share how to change the colour of a horizontal line on Squarespace using CSS. The code provided in this tutorial will work seamlessly with Squarespace 7.0 and 7.1. Additionally, I'll share a range of additional tweaks you can make to give your site the edge.
Before we begin, you need to know where to add the custom CSS to your Squarespace website. Please note you will need a minimum Squarespace business plan subscription to have the ability to add custom CSS to your site.
Website -> Pages -> Website Tools -> Custom CSS
How to change the colour of a horizontal line in Squarespace?
// Horizontal Line Change Colour
.sqs-block-horizontalrule hr {
background-color: #BC1212;
}
How to change the thickness of a horizontal line in Squarespace?
// Horizontal Line Height
.sqs-block-horizontalrule hr {
height: 5px;
}
How to add a gradient colour to a horizontal line in Squarespace?
// Horizontal Line Add Gradient
.sqs-block-horizontalrule hr {
background-image: linear-gradient(to right, #3360E3 , #BC1212);
}
Adjust the ‘#’ hex code to the desired color
How to change the width of a horizontal line in Squarespace?
Adjust the percentage from 0-100% to achieve the desired effect.
// Horizontal Line Change Width
.sqs-block-horizontalrule hr {
width: 50%;
text-align: left;
margin-left: 0;
}
Additionally, you can align your horizontal line to the left or right. To keep the line centred, you don't need to add any CSS.
// Horizontal Line Align Left
.sqs-block-horizontalrule hr {
text-align: left;
margin-left: 0;
}
// Horizontal Line Align Right//
.sqs-block-horizontalrule hr {
text-align: right;
margin-right: 0;
}
Ok, so now let's put this all together:
// Horizontal Line Customisation
.sqs-block-horizontalrule hr {
background-image: linear-gradient(to right, #3360E3 , #BC1212);
height: 2px;
width: 50%;
text-align: left;
margin-left: 0;
}
If you applied any of the following code snippets above, you might have noticed that the customisation has been implemented across all the horizontal lines across your site. If you are looking to target a specific line, section or page, download the free Chrome extension Squarespace ID finder.
Once you have identified the line, section or page you'd like to target, you need to wrap the code.
Example of how to target all the horizontal lines on a specific page:
// Horizontal Line Customisation - Target Page XYZ
#collection-666b0687b21110068f6b31e0 {
.sqs-block-horizontalrule hr {
background-image: linear-gradient(to right, #3360E3 , #BC1212);
height: 2px;
width: 50%;
text-align: left;
margin-left: 0;
}
}
Example of how to target all the horizontal lines in a section:
// Horizontal Line Customisation - Targeting Page XYZ Section XYZ
section[data-section-id="666b0733addcc70bedec1392"] {
.sqs-block-horizontalrule hr {
background-image: linear-gradient(to right, #3360E3 , #BC1212);
height: 2px;
width: 50%;
text-align: left;
margin-left: 0;
}
}
Top Tip: Always make sure you add a note above the CSS about the customisation and where it's targetting for future reference. You wouldn't believe how quickly things can become muddled otherwise.
// Add a note by placing a double forward slash followed by your reference above your CSS code.
Your Squarespace Designer
Whether you're a fresh-faced start-up, a family business, or a multimillion-pound corporation, over the years, I've provided my Squarespace web design and SEO skills to a multitude of companies across a wide range of sectors.
If you're interested in discussing a potential project, drop me an email at hello@studiohuxley.co.uk or get in touch with me here. You can also book a free 20-minute consultation call to discuss your project in more detail.
