Rounded borders for newsletter form

[Daniel19901]

Hi, I would like my newsletter form in the footer as well as its button to be rounded 30px, can anyone help ?
(No settings for this)
https://c50810-c5.myshopify.com/

[Dan-From-Ryviu · Accepted solution]

Hi @Daniel19901 

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings 

.t4s-newsletter-design-1 .t4s-newsletter__inner .t4s-newsletter__email {
border-radius: 30px 0 0 30px;
}
.t4s-newsletter__inner .t4s-newsletter__submit {
border-radius: 0 30px 30px 0
}

[Rahul_dhiman · Accepted solution]

Hello @Daniel19901 
Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

.t4s_frm_input:focus, input:not([type=submit]):not([type=checkbox]):focus, select:focus, textarea:focus {
border-radius: 30px !important;
}
button.t4s-w-100.t4s-newsletter__submit.t4s-truncate.t4s-btn-loading__svg {
border-radius: 30px !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[PageFly-Richard · Accepted solution]

Hi @Daniel19901 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.t4s-col.t4s-col-item.is--col-email input {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}
button.t4s-w-100.t4s-newsletter__submit.t4s-truncate.t4s-btn-loading__svg {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly 

[Dan-From-Ryviu · Accepted solution]

Hi @Daniel19901 

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings 

.t4s-newsletter-design-1 .t4s-newsletter__inner .t4s-newsletter__email {
border-radius: 30px 0 0 30px;
}
.t4s-newsletter__inner .t4s-newsletter__submit {
border-radius: 0 30px 30px 0
}

[Rahul_dhiman · Accepted solution]

Hello @Daniel19901 
Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

.t4s_frm_input:focus, input:not([type=submit]):not([type=checkbox]):focus, select:focus, textarea:focus {
border-radius: 30px !important;
}
button.t4s-w-100.t4s-newsletter__submit.t4s-truncate.t4s-btn-loading__svg {
border-radius: 30px !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[PageFly-Richard · Accepted solution]

Hi @Daniel19901 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.t4s-col.t4s-col-item.is--col-email input {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}
button.t4s-w-100.t4s-newsletter__submit.t4s-truncate.t4s-btn-loading__svg {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly 

[Tech_Coding · Accepted solution]

Hello @Daniel19901 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
   .t4s-newsletter-design-1 .t4s-newsletter__inner .t4s-newsletter__email {
       border-radius: 30px 0 0 30px;
    }
    .t4s-newsletter__inner .t4s-newsletter__submit {
        border-radius: 0 30px 30px 0
     }
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Rahul_dhiman]

Thanks for accepting the solution.
Please hit the like button also.