Jump to content

Changing Newsletter Button in Footer to a Line 7.1

Recommended Posts

  • Replies 8
  • Views 757
  • Created
  • Last Reply

Top Posters In This Topic

On 3/21/2022 at 5:03 AM, abbyleebonny said:

@tuanphan - is there a way to keep the email address line and join line inline with each other is someone happens to *not* enter their email address? And to also change the colour of the red/pink pop up that says "Email address is required" to white background with black writting?

Try this CSS

footer.sections .newsletter-form-field-wrapper {
    padding: 0 !important;
    margin-right: -5px;
}
footer.sections .field-error {
    background-color: white !important;
    color: black !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
18 minutes ago, tuanphan said:

Try this CSS

footer.sections .newsletter-form-field-wrapper {
    padding: 0 !important;
    margin-right: -5px;
}
footer.sections .field-error {
    background-color: white !important;
    color: black !important;
}

 

Thank you - the colours worked but the email address line and join line still go out of alignment - any ideas how to fix that?

Screen Shot 2022-03-21 at 11.02.01 AM.png

Screen Shot 2022-03-22 at 4.34.42 PM.png

Link to comment

Add this to Design > Custom CSS to align both

footer.sections .newsletter-block .newsletter-form-body {
    display: flex;
    align-items: flex-end;
}
footer.sections .submit-wrapper {
    padding-bottom: 0px !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
11 hours ago, tuanphan said:

Add this to Design > Custom CSS to align both

footer.sections .newsletter-block .newsletter-form-body {
    display: flex;
    align-items: flex-end;
}
footer.sections .submit-wrapper {
    padding-bottom: 0px !important;
}

 

Thank you so much for your help  @tuanphan - when we have tried to make the cart button white with a black border it has affected what the newsletter button in the footer looks like... we had used code to turn the footer button into a black line, however changes to the cart checkout button have changed the newsletter button to white text with white outline instead of the black under line like the email address 'box' has - are you able to help?

 

This is the code we have for footer and cart checkout button.

 

.checkout-button {
    background: white !important
}

div.item-quantity input, button.checkout-button {
    border: 1px solid black !important;
}

footer.sections input[type="text"] {
    background: transparent;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}footer.sections input[type="text"] {
    border-color: black;
}
footer.sections input[type="text"]::placeholder {
    color: black !important;
}
/* Footer Join button */
footer.sections .sqs-block-newsletter .newsletter-form-button {
    background-color: transparent !important;
    border-bottom: 1px solid;
}

footer.sections .newsletter-form-field-wrapper {
    padding: 0 !important;
    margin-right: -5px;
}
footer.sections .field-error {
    background-color: white !important;
    color: black !important;
}

footer.sections .newsletter-block .newsletter-form-body {
    display: flex;
    align-items: flex-end;
}
footer.sections .submit-wrapper {
    padding-bottom: 0px !important;
}
 

Screen Shot 2022-03-24 at 9.33.34 AM.png

Link to comment
On 3/24/2022 at 3:40 AM, abbyleebonny said:

Thank you so much for your help  @tuanphan - when we have tried to make the cart button white with a black border it has affected what the newsletter button in the footer looks like... we had used code to turn the footer button into a black line, however changes to the cart checkout button have changed the newsletter button to white text with white outline instead of the black under line like the email address 'box' has - are you able to help?

 

This is the code we have for footer and cart checkout button.

 

.checkout-button {
    background: white !important
}

div.item-quantity input, button.checkout-button {
    border: 1px solid black !important;
}

footer.sections input[type="text"] {
    background: transparent;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}footer.sections input[type="text"] {
    border-color: black;
}
footer.sections input[type="text"]::placeholder {
    color: black !important;
}
/* Footer Join button */
footer.sections .sqs-block-newsletter .newsletter-form-button {
    background-color: transparent !important;
    border-bottom: 1px solid;
}

footer.sections .newsletter-form-field-wrapper {
    padding: 0 !important;
    margin-right: -5px;
}
footer.sections .field-error {
    background-color: white !important;
    color: black !important;
}

footer.sections .newsletter-block .newsletter-form-body {
    display: flex;
    align-items: flex-end;
}
footer.sections .submit-wrapper {
    padding-bottom: 0px !important;
}
 

Screen Shot 2022-03-24 at 9.33.34 AM.png

You want change checkout button to white background + black outline?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.