Newsletter Blocks
GENERAL ELEMENT COMPONENTS & CSS SNIPPETS
Select a Squarespace Element to Examine CSS Selectors:
| Squarespace Element | Description |
|---|---|
| Newsletter Block Elements | Refers to newsletter blocks. |
CSS Code Snippets for Customizing Newsletter Blocks
Add background image and overlay to newsletter blocks
If you only want to add a specific background image to a specific newsletter block, you can replace the selector ".sqs-block-newsletter" with the element’s block ID.
//Start: Newsletter background image and overlay
.sqs-block-newsletter {
background-image: url("https://images.squarespace-cdn.com/content/6071d94ae119485b3dfb5a63/de3488b1-f14a-4cff-9590-c518958be10d/Coder.png?content-type=image%2Fpng");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
.newsletter-form {
.newsletter-form-header-title, .newsletter-form-header-description, .newsletter-form-footnote {
color: #ffffff !important;
}
}
.sqs-block-content {
z-index: 10;
position: relative;
}
}
.sqs-block-newsletter:after {
content: "";
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
position: absolute;
top: 0;
left: 0;
z-index: 0;
border-radius: inherit;
}
//End: Newsletter background image and overlaySet custom font size for the post-submit message on newsletter blocks
//Start: Set custom font size for the post-submit message on newsletter blocks
.sqs-block-newsletter .form-submission-text {
font-size: 2em;
margin-bottom: 10px;
}
//End: Set custom font size for the post-submit message on newsletter blocks