如何自定义WordPress中的Subscribe2按钮外观？

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 {