Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 https://insidethesquare.co/learn
—
Most Squarespace sites have a standard grey horizontal line. This weeks CSS tutorial shows you how to change the color and size of that line, as well as some cool tricks like making the line dotted, dashed, or even striped! Watch this Squarespace CSS tutorial to learn how to use the codes below.
/* Change Line Color: You can do this in the main style editor, but if you want a special color for an individual page, this code will get you there! 🙂 */
.sqs-block-horizontalrule hr {
background: #50bdb8;/*adjust the line color*/
}
/* Change Line Size */
.sqs-block-horizontalrule hr {
height: 8px!important;/*adjust the line size*/
}
/* Dotted Line */
.sqs-block-horizontalrule hr {
background: transparent!important;
border-top: 3px dotted #50bdb8;
}
/* Dashed Line */
.sqs-block-horizontalrule hr {
background: transparent!important;
border-top: 3px dashed #50bdb8;
}
/* Striped Line */
.sqs-block-horizontalrule hr {
background: #df89a4;/*adjust the small stripe*/
border-top: 10px dashed #ffcfdd;/*adjust the big stripe*/
}
/* Double Line */
.sqs-block-horizontalrule hr {
background: #df89a4 ;/*adjust the bottom line color*/
height: 5px!important;/*adjust the bottom line size*/
border-top: 5px solid #50bdb8;/*adjust the top line size and color*/
}
▸▸▸ Ready for more codes?
The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy at https://InsideTheSquare.co/css
—
Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
—
The term “Squarespace” is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥
—
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips
