MailChimp Plugin – How to Widen Text Input Boxes?

Hey joatblog!

If you can edit the width of the input boxes by styling this CSS item:

#mc_signup_form .mc_input

You can change the width to a percentage or an absolute amount of pixels.

Let us know if we can further assist!

Cheers!

Hi mc_nate! Thanks so much for the reply!

Now I am running across another conundrum…where can I find that css file?
When I’m logged into WordPress, I click on “Editor” under “Appearance” on the left-hand side. Once there, if I scroll all the way to the bottom, I will see in the right-hand column a list of “Styles” (e.g. style.css, editor-style.css, etc.) I do not see the mailchimp css file though.

I must be looking in the wrong place. If you could direct me, I’d appreciate it! It seems that finding this stuff is more difficult than coding!

I have the same question as joatblog1….where do we find the CSS for the plugin?

My submit button is only showing the top half.

https://webzebedee.com

Hey again!

In order to find the specific CSS stylesheet, I usually bring up the developer tools and go to “Resources” -> “Stylesheets”. Here’s a screenshot:

https://screencast.com/t/meUiVzDGdxEL

From there, you can isolate exactly which element you want to style. Any changes to the CSS will need to be made in your theme, under “Appearance” -> “Editor” -> “Stylesheet (style.css)”.

Hopefully that’s a little more helpful! ??

Cheers!

I also want to widen the text boxes. I went to the editor (Appearance>Editor and didn’t find #mc_signup_form .mc_input there. I even copied and pasted everything into Notepad so I could do a search. Are Developer Tools a plug-in?

Depending on which browser you’re using, they might come “stock”. IE9 and Chrome both come with them, whereas Firebug is a plugin for Firefox that will allow you to do the same thing.

Can we start over again? The last advice was to install Developer Tools, but it isn’t supported by Firefox 6.

You said, “If you can edit the width of the input boxes by styling this CSS item:
#mc_signup_form .mc_input

You can change the width to a percentage or an absolute amount of pixels.”

Where is the CSS file or where can we access it? Several of us seem to have this problem.
Thanks,
Ellen

The Web Developer Toolbar add-on is supported by Firefox 6. You can examine all complete stylesheets using CSS->View CSS in that add-on. But for determining which piece of CSS is affecting what page element, Firebug is your best add-on.

Please just tell me which file to edit and where to find it. Once I’m there, #mc_signup_form .mc_input should be easy to find.

Ellen

We can’t as we have not seen your site. Such changes are often theme-specific.

I’m at changetheworldmarketing.com
I’m using the ZeeCorporate theme.

Hey Ellen!

In order to get the width of your text boxes to span the width of your defined MailChimp plugin area, you’ll want to edit your theme’s CSS file. Generally, that can be edited by going to “Appearance” -> “Editor” and then adding something like this style declaration in at the bottom:

#mc_signup_form .mc_input { width: 100% }

That will set the width of your text boxes to 100% of your widget area. You’ll also want to make sure to disable the MailChimp styling by going to “Settings” -> “MailChimp Setup” and un-checking the Custom Styling button.

Let us know if we can help with anything else! Cheers!

Thanks, adding that code worked! Can you explain why I should disable the MailChimp styling? The form seems to be the same either way.

We recommend disabling it just in case there are any conflicting styles. ??

@ mc_nate: THANK YOU!

Sorry I didn’t reply sooner (I took a long detour down the rabbit hole of switching hosts….*shudders*).

I was finally able to get my site back up and pay attention to this detail again, and your last recommendation to add the coding (mc_signup_form .mc_input { width: 100% }) inside the theme style file worked!!
Thanks a lot for your help! ??