更改 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;
  }
  

  如您所见，成功消息字体为白色。您可以将其更改为任何其他颜色，也可以使用 HEX 颜色代码（帮助自己解决这个问题page）。如果您还需要更改错误消息，请使用 #mce-error-response 代替 #mce-success-response。在 CSS "color" 属性上检查此页面。

• 如果您想为该字段添加背景，请使用与上述相同的代码，但使用 color: 而不是 background-color: - 与上述相同。使用 HEX 颜色代码并指定您想要的背景颜色。

• 但是如果你添加这段代码，你可能会看到字段中没有喘息的空间：

这是因为该字段没有为背景颜色准备好，因此您必须定位该字段的类（即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”单位，您在上面有一些关于 HEX 代码和文本颜色的文章。

Answer 2

成功了！只需将其添加到 Mailchimp html 代码本身，样式如下：

<style type="text/css">

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

</style>