Replace the default MailChimp stylesheet with a different stylesheet

Question

Replace the default MailChimp stylesheet with a different stylesheet

Objective: I want to modify the background color of the "Subscribe" button on a MailChimp embedded sign-up form found on our company's website page.

Query: MailChimp provides the CSS hook "input.button" for styling the Subscribe button. How can I utilize this CSS to overwrite the existing styles?

The specific page that needs editing is located here:

This is how the button is coded within the HTML of the page:

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

Unfortunately, I don't seem to have access to the stylesheet used by MailChimp to generate the embed code (). Here are the styles defined in the MailChimp stylesheet:

#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;}

I appreciate any assistance provided. Thank you!

html css mailchimp

Answer 1

Answer №1

Unfortunately, due to my lack of experience, I am unable to provide a simple comment at this time. However, have you considered the option of duplicating the content in their stylesheet () and creating a new stylesheet for your own use? By referencing your new stylesheet instead of the old one on your subscription page, you can customize any design elements without affecting those that you prefer.

Answer 2

Unfortunately, due to my lack of experience, I am unable to provide a simple comment at this time. However, have you considered the option of duplicating the content in their stylesheet () and creating a new stylesheet for your own use? By referencing your new stylesheet instead of the old one on your subscription page, you can customize any design elements without affecting those that you prefer.

Answer 3

Answer №2

I integrated this solution into my website a year ago with the intention of creating a tutorial, but I believe sharing it on SO will benefit more people. I have put together a demo showcasing the HTML and CSS code required to style the opt-in Mailchimp form.

The styling for the input.button can be customized extensively. Below is the snippet to modify the entire button appearance, although you may choose to alter just the background-color. For a comprehensive guide on form styling, please refer to the linked demo as it includes additional details.

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

You may consider updating the :hover state with the following CSS rules.

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
}

The HTML structure.

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

The expected output after applying these styles.

An alternative approach (not tested) would involve adding this in your custom stylesheet or appropriate location:

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

The result, validated using Chrome Developer Tools, is displayed below.

Answer 4

I integrated this solution into my website a year ago with the intention of creating a tutorial, but I believe sharing it on SO will benefit more people. I have put together a demo showcasing the HTML and CSS code required to style the opt-in Mailchimp form.

The styling for the input.button can be customized extensively. Below is the snippet to modify the entire button appearance, although you may choose to alter just the background-color. For a comprehensive guide on form styling, please refer to the linked demo as it includes additional details.

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

You may consider updating the :hover state with the following CSS rules.

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
}

The HTML structure.

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

The expected output after applying these styles.

An alternative approach (not tested) would involve adding this in your custom stylesheet or appropriate location:

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

The result, validated using Chrome Developer Tools, is displayed below.

Replace the default MailChimp stylesheet with a different stylesheet

Answer №1

Answer №2

Similar questions

Is it possible to include an onclick event in a hyperlink tag to initiate an ajax call

Text overflow occurs when content overflows the space of its container, causing the HTML element to

Concealing the sidebar navigation menu on the web application

Save information to a server-side .xml file with the use of either JavaScript or PHP

Looking for assistance with CSS border animation

Unable to query MySQL database for filtering by month using PHP

Revamp the Bootstrap Form Upload feature

Display a petite popup above the selected text within the Code Mirror editor

The CSS transition fails to function correctly once a specific function is executed

Directing BeautifulSoup to a specific <tr> class

Tips for removing a particular slide from bootstrap carousel with JQuery

Stop the window from scrolling up smoothly when opening a custom modal to avoid any flickering

Using jQuery to select and animate several elements simultaneously without repeating the animation

Media publications do not conform to the current trends

Moving object sideways in 100px intervals

"PHP: Are you sure you want to delete? Confirm your

Assigning a changing label to a radio button

Output each uploaded file using jQuery's console.log function

What could be causing my table to malfunction in IE8?

A guide to creating gradient borders using CSS