How to change the Squarespace line block’s color and width in versions 7.0 & 7.1, video tutorial
video tutorial below!
Don’t need to see the walkthrough? Skip ahead to grab your copy&paste code.
Not sure which version you’re using? Here’s a quick cheat to find out:
When you log into your website on Squarespace, there will be an arrow at the top of the page that you can click for a full-screen view.
If the arrow is in the top-left corner, you have Squarespace 7.0.
If the arrow is in the top-right corner, you’re using version 7.1!
Oh, and if you haven’t purchased your Squarespace subscription yet, feel free to use my code BEJ10 for 10% off.
Now on to the tutorial! 🙂
Normally if you want to change how long a Squarespace line block appears on your page, you’d have to add a spacer block next to it and drag it over.
I recently found myself working on a client website where I wanted all the lines to be the same width (or length depending on how you see things, haha). I wanted all the lines on the website to take up about 75% of the typical allotted space.
So I used the simple code hack below to make this adjustment!
Additionally, it’s kind of annoying that in the older versions of Squarespace, you can only have a black line… or a white line. The end.
But sometimes, I want the lines to be an element of the color scheme, with a minimal pop of color. Other times, I want all the lines in the design to be subtle and fade into the background.
This code will solve that for you too!
an easy way to change the size or color of every line block on your squarespace site
This video will show you exactly to use & customize this code, and how Squarespace 7.1 users can change the colors of their line blocks without having to input any custom CSS!
Timestamps:
Squarespace 7.0 tutorial starts @1:00
Squarespace 7.1 tutorial starts @3:07
Now grab the code and get creative! 🙂
Change just the line color in SQSP 7.0
Go to Design > Custom CSS > paste in the following code:
/* Change Line Color */
.sqs-block-horizontalrule hr {
background: #FF0000;
}
Adjust the ‘#’ hex code to the desired color
Change just the line width in SQSP 7.0
Go to Design > Custom CSS > paste in the following code:
/* Change Line Width */
.sqs-block-horizontalrule hr {
width: 75%;
margin:auto;
}
Adjust the percentage to the desired line width
Change your line width and color in SQSP 7.0
Go to Design > Custom CSS > paste in the following code:
/* Change Line Color & Width */
.sqs-block-horizontalrule hr {
background: #FF0000;
width: 75%;
margin:auto;
}
Adjust the ‘#’ hex code to the desired color
Adjust the percentage to the desired line width
Change just the line color in SQSP 7.1
Go to Design > Colors > Click on the color scheme you want to affect > Line Block: Line Color
Choose your color from the ‘Palette’ options or from ‘Custom’
Repeat for any sections necessary
Don’t forget to Save!
Change just the line width in SQSP 7.1
Go to Design > Custom CSS > paste in the following code:
/* Change Line Width */
.sqs-block-horizontalrule hr {
width: 75%;
margin:auto;
}
Adjust the percentage to the desired line width
