Customizing the Horizontal Line in Squarespace
The horizontal line block in Squarespace is a great way to divide information on your site. But the default styling is a little bland.
By default, Squarespace has their horizontal line styled like this:
But Sealevel wanted to customizing our horizontal line a little to fit our branding and use our yellow-to-orange sunrise gradient. Here’s what ours looks like:
Here’s the code that got us there:
/*Horizontal Line Customization by Sealevel Agency*/
hr {
background-image: linear-gradient(to right, #ffdd15, #F55536);
padding: 3px;
}Let’s break that down:
First, we have to find something to target.
In HTML and CSS, there are selectors that are used to target specific pieces of content. Squarespace has selectors already written for every content block, so we have to find it to be able to target the horizontal line.
In order to do that, we have to use the developer tools that come with the Chrome browser. Simply right click (while using Chrome) on a section of any website and click “inspect”.
(These images can be clicked to enlarge.)
You’ll then hover over the element you want to inspect. It’ll give you the information associated with each specific element.
Then you need to do a little digging to find out where exactly the horizontal line is written in the inspect tools.
We can see when we dig a little deeper by clicking on the down arrows, the horzonital line in nested in <hr>.
2. Next, we want to add the color. If you don’t want the line to be a gradient, simply write the code like this:
hr {
color:#f55536;
}Those numbers and letters after the hash is called a hex code. You can find hex codes for your brand colors at coolors.co/app.
3. We decided to add a little padding.
You can see in the default styling that the line is very thin. We decided we wanted the line to be a little more pronounced.
We added padding: 3px; to give the line a little more weight to it, which makes it easier to see the gradient.
4. If you want to make the line shorter, add a max width.
That would look like this:
hr {
color:#yourhexcode;
padding:aNumberpx;
width:200px;
}You can play with the number to see how short or long you want your line to be.
5. Add the code to your Custom CSS Tab with a comment.
The comment in gray at the top, which doesn’t effect the code, helps you and other designers and developers know what the code is for in your site.
This is extremely helpful if you’re working with different designers at different times. A designer can go into your custom CSS and know exactly what every line of code is used for.
Write it in just like it’s shown (with the /**/ opening and closing the text) and your next designer – and your future self – will thank you.