styling mailchimp for one line

Hey there Dr. Vann!

This one took a little extra brain-power. To borrow from another post on the same issue:

…Because the “Email Address” label is kind of long, you might want to do away with that entirely or add it in the actual text box. While that’s not something we support directly, here’s the quick hack on how to add that:

http://wordpress.org/support/topic/plugin-mailchimp-list-subscribe-form-request-add-placeholder-text-for-mailchimp-widget?replies=8

To kill the “Email Address” text, you’ll need to add this to your CSS:

#mc_signup_form .mc_var_label {
display: none;
}

Then I ran into a little issue. It looks like there’s a minimum width set for input areas on your site. So you’ll have to add a little extra tidbit in there to make the width of the form smaller to allow for the button to show on the same line:

#mc_signup_form .mc_input {
float: left;
min-width: 0px !important;
width: 40%;
}

You’ll end up with something like this:
http://cl.ly/0k1Z2E0V473r0U3e3D0X (Screenshot)

Again, you’ll probably want to do some fine-tuning, but this should get you headed in the right direction.

If we can help with anything else, give us a shout!

Cheers

Hey there, Quinselle!

Looks like your site is currently in Maintenance Mode. However, generally, something like what we mentioned above should work. Depending on how wide the widget area is, you might be able to get away with just floating the email field to the left.

#mc_mv_EMAIL.mc_input {
float:left;
}

That should give you something that looks similar to this:

Screenshot — http://cl.ly/2S2f3O1F2e361X0J3t19

I’ve also set my field label to be hidden, so that everything can fit onto one line. You can do that with the following CSS:

#mc_signup_form .mc_var_label {
display: none;
}

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

Cheers

Hey again!

Aha! Okay… so it looks like we were on the right path before. However, because the widget area is somewhat condensed, we need to set the width of it to be a little wider. For testing, I set the width to 200px:

#mc_signup {
width:200px;
}

Then it looked like there was something blocking the submit button from filling in nicely. Turns out there was the overflow that did it. So I set “overflow: visible” and BAM! I got something like this:

http://cl.ly/0y290d3m0n1u1H2d3F0n

Cheers!

Hey again!

It looks like the entire page’s overflow was set to “visible”, instead of just a MailChimp-specific class. It looks like you can set the page back to “hidden” and change just the “mc_merge_var” class to visible:

.mc_merge_var {
overflow: visible;
}

That should take care of it. However, at this point, we have to be cautious about how much help we’re offering for site-specific CSS. We don’t want to wade too far into the deep end and mess up someone’s entire site. :\

If we can help with anything else, give us a shout. 🙂

Cheers

I love that you’re active in the upkeep of your widget, Mailchimp! Your company rocks!

In future versions of your plugin, would your team consider removing the hardcoded forced new-line styling of the <br /> from this file ns_widget_mailchimp.class.php and replace it with a surrounding div around the label and input areas? Example: <div class="whateverclass"> label, input </div> so people may style the form more easily?

Thanks for the consideration!

Hey there, Jeeni!

Judging by the “ns_widget_mailchimp” file, it sounds like you might be using the James Lafferty plugin, here:

http://wordpress.org/extend/plugins/mailchimp-widget/

However, if we can assist with the other plugin — http://wordpress.org/extend/plugins/mailchimp/ — please don’t hesitate to let us know!

Cheers

Hey Helga!

Appreciate the feedback. While I can’t promise an ETA for something like that, I’ll definitely put this in front of the devs to see what we can do.

In the meantime, if we can help with anything else, let us know!

Cheers

p.s. – make sure to strip out the snippet of css and the comment in the embed code.