CODEWITHSUNDEEP
cssmailchimp
Kirsten
Kirsten

Reputation: 31

Unable to overwrite mail chimp error response styles

I've an embedded MailChimp sign-up form, where I'm using their js, but not their css, I'm unable to change the #mce-error-response styles, which are super ugly once you don't use their style sheet. I can't find any styles in their style sheet for this either. It seems to get the #mc-inline-error styles, which are programmatically set in the mail chimp js file during validation.

I tried the following, but it does nothing.

#mce-error-response {
  background-color: blue !important;
  color: red !important;
  /* more styles to come */
}

For this:

<div id="mce-responses">
 <div class="small text-danger" id="mce-error-response" style="display: none"</div>
  <div class="small text-success" id="mce-success-response" style="display: none">     </div>
</div>

Also tried setting the styles of mce-inline-error, which I don't have in my html file, but tried it anyway.

This is the section of the mail chimp code where I see this:

(function($) {
    var err_style = '';
    try {
        err_style = mc_custom_error_style;
    } catch (e) {
        err_style = '#mc_embed_signup input.mce_inline_error { border-color:#6B0505; } #mc_embed_signup div.mce_inline_error { margin: 0 0 1em 0; padding: 5px 10px; background-color:#6B0505; font-weight: bold; z-index: 1; color:#fff; }';
    }
    var head = document.getElementsByTagName('head')[0];
    var style = document.createElement('style');
    style.type = 'text/css';
    if (style.styleSheet) {
        style.styleSheet.cssText = err_style;
    } else {
        style.appendChild(document.createTextNode(err_style));
    }
    head.appendChild(style);

The success response I can overwrite by the way.

Any hope to override the error response styles, or am I stuck with it if I want the convenience of the embed code...

Upvotes: 0

Views: 19

Answers (0)

Related Questions