Title: Styling Widget
Last modified: August 22, 2016

---

# Styling Widget

 *  Resolved [paulminors](https://wordpress.org/support/users/paulminors/)
 * (@paulminors)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/styling-widget-1/)
 * How do you style the widget i.e. change the fields, field labels and subscribe
   button?
 * [https://wordpress.org/plugins/mailchimp/](https://wordpress.org/plugins/mailchimp/)

Viewing 9 replies - 1 through 9 (of 9 total)

 *  [mc_elliot](https://wordpress.org/support/users/mc_elliot/)
 * (@mc_elliot)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/styling-widget-1/#post-5201442)
 * 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/gOHW](http://eepurl.com/gOHW)
   [http://eepurl.com/gOHW](http://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
 *  [Steven Christenson](https://wordpress.org/support/users/stevenstarcircleacademycom/)
 * (@stevenstarcircleacademycom)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/styling-widget-1/#post-5201537)
 * 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;
       }
       ```
   
 *  Thread Starter [paulminors](https://wordpress.org/support/users/paulminors/)
 * (@paulminors)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/styling-widget-1/#post-5201542)
 * Thanks for the advice guys 😀 I’ll give this all a go.
 *  Thread Starter [paulminors](https://wordpress.org/support/users/paulminors/)
 * (@paulminors)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/styling-widget-1/#post-5201544)
 * 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?
 *  [mc_elliot](https://wordpress.org/support/users/mc_elliot/)
 * (@mc_elliot)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/styling-widget-1/#post-5201566)
 * 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
 *  Thread Starter [paulminors](https://wordpress.org/support/users/paulminors/)
 * (@paulminors)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/styling-widget-1/#post-5201570)
 * I’d like to style the widget on y blog ([http://paulminors.com/blog/](http://paulminors.com/blog/))
   to look the same as my form on this page ([http://paulminors.com/pauls-newsletter/](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.
 *  [mc_elliot](https://wordpress.org/support/users/mc_elliot/)
 * (@mc_elliot)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/styling-widget-1/#post-5201577)
 * 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](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
 *  Thread Starter [paulminors](https://wordpress.org/support/users/paulminors/)
 * (@paulminors)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/styling-widget-1/#post-5201582)
 * Thanks mc_eliot. This is looking much better. Thanks for your help.
 *  Thread Starter [paulminors](https://wordpress.org/support/users/paulminors/)
 * (@paulminors)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/styling-widget-1/#post-5201583)
 * Resolved

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Styling Widget’ is closed to new replies.

 * ![](https://ps.w.org/mailchimp/assets/icon.svg?rev=3156997)
 * [Mailchimp List Subscribe Form](https://wordpress.org/plugins/mailchimp/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/mailchimp/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/mailchimp/)
 * [Active Topics](https://wordpress.org/support/plugin/mailchimp/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/mailchimp/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/mailchimp/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [styling](https://wordpress.org/support/topic-tag/styling/)

 * 9 replies
 * 3 participants
 * Last reply from: [paulminors](https://wordpress.org/support/users/paulminors/)
 * Last activity: [11 years, 9 months ago](https://wordpress.org/support/topic/styling-widget-1/#post-5201583)
 * Status: resolved