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

Posted 2023-03-24

【中文标题】如何替换 mailchimp CSS 嵌入代码中的按钮样式？

【英文标题】：How do I replace the button style in mailchimp CSS embed code?

【发布时间】：2021-02-14 12:23:47

【问题描述】：

我不知道如何在 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_signupbackground:#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/

谢谢！

【问题讨论】：

迄今为止尝试设置按钮样式的方法（在带有类按钮的 div 中似乎），例如您是否尝试设置其背景图像？

【参考方案1】：

下面添加了自定义 css 以使按钮居中，并在哪里添加 bg 样式的 cmets：

<!-- 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_signupbackground:#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>

【讨论】：

谢谢！但是，这不适用于使按钮居中，您知道可能出了什么问题吗？或者有其他方法可以尝试吗？

页面上一定有其他样式冲突。当我“运行代码 sn-p”时，按钮在我这里居中。