More Line Block Styles

Line_Styles.png

Step One

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Two

There are 5 styles available. Copy and paste one of the codes below into the Custom CSS Editor box.

// Line Block 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;/*adjust the line color and size*/
}


// Dashed Line // 

.sqs-block-horizontalrule hr {
background: transparent!important;
border-top: 3px dashed #50bdb8;/*adjust the line color and size*/
}


// Striped Line //

.sqs-block-horizontalrule hr {
background: #df89a4;/*adjust the small stripe color*/
border-top: 10px dashed #ffcfdd;/*adjust the big stripe color*/
}


// 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*/
}

Step Three

Based on which style you pick, change the background, border, or height to your liking.

Save and refresh the page. 👍

Moov Labs