ワードプレスでSubscribe2ボタンの外観をカスタマイズするには？

Question

私はワードプレスに非常に新しいですし、何のPHPやCSSの経験を持っていない...

私は Subscribe2 のプラグインを使用したいですよhref = "http://wordpress.org/extend/themes/inove" のrel = "nofollowをnoreferrer"> iNove のテーマ。私は、ウィジェットを追加すると、購読/解除ボタンはかなり醜いページを作る「古典的」な方法、でレンダリングされている（ブログはである：<のhref =「http://www.adlerr.com」のrel =」 noreferrer nofollowを "> http://www.adlerr.com の）

の

どのように私は、ボタンの外観をカスタマイズすることができますか？私は、適切な指示を取得する場合、いくつかのPHP / CSSを記述する準備ができています...

ボタンを出力するコードはここにあります：

$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";

とボタンがありますが、適切stying ここします：底右のボタン「コメントを送信」、それが「ボタン」クラスである。

の

コメント送信ボタンを生成するコードがあります：

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

私が購読/解除ボタンはボタン「コメントを送信」のように見えるようにするにはどうすればよいですか？

あなたのヘルプははるかに高く評価され、感謝しています。

Answer 1

unstyledとスタイルのボタンの間の違いは、unstyledボタンは、クラス=「ボタン」の属性を持っていないということです。

あなたは、WPにログインし、プラグインをクリックし、Subscribe2プラグインで編集をクリックして、場所を入力タイプを見つける=ボタンを提出しているし、彼らにクラス=「ボタン」を追加することができる必要があります。

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

の編集のあなたのCSSファイルで、あなたはボタンと呼ばれるクラスを作成することになるでしょう。

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

あなたは、これらの値は、あなたに合ったものに追加/変更する必要があります。あなたは、W3Schoolsのので CSSについての詳細を調べることができます。おそらく、背景、テキスト、フォント、およびボックスモデルを見てみたいと思うでしょう。

さてさて、私はそれをこの時間です！

このへのstyle.cssの変更行949：

#submitbox #submit, .button {

このへのstyle.cssの変更行960：

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