Style changed after update

Hey Espimedia —

While some of the style for the plugin would have changed, most of the classes and ids should be the same. Your best bet is going to be to refer to the CSS Cheatsheet included at the bottom of the “MC Setup” page to make sure everything lines up. You could also double check that the default styling is disabled on that same “MC Setup” page.

Cheers,
Nate

Where can I change the CSS … I have the same issue that my design looks different – button color changed. So I am trying to change it into what it was before but I dont see where to do it!?

Hello nc_nate, I looked but can’t find the cheat sheet you refer too?

Hey guys —

If you’re on version 1.3 of the plugin, it should be on the “MailChimp Setup” page, at the very bottom. If you’re not on 1.3, these classes should still work, but here’s the screenshot:

https://cl.ly/image/1i2R3S033V1h

Alternatively, you can use a browser extensions like Firebug to grab the class/id information by right-clicking and using “Inspect Element”.

Ok, so I updated to 1.3 and the input text box width as well as the button width got too big. I added this two CSS styles but now my mobile version is not longer fluid. I also had to force the CSS with !important; because I could not find where the .css is. I checked the them and the MC plugin files. My site is https://oblatemissions.org

#mc_signup_form .mc_input
{
width:140px;
}

#mc_signup_submit
{
    margin-top: .2em !important;
    width: 100px !important;
}

Here’s the only CSS I found which was working fine before updating to 1.3

/* Newsletter Widget */
	#pre-hero #newsletter-widget {
		border-bottom: 1px solid #e1e1e1;
	}

	#pre-hero #newsletter-widget #mc_signup_form .mc_var_label { display: block; text-align: center; }

	#pre-hero #newsletter-widget .mailchimp-signup .mergeRow {
		display: none;
	}

	#pre-hero #newsletter-widget .mc_merge_var, #pre-hero .mc_signup_submit {
		display: inline;
	}

	#pre-hero #newsletter-widget .mailchimp-signup input[type="text"] {
		border: 1px solid #e1e1e1;
		border-radius: 6px;
		-webkit-border-radius: 6px;
		color: #666;
		padding: 2px;
		height: 31px;
	}

	#pre-hero #newsletter-widget .mailchimp-signup input[type="submit"] {
		font-weight: normal;
		background: #fac57d; /* Old browsers */
		/* IE9 SVG, needs conditional override of 'filter' to 'none' */
		background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZhYzU3ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZDZkMzUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
		background: -moz-linear-gradient(top,  #fac57d 0%, #ed6d35 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fac57d), color-stop(100%,#ed6d35)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #fac57d 0%,#ed6d35 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #fac57d 0%,#ed6d35 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #fac57d 0%,#ed6d35 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #fac57d 0%,#ed6d35 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fac57d', endColorstr='#ed6d35',GradientType=0 ); /* IE6-8 */
		-webkit-border-radius: 6px;
		border-radius: 6px;
		color: #fff;
		text-transform: uppercase;
		padding: 8px 10px 6px 10px;
		opacity: 0.9;
		font-size: 0.75em; /* 12px / 16px */
	}

	#pre-hero #newsletter-widget .mailchimp-signup input[type="submit"]:hover, #pre-hero .mailchimp-signup input[type="submit"]:focus {
		opacity: 1.0;
	}
	/** end Newsletter **/

My website: https://www.oblatemissions.org

Here’s what it looked like before the update
click

No response. I have reversed the update to Version 1.2.14 . If plugin creator has feedback would be greatly appreciated.

Hello friends at “mc_nate” any feedback to help resolve this and do an update without the css troubles?

Hey espimedia,

Thanks for posting. Ultimately with the changes in the 1.3 update the plugin form will now inherit CSS a bit differently than before. If you’re seeing undesired design changes as a result of the update, CSS will have to be added to make changes to the form design.

It sounds like in this case, there’s a few issues occurring as a result of the plugin update. The first is that the input field and submit button are wider than expected and the second is that the attempted CSS addition is breaking the responsive design of your WordPress theme. It’s worth noting that our support with CSS tweaking with WordPress themes is very limited, but I’d be happy to try my best to help get things started in the right direction.

The code that you provided should set the widths of those elements. As far as where the .CSS files are located, you can generally find this from your WP-admin area under Appearance > Editor > [select your theme] > Style.css. You can then add your custom CSS to the bottom of your CSS file here. Keep in mind that if you update your theme, you’ll need to re-add this CSS again.

There’s a bit of gray area on my end in regards to what issues you’re seeing with the responsive design. Is there any way that you’re able to provide a link to an environment which has 1) the newest plugin and 2) the CSS width changes? Then I can try and replicate the responsiveness issues. If you’re not comfortable making the 1.3 plugin active, another option would be to take a screenshot of the responsiveness issues that you’re seeing, then I can try my best to diagnose any potential ways to resolve it.

Look forward to hearing back!

Forgot to mention, if you do decide to take a screenshot, you can send that over to my email address at mailchimptk [at] gmail.com!

Hey Patricio,

Thanks for sending an email! In taking a look at the site a bit, I believe I was able to come up with some code suggestions so that you can get the desired feel.

Just above the actual code for the signup form, it looks like there was some custom CSS added. A lot of what’s set in this section is what’s creating the design that’s there now, so let’s see if we can tweak it a bit to get what we’re looking for.

First, let’s adjust the email address input field’s width. Find this chunk of code:

.mc_input {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
	}

Change the width to a smaller percentage. It looks like the percentage is how your theme’s managing the responsiveness, so if you make this width smaller, you should see that the input field gets smaller too and should remain fluid.

Next, let’s change the subscribe button’s width. Find this code here:

#mc_signup_submit {
		margin-top: 1.5em;
		width: 80%;
	}

And decrease the width percentage as well. You should be able to emulate a similar design to the 1.2 version in doing the above. If in making these changes you’re still seeing issues, feel free to post back here and I’d be happy to help!

Hey there,

In taking another look, it actually doesn’t appear to be custom CSS my mistake. In this case, you’ll want to make the code changes I suggested above by editing your “mailchimp_widget.php” file. You can edit this file inside of WP-admin > Plugins > Editor > MailChimp.

Let us know if you have any questions!

Hello, thank you so much for all your help. Here’s what I ended up using, and I put it on the theme’s custom CSS, this way future MC updates won’t erase it.

– Notice I had to use !important; or it woulnd’t take it.
– And I had to delete in the MC widget php style “margin-top: 1.5em;” to center vertically. I tried using “margin-top:none !important;” but would not take.
– Last I could not get “#mc_signup_submit margin-top:” to work with a % but rather px only. With a % it would change badly among devices,
too narrow or too wide.

Thanks again for you help. This works for now -I think- unless you see a better way?

My humble suggestion for future plugin updates: CSS editing within the plugin dashboard would be great.

BTW… I also found this great tool to test it: https://ipadpeek.com/

/* MAILCHIMP WIDGET */

	.mc_input
{
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		width: 35% !important;
}

	#mc_signup_submit
{
		margin-top: none !important;
		width: 100px !important;

}

Hey there,

Happy to hear you were able to get it to display as desired. In taking a look at the site, it looks like you’d added the above CSS code to a separate area of your site, rather than making direct edits to the mailchimp_widget.php. This is fine, but is likely the reason you were running into the requirement to use “!important”.

For the margin-top, I did a Google search and found this article: https://stackoverflow.com/questions/7266363/margin-top-percentage-does-not-change-when-window-height-decreases

Which makes note that while margin-top accepts percentages, it’ll use the width, rather than the height, which is what some may expect. This could perhaps have led to some strangeness when testing in different devices.

If you have any additional questions, let us know!

-tk