[Plugin: MailChimp List Subscribe Form] Custom styling MailChimp submit button

There’s nothing special about the submit button, but you should realize that it’s still an input tag, not a submit tag. If you are certain you have the proper css, take a look at the element using firebug and you’ll probably find that it’s getting overridden by some other rules.

Look somewhere around line 179 in mailchimp_widget.php

<input type="submit" name="mc_signup_submit" id="mc_signup_submit" value="<?php echo esc_attr(get_option('mc_submit_text')); ?>" class="button" />

Before you go down that road, be aware that any changes you make to the plugin will get wiped out if you ever upgrade it.

Thanks for your help people. I managed to get it sorted in the end using the following CSS rule:

#mc_signup .button {
background-image: url(images/newsletter-button.gif);

Thanks for the information folks. Due to my inexperience with php and css, I went for the quick hack by changing this:
<input type="submit" name="mc_signup_submit" id="mc_signup_submit" value="<?php echo esc_attr(get_option('mc_submit_text')); ?>" class="button" />

To this:
<input type="image" name="mc_signup_submit" img src="<?php echo get_option('home'); ?>/wp-content/uploads/res/Signup.png" width="99px" height="50px" alt="Sign Up!" class="button" />

I could probably replace the alt string with the old code to get mc_submit_text, but I’m not too concerned right now.

This gives me the ability to upload a new image without changing the code, but I’d need to update the code if I change the size as well as every time that this plugin is updated. That’s ok with me as I’m happy to use all the rest of the hard work on this plugin without this one sticking point causing me problems.

Hi,

I’m trying to get a hover image as a submit button.

Changing the input name to ‘image’, as shown above works but I don’t know how to make a hover image this way.

When I’m trying to style in CSS it I get 2 problems.

1. I’m setting up a background image, but my image is placed in another background with border. When I look at the source in Chrome’s tools I can see that there is some CSS titeld ‘user agent stylesheet’ – but I don’t know where and how to edit it.

2. My themes default button height was 37px, I changed it to 59 for my graphics, but after hovering, the image is not completly moved up – I gues it’s that old 37, and I don’t know how to change that either.

Link :
https://wersus-nauka.pl/produkty/tablice-dydaktyczne/fizyka/
widget at the bottom of sidebar.

I would be very gratefull for help.

Simon

Solved problem #2. Few lines further in css was button hover property.

Still hope someone can help with #1 issue.

Solved problem #1. For now ??

User Agent Stylesheet is oposite to Author Stylesheet. It is style given by users browser default style settings for common classes, like button in this example.

I solved it by adding in my theme’s style.css ‘button’ class properties I wanted – border;none; , and bg color same as body color.

Simon