【问题标题】:How do I change the Mailchimp subscribe button color using inline CSS?如何使用内联 CSS 更改 Mailchimp 订阅按钮颜色?
【发布时间】:2016-09-18 20:19:38
【问题描述】:

如何使用内联 css 在我的网站 Homeschool With Love 上更改嵌入式 Mailchimp 表单中的按钮和悬停颜色?我希望背景颜色为#0A99AA,悬停颜色为#d40000。这是一个 Wordpress.org 网站。你能告诉我应该插入什么代码以及应该在哪里插入吗?谢谢。这是我现在拥有的代码:

<div style="border-style: solid; border-width: 2px; border-color: #0A99AA;">
<!-- 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{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//homeschoolwithlove.us13.list-manage.com/subscribe/post?u=74d56fdb848e8be499cc4df0e&amp;id=a119f30caa" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div style="text-align: center; color: #d40000; font-size: 120%; padding-right: 10px; padding-left: 10 px;">    
<h3>Sign up for the Homeschool With Love Newsletter and get the Angel Learning Resource Pack FREE</h3>
</div>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name  <span class="asterisk">*</span>
</label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div id="mce-responses" class="clear">
    <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_74d56fdb848e8be499cc4df0e_a119f30caa" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>

<!--End mc_embed_signup-->
</div>

【问题讨论】:

  • 你有没有尝试过?它只是 HTML/CSS。

标签: css mailchimp


【解决方案1】:

#mc_embed_signup 行之后立即添加这两行:

#mc-embedded-subscribe { background-color: #0a99a !important; }
#mc-embedded-subscribe:hover { background-color: #d40000 !important; }

【讨论】:

  • 谢谢!我必须在第一个颜色十六进制中添加一个额外的“a”,但否则效果很好!非常感谢!
猜你喜欢
  • 1970-01-01
  • 2012-03-13
  • 1970-01-01
  • 2019-03-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-12-23
  • 1970-01-01
相关资源
最近更新 更多