2

送信ボタンのデフォルトの緑の色を変更しようとしています。マウスがボタンの上にあるときに緑色のエッジを変更し、代わりにクリックすると緑色の背景を青色に変更しようとしています。

ありがとう。

4

2 に答える 2

1

トロントのボタンには、黒、青、緑、赤、黄色のテーマがすでに組み込まれています。たとえば、class="blue"ボタンで指定すると、ボタンが青色に変わります。これらのテーマは、button.pngファイルとbutton_hrep.pngファイルの代替バージョンを指定するだけです。

デフォルトのトロントテーマをコピーしthemes/button/blue-highlight/、ボタン画像ファイルの代替バージョンを含むフォルダーがあるとすると、テーマのbutton.cssに以下を追加できます。

/* "blue_highlight" - changes the borders and background images of the button to use different images */
.$URN$_button-blue_highlight .button-top-left,
.$URN$_button-blue_highlight a:hover span.button-top-left,
.$URN$_button-blue_highlight a:focus span.button-top-left,
.$URN$_button-blue_highlight a:active span.button-top-left,
.$URN$_button-blue_highlight span.button-disabled-span span.button-top-left,
.$URN$_button-blue_highlight .button-top-right,
.$URN$_button-blue_highlight a:hover span.button-top-right,
.$URN$_button-blue_highlight a:focus span.button-top-right,
.$URN$_button-blue_highlight a:active span.button-top-right,
.$URN$_button-blue_highlight span.button-disabled-span span.button-top-right,
.$URN$_button-blue_highlight .button-bottom-left,
.$URN$_button-blue_highlight a:hover span.button-bottom-left,
.$URN$_button-blue_highlight a:focus span.button-bottom-left,
.$URN$_button-blue_highlight a:active span.button-bottom-left,
.$URN$_button-blue_highlight span.button-disabled-span span.button-bottom-left,
.$URN$_button-blue_highlight .button-bottom-right,
.$URN$_button-blue_highlight a:hover span.button-bottom-right,
.$URN$_button-blue_highlight a:focus span.button-bottom-right,
.$URN$_button-blue_highlight a:active span.button-bottom-right,
.$URN$_button-blue_highlight span.button-disabled-span span.button-bottom-right {
    background-image: url(blue-highlight/button.png);
}
.$URN$_button-blue_highlight a:hover span.button-top-middle,
.$URN$_button-blue_highlight a:focus span.button-top-middle,
.$URN$_button-blue_highlight a:active span.button-top-middle,
.$URN$_button-blue_highlight .button-top-middle,
.$URN$_button-blue_highlight span.button-disabled-span span.button-top-middle,
.$URN$_button-blue_highlight .button-bottom-middle,
.$URN$_button-blue_highlight a:hover span.button-bottom-middle,
.$URN$_button-blue_highlight a:focus span.button-bottom-middle,
.$URN$_button-blue_highlight a:active span.button-bottom-middle,
.$URN$_button-blue_highlight span.button-disabled-span span.button-bottom-middle {
    background-image: url(blue-highlight/button_hrep.png);
}

blue_highlightこれは、クラスを追加するテーマの例です。

于 2012-10-11T03:52:40.803 に答える
0

テーマを拡張/更新するには、次の手順に従う必要があります。

  1. アプリケーションのディレクトリに「themes」ディレクトリを作成します

  2. その「themes」ディレクトリ内に「button」ディレクトリを作成します

  3. 「aviarc-data/widgets」ディレクトリに移動し、「com.aviarc.toronto.widget.core-NNN-vYYYYMMDD.jar」の行に沿って、ウィジェットのパッケージの最新バージョンを見つけます。

  4. そのアーカイブから、関連するウィジェットのテーマ パーツを抽出する必要があります。あなたのシナリオでは、「\metadata\widgets\button\theme」ディレクトリのコンテンツを「themes\button」ディレクトリに抽出する必要があります。

  5. これで、CSS と実際の画像を調整できます。つまり、色を変更したり、完全に置き換えたりすることができます。

于 2012-10-09T03:41:31.723 に答える