How to change the horizontal line colour on a Squarespace site
In this tutorial, you will learn how to change the colour of the horizontal line on your Squarespace site. Whether you are using Squarespace 7.0 or 7.1, the code provided in this tutorial will work seamlessly for both versions. By following the steps outlined below, you will be able to customise the appearance of the horizontal line on your Squarespace website to suit your design preferences.
Squarespace makes it easy for anyone to build beautiful websites without writing a single line of code. However, when it comes to finer customizations — like changing the color of a horizontal line you might find that the platform’s built-in options are a bit limited.
The good news is that with just a little bit of custom CSS, you can completely control the look and feel of your site’s dividers, allowing them to match your brand’s style perfectly.
In this post, we’ll walk you through exactly how to change the horizontal line colour on your Squarespace site..
Table of Contents
Benefits of customizing the horizontal line?
Before we dive into the how, it’s worth asking — why bother changing the horizontal line colour at all?
Stronger Branding: Consistent use of your brand colours across your site (even in dividers) reinforces your brand identity and professionalism.
Better Visual Flow: A custom-coloured line can help guide the visitor's eye through the page, especially when separating sections.
Improved Aesthetic Appeal: Small details like line colour make your site look more polished, designed, and cohesive.
Highlight Important Sections: By using a contrasting colour, you can make specific content stand out more effectively.
A small tweak like this can make a big difference in the overall perception of your website.
Complexity: Easy
Step-by-Step Instructions
Step 1: To change the colour of your horizontal line colour, simply copy the code below:
// Horizontal Line Color// .sqs-block-horizontalrule hr { background-color: #FFBF00; }
Step 2: From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code.
You can then adjust the background colour to your liking.
Key Takeaways
This technique works on both Squarespace 7.0 and 7.1.
Horizontal colour help enhance visual hierarchy and branding.
Works site-wide for all horizontal rule blocks.
FAQs
Can I change the horizontial color?
Yes! Replace #FFBF00 in the code with any hex color value to match your site’s branding.
Will this affect my entire site?
Yes, this CSS applies to all horizontal rules. To target a specific page or section, you can use #collection-id or #blockidnumber selectors.
Can I remove the effect later?
Absolutely. Just delete the code from the Custom CSS editor and the applied colour will be removed.
Is it mobile-friendly?
Yes. The horizontal line colour effect renders well on mobile devices.
How can I target and style only one specific horizontal line on a page?
You can add the colour to just one horizontal line by targeting it using a unique block ID (e.g., #block-yui_3_17_2_1_1700000000000_1234) in your CSS. Use the Squarespace Block Identifier Chrome extension to locate the block ID.
Conclusion
Changing the colour of your horizontal lines in Squarespace is a small but powerful customization that can dramatically improve the cohesiveness and style of your website. Whether you're enhancing your brand’s presence or simply polishing the page design, updating divider lines with a quick snippet of CSS gives you creative control Squarespace's default settings might not offer.
With just a few minutes of effort, you can turn standard dividers into elegant design elements that strengthen your website’s visual identity..
