Return to previous page

Newsletter subscription / sign u styling

This topic has 8 replies, 3 voices, and was last updated 1 years, 9 months ago ago by Rose Tyler

Kando

Participant

February 24, 2023 at 14:08

Dear Support team,

I would want to use the WordPress Newsletter pluging. I have installed that plugin and used the short code below to use same style for the subscribe field and button ( I would want them to flow into each other) in my footer, however, I am I getting a slightly different layout compared to the one of Mailchimp. When you check my website, you can see the first newsletter subscription being the Mailchimp version (which I would want) and the send is the one with Newsletter plugin.

Your support is appreciate it

I have tried bot below options and both give same result:
1.

[newsletter_form type=”minimal” ]

2. [newsletter_form type=”minimal” class=”et-mailchimp dark classic-button”]

Please, contact administrator
for this information.

#347903 Copied Theme version: 5.0.4 WooCommerce version: 7.4.0

7 Answers
Tony Rodriguez

Support staff

February 24, 2023 at 16:57
Hello M. Alaei,

Please copy and paste the following CSS code into XStore >> Theme Options >> Theme Custom CSS >> Global CSS, then clear your browser cache to view the changes:
```
.tnp.tnp-subscription-minimal.et-mailchimp.dark.classic-button form input.tnp-email {
    border-radius: 100px !important;
    border-width: 0px !important;
    border-right: none !important;
    background-color: #fff !important;
    border-color: #e1e1e1 !important;
    color: var(--et_dark-color) !important;
    max-width: 100% !important;
    height: 40px !important;
    width: 70% !important;
    box-sizing: border-box !important;
    padding: 10px !important;
    display: inline-block !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

.tnp.tnp-subscription-minimal.et-mailchimp.dark.classic-button form input.tnp-submit {
    border-radius: 0px 90px 90px 0px !important;
    background: #F4F4F4 !important;
    font-family: 'Roboto' !important;
    text-transform: none !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border-left: none !important;
    color: var(--et_dark-color) !important;
    border-color: #e1e1e1 !important;
    border-style: solid !important;
    width: 29% !important;
    box-sizing: border-box !important;
    display: inline-block !important;
    padding: 10px !important;
    border: 1px !important;
    text-shadow: none !important;
}
```
We hope your issue will be resolved.

Best Regards,
8Theme’s Team
#347923 Copied
Kando

Participant

February 24, 2023 at 17:13

Hello,

Thanks a lot for your support. Have done that but the field and button are not yet the same as the Mailchimp version.
Is there anything else I have to do?

Thanks

#347927 Copied

Tony Rodriguez

Support staff

February 25, 2023 at 09:35

Hello Mr. Alaei,

We would like to inquire about the changes you are still facing. To better understand the issue, could you please provide us with screenshots? You may upload the screenshots to https://postimages.org/ and paste the links here.

We look forward to hearing from you.

Best Regards,
8Theme’s Team

#347966 Copied

Kando

Participant

February 25, 2023 at 11:08

Hello,

here you go: https://postimg.cc/TyL33k2F

#347975 Copied

Tony Rodriguez

Support staff

February 25, 2023 at 14:47

Hello,

I have set the style of the form as close to the desired outcome as possible. Please clear your browser cache and check back again.

Attached is a screenshot of the form: https://postimg.cc/t1BzGT15

Best Regards,
8Theme’s Team

#347988 Copied

Kando

Participant

February 27, 2023 at 11:57

Hello, thanks again.
Is there any possibility to show the borders of the field and the sign up button as rectangles, instead of round border / edges? That probably would fit better than how it is now.

Thanks a lot

#348174 Copied

Rose Tyler

Support staff

February 27, 2023 at 14:12

Hello, M. Alaei,

In this case, please edit Footer static block using Elementor > click on Shortcode element > Advanced > change border-radius https://prnt.sc/ohMx31ug7ZoC

Kind Regards,
8theme team

#348201 Copied
Tagged: newsletter, sign up, styling, subscription, templates, woocommerce, wordpress
Viewing 8 results - 1 through 8 (of 8 total)