How to customize the newsletter block in Squarespace

content block

Sep 26

This tutorial will show you how to customize the colors, fonts, and shapes of your newsletter block with CSS.

We’ll adjust the colors and fonts, creating styles that you can’t replicate using the design menu alone.

Here is a step-by-step video showing you how the codes work. When you’re ready to give it a try, you’ll find the steps and custom css from the tutorial below!

Here are the codes from this tutorial. Be sure to update the values style to make this work for your own unique website design.

/* add a border to the block */
.newsletter-block{
border:1px solid #333
}

/* make the disclaimer text capitalized */
.newsletter-form-footnote  {
text-transform:uppercase!important
}

/* curve the corners of the input & give it a border */
.newsletter-form-field-element{
border-radius: 30px;
border:1px solid #333!important
}

/* change button color on a hover */
.newsletter-form .newsletter-form-button:hover{
background: #ccc!important;
color:#333!important;
opacity:1!important
}