Newsletter Block - Super Pill Style
1. Plugin Info
Add a pill style to the entire newsletter block.
Works with Squarespace 7.0 and 7.1
Uses Custom CSS
2. Add this code to Custom CSS
// Newsletter Block - Super Pill Style - Ghost //
@news-pill-background: #fff;
@news-pill-padding: 10px 20px;
@news-pill-border: 1px solid #eee;
@news-pill-border-radius: 50px;
@news-pill-field-border: 1px solid #fff;
@news-pill-field-border-radius: 50px;
/* --- Do Not Edit Below ---- */
.newsletter-block .newsletter-form-body { background: @news-pill-background; border: @news-pill-border; border-radius: @news-pill-border-radius; display: inline-block; padding: @news-pill-padding; } .newsletter-block .newsletter-form-fields-wrapper, .newsletter-block .newsletter-form-button-wrapper { margin: 0px !important; } @media only screen and (max-width: 640px) { .newsletter-block .newsletter-form-button-wrapper, .newsletter-block .newsletter-form-button, .newsletter-block .newsletter-form-fields-wrapper, .newsletter-block .newsletter-form-field-wrapper, .newsletter-block .newsletter-form-wrapper--layoutStack .newsletter-form-field-wrapper, .newsletter-block .newsletter-form-wrapper--layoutStack .newsletter-form-name-fieldset { width: 100% !important; max-width: 100%; display: block !important; } } .sqs-block-newsletter .newsletter-form-field-element { border-radius: @news-pill-field-border-radius; border: @news-pill-field-border; }
// Newsletter Block - Super Pill Style - Ghost //3. Customizable Options
Background Color
Inner Padding
Border Style (Full Block)
Border Radius (Full Block)
Field Border Style
Field Border Radius
Button style can be changed in Squarespace settings.
4. Plugin Notes
Applies to both fields (name and email) and button.
Compatible with only the Float setting.
The fields and button will stack on mobile.
