- This topic has 8 replies, 2 voices, and was last updated 6 years, 7 months ago by
.
I’ve added in a Mailchimp sign up box to this page (http://blog.lightful.com/) as a shortcode – is there anyway of changing the styling on this?
Currently it is stretching to the full width of the screen – is it possible to make it about 400px wide?
Is it possible to change the “Sign Up” box to be an image?
And is it possible to change the background colour of the input box & remove the border colour?
Thanks!
Just noticed a bit of strange formatting happening when you enter your email address & hit Sign Up – when the thank you message displays, the Sign Up button pops down (see screengrab attached). I’ve popped the sign up box in to a div with a max-width now to make it all smaller & not full width, but even if i take it out of this div tag to make it full width again, it’s still doing weird things (Sign Up button moving down) when you submit your email address. Any idea why?
Solution for this topic
Hi Sarah,
I hope you are well today and thank you for your questions.
You can style it and also resolve the issue by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
#mc4wp-form-1 input[type="submit"] { top: 0; bottom: auto; } #mc4wp-form-1 input[type="email"] { background: #000; color: #fff; box-shadow: none; }Best regards,
Shufflehound teamThat is working great now, thanks! Is there any way of adding an image as the Sign Up button?
Use below CSS code to add background image to button. Please change image URL in the code to whatever image you want to display.
#mc4wp-form-1 input[type="submit"] { background-image: url("https://www.w3schools.com/cssref/paper.gif"); }I seem to be getting this effect (see screengrab) when I pop this code in. It still seems to be keeping the original submit button & just overlaying the button graphic on top.
To remove the button background color you have to use the below CSS code.
#mc4wp-form-1 input[type="submit"] { background-color: transparent; }Thanks! Managed to get it working with a bit of alteration to the original graphic & getting rid of box shadows etc.
On mobile it’s gone a little weird though (see screen grab). It seems fine on iPad, just on iPhone it’s being cut off.
It seems the plugin issue so please contact the plugin author to resolve the issue.
