WordPress.org

1. timothyquin
   Member
   Posted 1 year ago #

   I'm having some problems styling my mailchimp submit button.

   OK, so I have unchecked the custom styles box and I have managed to style all text fields and the submit button within style.css using the css rule: input. But I now want to replace the submit button with my own image or at least to change the bg color so that it stands out. However, when I try to style it using the css rule: submit it doesn't affect it. This is strange as this is the rule you would normally use to style a submit button.

   Can anyone shed any light on this one?

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

2. mc_jesse
   Member
   Posted 1 year ago #

   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.

3. sempervirent
   Member
   Posted 1 year ago #

   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" />

4. mc_jesse
   Member
   Posted 1 year ago #

   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.

5. timothyquin
   Member
   Posted 1 year ago #

   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);

6. SimplifyNow
   Member
   Posted 1 year ago #

   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.

7. vieckowski
   Member
   Posted 6 months ago #

   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 :
   http://wersus-nauka.pl/produkty/tablice-dydaktyczne/fizyka/
   widget at the bottom of sidebar.

   I would be very gratefull for help.

   Simon

8. vieckowski
   Member
   Posted 6 months ago #

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

   Still hope someone can help with #1 issue.

9. vieckowski
   Member
   Posted 6 months ago #

   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

Topic Closed

This topic has been closed to new replies.