How to change a line block - Squarespace 7.1

How to change all line blocks across the whole site

.sqs-block-horizontalrule hr {
  background-color: green ;
}

or

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

Example:

---

How to change all line blocks within a specific section only

section[data-section-id="664f03bae6372d054afb8948"]
.sqs-block-horizontalrule hr {
    background: grey !important;
}

or

section[data-section-id="664f03bae6372d054afb8948"]
.sqs-block-horizontalrule hr {
    background: #808080 !important;
}

Example:

---

How to change an individual line block only

You can have the ability to change an individual line block but it slightly goes against the usual rules of targeting block IDs. As you can see in the example, you need to put the ID (#block-yui……) after the class and without a space.

.sqs-block-horizontalrule#block-yui_3_17_2_1_1719498723786_3719 hr {
  background-color: red ;
}

or

.sqs-block-horizontalrule#block-yui_3_17_2_1_1719498723786_3719 hr {
  background-color: #ff0000 ;
}

Example:

---

Red

---

Orange

---

Blue

How to find the ID picker to target specific blocks

Styling line blocks

You can combine the codes you’ve learnt above with the ability to style them below - everything inside the brackets.

---

// CHANGE THE THICKNESS OF LINES //
.sqs-block-horizontalrule hr {

height: 4px;

}

// ADD GRADIENT COLOR TO LINES //
.sqs-block-horizontalrule hr {

background-image: linear-gradient(to right, #7cccbd, #319aab);

}

// ROUND EDGES OF LINE //
.sqs-block-horizontalrule hr {

border-radius: 25px;

}

// ADD A BORDER AROUND THE LINE //
.sqs-block-horizontalrule hr {

border: 2px solid; 
border-color: white; 

}

// CHANGE LINE STYLE //
Tip! You can change "dotted” to "dashed" or "double".

.sqs-block-horizontalrule hr {

border-top: 5px dotted #ffffff; 
background: none;

}

// ADD A DROPSHADOW //
.sqs-block-horizontalrule hr {

box-shadow: 0px 5px 6px #a5a5a5;

}