How to Create a Colored Horizontal Line in Squarespace

 
How_to_create_colored_vertical_line_in_Squarespace (1).jpg
 

The horizontal line block is probably my second favorite after the spacer block. I love to use it when designing pages, but also in my blog posts to break up text and make it nicer and neater. One downside to it - it’s just plain black, so it gets a little boring over time. But worry not, my friend - with just a tiny bit of code you can make those lines pop in whatever color you desire!

Follow the instructions below to see how!

 

INSERT LINE BLOCK

Go ahead and insert a line block on the desired page of your site.

Line_block_instruction.jpg
 

COPY & PASTE CSS CODE

Depending on whether you want to color the lines on your whole website or on a single page of the website, here is the steps you need to follow:

A. Change the lines on a single page

Click on the “Settings” tab of the page where you want to make changes. You can access it by clicking the cog icon next to page’s name:

Editing_settings_on_Squarespace_page.png

Next, click on Advanced and paste the following code snippet:

<style>
.sqs-block-horizontalrule hr { background-color: red; }
</style>
Editing_advanced_settings_Sqaurespace.PNG

To change the color of the line, simply replace the word “red” with whatever HEX color code your heart desires.


B. Change the lines on the whole website

Go to the ‘Custom CSS’ area of your website. You can find it under Design > Custom CSS and here is a snapshot of what it looks like:

Custom_CSS_area.png

Paste the following code snippet in the empty field:

/* CUSTOM CSS */
.sqs-block-horizontalrule hr { 
background-color: #00e5ee; 
}

This snippet is styled with the color #00e5ee, to change it, simply replace this code in the snippet above with the HEX code you prefer. You can browse https://htmlcolorcodes.com/ for some inspiration.

And you’re done!

If you enjoyed this little design hack, feel free to browse the blog for more tips and tricks.