[Plugin: MailChimp List Subscribe Form] CSS problem

  • I have added the MailChimp widget to my WordPress sidebar, and
    there’s one element of it that doesn’t fit my theme. I’ve tried
    everything I can think of, but I can’t fix this, and would
    appreciate any help.

    ALMOST everything about the widget matches my theme perfectly: the
    title (Sign up for our Newsletter), the tagline (Members will
    receive the newsletter automatically), the input field, and the
    subscribe button, all line up perfectly… EXCEPT the words “Email
    Address” immediately above the input field. These are ranged 10px
    further left than everything else, right up against the edge of the
    box. You can see the site here:
    https://scandi-analysts.com

    The CSS that is currently applied has the value of a 10px margin,
    and this seems to be applying to everything except the words ’email
    address’. Obviously, I want these to line up with the others, as it
    looks ugly and glaringly obvious to have it sticking out.

    Any suggestions as to what I can do will be very gratefully received!

    Many thanks.

Viewing 9 replies - 1 through 9 (of 9 total)

  • Hi Aga1

    Using Firebug (Firefox plugin) it appears that there is a definition for

    #mc_signup_form .mc_var_label {
    }

    But it is empty.

    Maybe you can use this to style that element.

    Regards,
    Claude Needham

    Thread Starter aga1

    (@aga1)

    Hi Claude,

    Thanks for that, but I can’t find that definition in any of the css that came with the plugin… can you tell me in which file you found it please?

    I found the existence of the “#mc_signup_form .mc_var_label” in FireBug.

    However, finding where this definition resides is a bit tricky. Eventually found the definition in the file mailchimp.php

    This is only used if Custom Styles are turned on.

    However, it is very bad form to hack plugins or wp core files. Reason being your changes will be lost when a new version of the plugin is added. And, if you don’t do it right you could mess up the plugin.

    So one option you can explore is adding the definition to your theme’s style.css file.

    #mc_signup_form .mc_var_label {
    margin-left: 10px; /* or whatever definitions you use */
    }

    Be aware that styling loaded from the MailChimp plugin itself is loaded after style.css. This means any conflicts in css definitions will be settled in favor of the MailChimp plugin.

    Hope this helps,
    Claude

    Thread Starter aga1

    (@aga1)

    OK, I’ll try that, many thanks.

    But gotta say I’m disappointed in MailChimp for what seems to be an oversight regarding the styling: surely most people would want the plugin to conform with, rather than clash with or override, their theme?

    Thread Starter aga1

    (@aga1)

    Hey, just implemented your suggestion, and it worked perfectly!

    Many thanks indeed:)

    You should really try putting that in your main site’s css as that file will be overwritten if you upgrade the plugin.

    Even though I agree with you that the css styling could be more clear, I would not be hard on MailChimp.

    After poking around in the guts of wordpress for a very short time two things have become clear to me: 1) it is a wiggly can of worms in there, 2) everything is a work in process.

    Someone writes the code.
    A problem is found.
    Someone gets around to fixing the problem (usually on a priority basis)
    Then another problem or quest for new feature comes up and the process continues.

    For me, I’m happy if I can get by from day to day. Which reminds me.

    Do put in your website journal a note to the effect that you made this change in your style.css file. Also insert a copy of the modification. If you change theme or upgrade theme at some point you will want to review all non-standard changes so that you can reproduce them in the new theme.

    Regards,
    Claude
    p.s. Congrats on getting it working.

    Thread Starter aga1

    (@aga1)

    Well yes, perhaps I was being a bit harsh:) My remark was based solely on your comment that the MC styling would override the theme styling. The functionality of MC doesn’t seem to have any faults at all, and that IS what it’s for, after all. Perhaps there is a way of MC correcting the styling issue…

    Yes, mc_jesse, that’s actually where I put it.

    And your suggestion, Claude, of keeping a note of changes is an excellent one. Once again, many thanks.

    The !important property allows you to overwrite any of the plugin’s defaults, via style.css. I have found this very helpful.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘[Plugin: MailChimp List Subscribe Form] CSS problem’ is closed to new replies.