Hey paulminors!
Thanks for swinging by the forum. I totally understand the need to modify the plugin, and we’ll be happy to help.
There will actually be a few different options for altering the look of our plugin. For more basic changes, open up your WP Dashboard, click the Settings tab, and select MailChimp Setup. From there, you’ll see a “Custom Styling” section, which can be used for applying some broader styling changes to the plugin.
For more precise changes, we’ll actually want to go ahead and modify the CSS used by our plugin. That same “MailChimp Setup” page will have a list of the available classes we’d be able to modify to alter the look of the plugin. We’ll want to go ahead and apply those changes to your theme’s style.css file. Firebug and Chrome’s Developer Tools can help with previewing the way those changes will look without actually having them applied to the plugin.
As for those field labels, they’ll actually be pulled directly from your MailChimp list. The guide below may help with getting those fields changed in your account:
Manage List and Signup Form Fields: http://eepurl.com/gOHWhttp://eepurl.com/gOHW
Once you change a field in MailChimp, open up your WP dashboard and navigate back to that same MailChimp Setup page, and click the “Update Subscribe Form Settings” button to have the new fields included in the plugin. From there, you can use the “Merge Variables Included” portion to select which fields to include.
Let us know if there are any questions! We’re always happy to help out 🙂
-mc_elliot
One of the most obnoxious things the plugin does is add a header. I got rid of the header like this. Go to your style page
http://MYSITE/wp-admin/themes.php?page=editcss
Add this:
/* Effectively removes the unremovable banner */
div.mc_custom_border_hdr {
color: black;
background-color: black;
font-size: 1px;
height: 3px;
}
It doesn’t actually remove the header, but it effectively turns it into a black horizontal line.
You might also want the error message to stand out a little better like so:
div#mc_message {
background-color: pink;
border: black;
width: 100%;
border-width: 8px;
border-color: black;
}
span.mc_error_msg {
margin-top: 1em;
position: relative;
top: 50%;
transform: translateY(-50%);
color: red;
margin-bottom: 1em;
}
Thanks for the advice guys 😀 I’ll give this all a go.
I’ve just tried this, but the styling isn’t getting applied. Not sure why. I have added the CSS to the edit CSS area in theme options. Any reason why this wouldn’t work?
Hey Paul!
Thanks for dropping back by the forum. Can you let us know a bit more about what you’d be looking to change?
For example, if you’re looking to remove your form’s header, it may be easiest to simply remove it from within the setup for the plugin. To do that, open your site’s dashboard, click Settings, and select MailChimp Setup. From there, locate the Content Options heading, and it will be possible to remove both the header and subheader, entirely.
Feel free to also provide us with your site’s URL, and we’ll be happy to come up with some recommendations on how to apply the desired changes in a way that should work for your install.
-mc_elliot
I’d like to style the widget on y blog (http://paulminors.com/blog/) to look the same as my form on this page (http://paulminors.com/pauls-newsletter/). i.e. I’d like to change the form fields and the subscribe button.
I tried entering the same CSS into the editor, but the default form styling isn’t being overridden. By the way, I have untucked the “Custom Styling” option in the MailChimp settings.
Hey Paul!
Thanks for getting back to me with that info.
I went ahead and compared the plugin with that hosted form, and I believe I was able to come up with something that worked. We’ll want to be adding this code to your theme’s style.css file:
.mc_input {border-radius:10px;}
#mc_signup_submit {color:white;
background-color:#8cccf6;
border-radius:10px;
float:left;
max-width:40%}
#mc-indicates-required {display:none;}
And here’s a screenshot of the result: http://screencast.com/t/Cfar8gHAe
Please feel free to let us know if there are any questions. We’re always here to help!
-mc_elliot
Thanks mc_eliot. This is looking much better. Thanks for your help.
