更改MailChimp的成功/错误消息颜色

Question

我正尝试在我的网站www.justnk.com上更改mailchimp订阅表格（右侧栏）的成功/错误消息

我无法弄清楚是什么导致我的CSS代码无法正常工作/ html中的哪些内容可能触发了一些我不知道的自动拉入操作。

我已经尝试根据此处显示的各种答案来解决问题，但是大多数答案都涉及更改文本本身而不是颜色。Wordpress.org也提供了本教程（https://wordpress.org/support/topic/change-colour-of-success-message-text/），但我无法理解工作。

我正在使用的CSS

/ 响应表单提交 /

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

Mailchimp表单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>

由于背景是明亮的粉红色，所以我希望成功/错误消息分别为绿色和灰色，所以我希望它为白色。

Answer 1

让我们分解事物，对您来说将更容易。

• 如果仅需要更改字体颜色，则需要定位消息区域。消息区域使用类#mc_embed_signup（注意这是该整个字段的ID）和＃mce-success-response（这意味着在注册的该字段中，您只想将成功消息作为目标）。在这种情况下，请将此CSS代码输入到Wordpress Customizer的“其他CSS”部分：

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

  您将看到，成功消息字体将为白色。您可以将其更改为任何其他颜色，也可以使用十六进制颜色代码（使用此page可以自己完成）。如果还需要更改错误消息，请使用#mce-success-response代替#mce-error-response。在CSS“ color”属性上检查此页面。

• 如果要向该字段添加背景，请使用与上面相同的代码，但是要使用color:而不是background-color:-与上述相同。使用十六进制颜色代码并指定所需的背景颜色。

• 但是，如果添加此代码，则可能会看到该字段中没有呼吸空间：

  

这是因为该字段没有为背景色做准备，因此您必须定位该字段的类（即div.response）并更改其填充。因此，您可以使用以下代码：

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

所以，如果我们总结一下。如果要更改字体的颜色并更改其背景颜色，请使用以下代码：

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

这表示成功消息字段将具有白色字体颜色和蓝色背景颜色。对于错误消息，您需要使用#mce-error-response标记（#mc_embed_signup #mce-error-response）。如果要在其中添加一些填充，请使用我编写的上述代码并将其更改为所需的名称（可以使用0.5em或1.2em等）。

有关此内容的更多信息，请阅读此处的一些文章-this one涉及填充属性，this涉及“ em”单位，并且上面有一些有关十六进制代码和文本颜色的文章。

Answer 2

行得通！只需将其添加到Mailchimp html代码本身中，样式为：

<style type="text/css">

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

</style>