MailChimp Button Color

[Tim]

Is there a way that I can modify the button color of a MailChimp form through the CSS instruction (Custom CSS field)?

Currently it appears washed out and I’d like to assign a color that is consistent with the rest of the site.

http://www.simpson-direct.com/NEWDSGN102015TP/blog/

Thanks!

Topic

[Jason Bobich]

Hello,

Sure you can, why not? For CSS changes, it’s a good idea to use a tool like Google Chrome’s built-in developer tools (my personal favorite) to locate them and then put the edits either in your child theme‘s style.css or in the “Custom CSS” option on your theme options page.

Now, when you inspect the mailchimp button with your browser’s inspector, what do you see it being styled with that you could possibly override from your theme options custom CSS option? Right-click > Inspect Element on the button, and now with the button selected in the left side of the inspector, what do you see in the right column of your inspector styling it, that you could possibly use for a CSS selector?

http://www.w3schools.com/css/css_syntax.asp

[Tim]

I added the following to the Custom CSS field under the Theme Options>Styles:

#mc-embedded-subscribe {
background: #193985;!important;
}

#mc-embedded-subscribe:hover {
background: #444444;!important;
}

I did start to see a change to the look of the button, but not the right colors.

What am I missing that I should do differently.

I’m not strong in CSS at all so I’m kind of feeling my way through this.

Thanks for your help.

You can view at: http://www.simpson-direct.com/NEWDSGN102015TP/blog/

Thank you.

[Jason Bobich]

No worries, stumbling through it is how you learn. In both of your property/value pairs, you’ve got an extra semicolon.

For example, this:

background: #193985;!important;

Should be:

background: #193985 !important;

[Tim]

PERFECT!

Thanks for your help! That solved it.

[Author]

Replies