Changing Newsletter Button in Footer to a Line 7.1

Site URL: https://dekanstudios.com/

Hi there, can I please have help with custom css to change the 'newsletter button' in my footer to an underline in my footer?  I would also like 

Thanks in advance.

Add to Design > Custom CSS

/* Footer Join button */
footer.sections .sqs-block-newsletter .newsletter-form-button {
    background-color: transparent !important;
    border-bottom: 1px solid;
}

@tuanphan - you're amazing! Thank you!

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

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

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?

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

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

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

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