Jump to content

Newsletter Block Customisation

Go to solution Solved by Lesum,

Recommended Posts

Hi,

I am trying to customise the newsletter block in the footer of my site https://www.integral8.com/. I need help with the following:

- Remove the right hand side and bottom padding of the newsletter block (see screengrab)
- Remove the white keyline from around the 'subscribe' button on this block
- Make the description text in the white boxes the dark grey of my site eg First name, Last name, Email address
- Remove the thin grey keyline from around the white boxes
Thanks

Laura

Screenshot-2023-09-06-at-14.26.31.jpg

Link to comment
  • Solution

Hi @dotandpeg To remove the right and bottom padding, you can add this code snippet:

.newsletter-block .newsletter-form-fields-wrapper {
	width: 100% !important;
}
.newsletter-block .newsletter-form-wrapper--layoutStack .newsletter-form-name-fieldset {
	max-width: none !important;
}
.newsletter-block .newsletter-form-wrapper--layoutStack .newsletter-form-field-wrapper {
	max-width: none !important;
}
.sqs-block-newsletter .newsletter-form-footnote {
	display: none !important;
}
.newsletter-block .newsletter-form-body {
	padding: 0 0 0rem 0 !important;
}

 

To remove the outline around the subscribe button, you can add this code snippet:

button.newsletter-form-button {
    border: none !important;
}

 

To change the font-size of the subscribe button, you can add this code:

span.newsletter-form-button-label {
	font-size: 0.9rem !important;
}
      

 

To change the color of the description text in the white boxes (input placeholder), you can add this code snippet:

.newsletter-form-field-element::placeholder {
    color: #636363 !important;
}

 

To remove the outline around the white boxes, you can add this code snippet:

.sqs-block-newsletter .newsletter-form-field-element {
	border: none !important;
}

Let me know how it goes. Thanks! 

Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@dotandpeg Add this code to modify the Shop button:

footer .sqs-block-button-element {
    border: none !important;
    font-size: 0.9rem !important;
}

To remove the top spacing, add this code snippet:

.newsletter-block.newsletter-form-has-small-container .newsletter-form-header {
	display: none !important;
}

.newsletter-block .newsletter-form-fields-wrapper {
	margin: 0rem 0 0 0 !important;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@dotandpeg I'm not seeing this block of code being applied to your site:

.newsletter-block .newsletter-form-header {
    display: none !important;
}

This should remove the top gap. 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
33 minutes ago, catalienne said:

@Lesum do you by any chance have code for even spaced padding for newsletter section between the input boxes first name, last name, email and sing up buttons for example?

@catalienne You can try this code snippet:

.newsletter-block .newsletter-form-button-wrapper {
	margin: 0rem 0 0 0 !important;
}

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.