html - 如何替换 mailchimp CSS 嵌入代码中的按钮样式？

Question

我不知道如何在 Mailchimp 的嵌入 CSS 中更改按钮样式或位置，如下所示：

<!-- 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; }
/* 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="https://7grainarmy.us2.list-manage.com/subscribe/post? 
u=e6f00f0dccb61295ecf1b51c4&amp;id=ebaa28ce5c" method="post" id="mc-embedded-subscribe-form" 
name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<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 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_e6f00f0dccb61295ecf1b51c4_ebaa28ce5c" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded- 
subscribe" class="button"></div>
</div>
</form>
</div>

-- 首先，我想将按钮移动到中心，并且我想用可点击的图像替换按钮，因为我有一个我想使用的风格化按钮。我怎样才能做到这一点？我在 Wordpress 上使用 Slider Revolution 插件，这是我正在开发的网站：http: //laurenb9.sg-host.com/

谢谢！

标签： htmlcsswordpressembedmailchimp

Answer 1

下面添加自定义 css 以使按钮居中，并在何处添加 bg 样式的注释：

<!-- 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; }
   /* 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. 
   */
   #mc_embed_signup .button {
     /* center button */
     margin: auto;
     display: block;
     
     /* add your other bg override styles here */
   }
</style>
<div id="mc_embed_signup">
   <form action="https://7grainarmy.us2.list-manage.com/subscribe/post? 
      u=e6f00f0dccb61295ecf1b51c4&amp;id=ebaa28ce5c" method="post" id="mc-embedded-subscribe-form" 
      name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
      <div id="mc_embed_signup_scroll">
         <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 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_e6f00f0dccb61295ecf1b51c4_ebaa28ce5c" tabindex="-1" value=""></div>
         <div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded- 
            subscribe" class="button"></div>
      </div>
   </form>
</div>