How to customize Subscribe2 button appearance in WordPress?

Question

I'm very new to WordPress and have no PHP or CSS experience...

I'm want to use Subscribe2 plugin in my blog, together with iNove theme. When I add the widget, the Subscribe/Unsubscribe buttons are rendered in the "classic" way, which makes the page quite ugly (the blog is at: http://www.adlerr.com)

How can I customize the appearance of the buttons? I'm ready to write some PHP/CSS if I get proper instructions...

The code outputting the buttons is here:

$this->form = "<form method=\"post\" action=\"\"><p>" . __('Your email:', 'subscribe2') 
. "<input type=\"text\" name=\"email\" value=\"" . __('Enter email address...', 
'subscribe2') . "\" size=\"20\" onfocus=\"if (this.value == '" . __('Enter email     
address...', 'subscribe2') . "') {this.value = '';}\" onblur=\"if (this.value == '')     
{this.value = '" . __('Enter email address...', 'subscribe2') . "';}\" /></p><p><input 
type=\"submit\" class=\"button\" name=\"subscribe\" value=\"" . __('Subscribe', 
'subscribe2') . "\" />&nbsp;<input type=\"submit\" class=\"button\" name=\"unsubscribe\" 
value=\"" . __('Unsubscribe', 'subscribe2') . "\" /></p></form>\r\n";

And there are buttons will proper stying here: bottom right, the "Submit Comment" button, that is of class "button":

The code generating the Submit Comment button is:

<input name="submit" type="submit" id="submit" class="button" tabindex="5" 
value="<?php _e('Submit Comment', 'inove'); ?>" />

What should I do to make the Subscribe/Unsubscribe buttons look like the "Submit Comment" button?

Your help is much appreciated, thanks.

Answer 1

The difference between the unstyled and styled buttons is that the unstyled buttons don't have an attribute of class="button".

You should be able to log into WP, click plugins, click edit on the Subscribe2 plugin and find where the input type=submit buttons are and add a class="button" to them.

<input type="submit" class="button" value="Subscribe" name="subscribe"/>
<input type="submit" class="button" value="Unsubscribe" name="unsubscribe"/>

Edit: In your css file, you will want to create a class called button:

.button {
  background-color: #e0ffff;
  color: #ffffff;
}

You'll need to change/add these values to something that suits you. You can find out more about css at w3schools. You will probably want to look at background, text, font, and box model.

Alright, I got it this time!

Change line 949 in style.css to this:

#submitbox #submit, .button {

Change line 960 in style.css to this:

#submitbox #submit:hover, .button:hover {