How to Change the Color of the Line Block in SquareSpace

Customizing your website is a great way to bring your brand to life online. We're avid users of the SquareSpace platform as a means of creating new, visually stunning websites. Although you're able to customize a lot through the Style Editor, some cases require adding custom CSS to the site.

Check out the tutorial below on how to change the color of the line block, a simple change not available in the Style Editor for all templates. 


Insert the Line Block

Insert a Line Block on your SquareSpace website. 

 Click on line, or type in 'line' under the search bar  

Click on line, or type in 'line' under the search bar
 

Custom CSS

Copy the code listed below and paste it into the ‘Custom CSS’ area of your website.
To access the Custom CSS area of your site, click on : Home > Design > Custom CSS

kake-chicago-how-to-change-the-color-of-the-line-block-squarespace
KAKE-chicago-how-to-change-the-color-of-the-line-block-in-squarespace

Copy and paste the code below and add it to your site's custom CSS on a new line :

 

/* CUSTOM CSS */

 .sqs-block-horizontalrule hr { background-color: #33cccc; }

 

The color is set to KAKE Green. You can customize the color to your liking by adding any hex color. The Adobe Color site is a great resource for creating new color palates, check out their link here. Enjoy!

 

Contact us today to learn more about our web design services!


KAKE Chicago digital marketing is located in the
vibrant Pilsen neighborhood. Come visit us at

2150 S. Canalport Ave, 
Chicago IL 60608
312.929.3124

Facebook  |  Twitter  |  Instagram