Change MailChimp's success/error message color

Question

I'm trying to change the success/error message of the mailchimp subscription form (right side-bar) on my website www.justnk.com

I can't figure out what's stopping my css code from working/ what in the html might be triggering some automatic pull in that I am unaware of.

I've tried rooting around the various answers shown here but most of them deal with changing the text itself not the color.Wordpress.org also had this tutorial (https://wordpress.org/support/topic/change-colour-of-success-message-text/) but I couldn't get it to work.

CSS I'm using

/Response to form submission/

#mc_embed_signup #mce-responses #mce-error-response #mce-success-response.response {color: #ffffff !important; display: none !important;

Mailchimp form html

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css"><style type="text/css"> #mc_embed_signup { clear:left; font:14px Helvetica,Arial,sans-serif; }</style>
<div id="mc_embed_signup">
<form action="https://justnk.us20.list-manage.com/subscribe/post?u=065434ce0102b8abd6dc55f58&amp;id=2b797af7d4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h6>JOIN THE NEWSLETTER</h6>
        <p align="center">
            My newsletter on the latest from the blog. Don't worry we won't spamming.
        </p>
<div class="indicates_required"> *indicates required </div>
<div class="mc-field-group">
<input type="text" value="*First Name" name="FNAME" class="required" id="mce-FNAME" placeholder=""  onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">

<input type="email" value="*Email Address" name="EMAIL" class="required email" id="mce-EMAIL" placeholder=""  onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">

</div>
<div id="mce-responses" class="clear" color="white">
    <div class="response" id="mce-error-response" style="display:none"> 
</div>
    <div class="response" id="mce-success-response" style="display:none">      
</div>
</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_065434ce0102b8abd6dc55f58_2b797af7d4" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script> 
<script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script>

Since the background is bright pink I'd rather the success/error messages be green and grey respectively so I'd like it to be white.

Answer 1

Let's break down things, so it will be easier for you.

• If you only need to change the font color, you need to target the message area. The message area uses classes #mc_embed_signup (which notes that this is the id of that whole field) and #mce-success-response (which means in that field of the signup you want to target only the success message). In this case, enter this CSS code into the "Additional CSS" part of Wordpress Customizer:

  #mc_embed_signup #mce-success-response {
  color: white;
  }
  

  As you will see, the success message font will be white. You can change it to any other color and also use HEX color codes (help yourself with this page). If you also need to change the error message, then instead of #mce-success-response use #mce-error-response. Check this page on CSS "color" property.

• If you want to add a background to this field, you use the same code as above, but instead of color: you use background-color: - the same applies as above. Use a HEX color code and specify what color of background do you want.

• But if you add this code, you may see that there will be no breathing space in the field:

  

This is because the field isn't prepared for the background color, so you have to target the class of that field (which is div.response) and change the padding of it. So you can use this code:

#mc_embed_signup div.response {
padding: 1em 1em 1em 1em;
}

So if we sum it up. If you want to change the color of the font and change the background color of it, you use this code:

#mc_embed_signup #mce-success-response {
color: white;
background-color: blue;
}

This says that the success message field will have a white font color and have a blue background color. For the error message, you need to use #mce-error-response tag (#mc_embed_signup #mce-error-response). If you want to add some padding to it, use the above code I wrote and change it to your desire (you can use 0.5em or 1.2em etc).

For more about this, read some articles here - this one is about padding property, this is about "em" unit and you have some articles above for HEX codes and text colors.

Answer 2

That worked! Just need to add this to Mailchimp html code itself, under the style:

<style type="text/css">

    #mc_embed_signup #mce-success-response {
    color: white;
    font-weight: 700;
    text-transform: uppercase;
}

</style>