Newsletter Block Customisation

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

- one last thing, make the font size of 'subscribe' paragraph 3

Thanks @Lesum, I've tried those things and they didn't work. I have updated the design slightly so am looking to remove the padding/margin at the top and bottom.

@dotandpeg Not sure how or where you added the code. I don't see the code being applied to your site. It should have worked. 

@dotandpeg Did you add the code under Custom CSS panel? Can you maybe share a screenshot where you added the code?

Hi @Lesum,

It's all added now! It's nearly there, but I just have a gap above the newsletter form fields, how do I remove those? (see screengrab)

Also how do I isolate the shop now button in the footer to remove the white line around and reduce the text size?

Thanks so much!

@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;
}

@Lesum

The shop button has worked perfectly but the newsletter still has the top gap

@dotandpeg I'm not seeing the added code to remove the top spacing. It's the second block of code from my last comment.

Sorry, it's worked. My CSS keeps not updating unless I logout and in again for some reason!

Thanks very much for your help.

Hi @Lesum,

I am just working on my site again and the gap at the top of the newsletter block is still there. I've checked and the CSS is there, can you help?

Thanks

@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?

@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. 

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;
}

thank you @Lesum nothing seems to budge, the padding stays the same between the first name last name email and signup buttons