Remove default style from Shortcode form

Hey cichy380!

Thanks for swinging by the forum. I totally understand the need to continue utilizing your site’s default CSS, and I’m happy to explain how to go about accomplishing that.

The first step you’ll want to be sure to take is disabling “Custom Styling” for the plugin, which will then cause the plugin to rely on your site’s CSS. To do that, open the Admin area of your site, and click Settings> MailChimp Setup. From there, scroll down to Custom Styling, and make sure that the Enabled box is unchecked.

That same page in your Admin panel will also include a CSS Cheat Sheet, which includes all the classes you can target with custom CSS. That should help with making any additional changes.

Let us know if there are any questions!

-Elliot

I installed the plugin on my site and on one of the pages I put a shotcode [mailchimpsf_form].
Enabled is unchecked but in the site’s code I see

<style>
    .widget_mailchimpsf_widget .widget-title {
        line-height: 1.4em;
        margin-bottom: 0.75em;
    }
    #mc_subheader {
        line-height: 1.25em;
        margin-bottom: 18px;
    }
    .mc_merge_var {
        margin-bottom: 1.0em;
    }
    .mc_var_label,
    .mc_interest_label {
        display: block;
        margin-bottom: 0.5em;
    }
    .mc_input {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
    }
    .mc_input.mc_phone {
        width: auto;
    }
    select.mc_select {
        margin-top: 0.5em;
        width: 100%;
    }
    .mc_address_label {
        margin-top: 1.0em;
        margin-bottom: 0.5em;
        display: block;
    }
    .mc_address_label ~ select {
        width: 100%;
    }
    .mc_list li {
        list-style: none;
        background: none !important;
    }
    .mc_interests_header {
        margin-top: 1.0em;
        margin-bottom: 0.5em;
    }
    .mc_interest label,
    .mc_interest input {
        margin-bottom: 0.4em;
    }
    #mc_signup_submit {
        margin-top: 1.5em;
        width: 80%;
    }
    #mc_unsub_link a {
        font-size: 0.75em;
    }
    #mc_unsub_link {
        margin-top: 1.0em;
    }
    .mc_header_address,
    .mc_email_format {
        display: block;
        font-weight: bold;
        margin-top: 1.0em;
        margin-bottom: 0.5em;
    }
    .mc_email_options {
        margin-top: 0.5em;
    }
    .mc_email_type {
        padding-left: 4px;
    }
</style>

So the form is generated together with code style. I want to remove all this <style> tag and get rid of that to style the form on my own.

By the way,
can I change the HTML code of the form?

Hey cichy380,

Thanks for writing in with that update. Because those styles are placed in the page when the plugin is installed, they’ll need to be removed from the mailchimp_widget.php file.

To remove that code, head to Plugins>Editor in the Admin Panel, and then select the MailChimp plugin. There, click on the link to the right to edit the ‘mailchimp/mailchimp_widget.php’ file. Here, you can remove the styles between those <style> tags. It’ll look just like it does in the page where the shortcode is used.

It’s important to note any changes to that code can be overwritten if there’s an update to the plugin. If that happens, that file will need to be edited again.

Please feel free to let us know if you have any other questions!

-Gunter