覆蓋MailChimp樣式與第二樣式

目標：改變背景顏色「訂閱」按鈕MailChimp嵌入式註冊表單公司網站頁面上覆蓋MailChimp樣式與第二樣式

問題：MailChimp給人的CSS鉤子「input.button」樣式的訂閱按鈕。我如何使用這個CSS覆蓋已經存在的樣式？

頁我想編輯：http://www.sieralearn.com/subscribe/

這裏的按鈕是如何寫在頁面的HTML：

<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

據我所知，我沒有訪問MailChimp使用的樣式表來生成嵌入代碼（http://cdn-images.mailchimp.com/embedcode/classic-081711.css）。以下是MailChimp樣式表中樣式的顯示方式：

#mc_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; font-weight: bold; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding: 0 22px; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}

感謝您的任何和所有幫助。

來源

2014-06-11 Bronwen

我在一年前在我的blog上實現了這個功能，並且我打算編寫一個教程，但是我認爲這個答案將會幫助人們。我創建了一個fiddle，其中包含用於選擇加入Mailchimp表單的樣式所需的HTML和CSS。

input.button可以完全按照您的意願設置樣式，下面是改變整個按鈕的代碼片段，但您可以只更改背景顏色。如果你想看看一個詳細的表單樣式，請參閱附帶的小提琴，因爲它有更多的細節。

input.button { 
    -moz-box-shadow:inset 0 1px 0 0 #bbdaf7; 
    -webkit-box-shadow:inset 0 1px 0 0 #bbdaf7; 
    box-shadow:inset 0 1px 0 0 #bbdaf7; 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5)); 
    background:-moz-linear-gradient(center top, #79bbff 5%, #378de5 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5'); 
    background-color:#79bbff; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    border-radius:6px; 
    border:1px solid #84bbf3; 
    display:inline-block; 
    color:#fff; 
    font-family:arial; 
    font-size:16px; 
    font-weight:700; 
    padding:7px 32px; 
    text-decoration:none; 
    text-shadow:1px 1px 0 #528ecc; 
}

不妨用這段CSS改變:hover。

input[class=button]:hover { 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff)); 
    background:-moz-linear-gradient(center top, #378de5 5%, #79bbff 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff'); 
    background-color:#378de5 
}

HTML標記。

<div class="bu1"> 
    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"> 
</div>

最終結果。

enter image description here

另一種選擇（未測試）是這樣做在您的自定義樣式表或其它地方：

#mc_embed_signup .button { background-color:lightcoral; }

的影響，如使用Chrome開發者工具測試，如下圖所示。

enter image description here

來源

2014-06-11 21:05:56

哇，這太棒了。我複製了按鈕的CSS代碼並將其粘貼到我的樣式表中。更新頁面上的HTML以匹配提供的代碼。我仍然看到默認的灰色訂閱按鈕。顯然，我做錯了什麼。任何想法可能是什麼？謝謝！ – Bronwen

按鈕的顏色已經改變了。它顯示藍色。嘗試清除緩存或切換瀏覽器一段時間。不要相信我，看看這個。 http://i.imgur.com/WWgA563.png。因此，這一變化的確如我們預期的那樣運作。 –

切換瀏覽器並清除緩存都有幫助。我現在可以看到你的按鈕格式。但是，當我更改爲input.button選擇器提供的CSS代碼的背景顏色時，它將恢復爲原始灰色。我假設它正在被'#mc_embed_signup .button'選擇器覆蓋。我不想要一個漸變;只是一個平坦的背景顏色。感謝您的專業知識！ – Bronwen

對不起，我太新，不能簡單地評論，但不能簡單地將他們的樣式表（http://cdn-images.mailchimp.com/embedcode/classic-081711.css）的內容複製到您自己的新樣式表中，並引用您的新樣式表（替換舊樣式表）在您的訂閱頁面上？然後，您可以更改您希望的任何設計元素，而不會污染您喜歡的設計元素。

來源

2014-06-11 20:33:08 Bret

是的！至少對我來說，這是有道理的，這應該起作用。我將MailChimp樣式表複製到我的網站樣式表中。 – Bronwen

這應該工作，但我仍然有麻煩。步驟：1）將MailChimp樣式表複製到我的樣式表中，2）替換.button背景顏色，3）添加'！important'。還是行不通。我的樣式表中的代碼：'#mc_embed_signup .button {clear：both; background-color：＃3C638！重要;邊框：0無;邊界半徑：4PX;顏色：#FFFFFF;光標：指針;顯示：inline-block;字體大小：15像素; font-weight：bold; height：32px; line-height：32px; margin：0 5px 10px 0; padding：0 22px; text-align：center;文字修飾：無; vertical-align：top;白色空間：nowrap; width：auto;}' – Bronwen

你的樣式表如何放置在標題中？ –

覆蓋MailChimp樣式與第二樣式

回答

相關問題