CSS スタイルのカスタマイズ

このタスクについて

ディスプレイ編集画面の「XSL」ダイアログでは、他の場所では編集可能でないディスプレイの低レベルの特性をオーバーライドするために使用できる XSL テンプレートを追加できます。

アプリケーションのスタイルを詳細に制御する場合、カスケーディング・スタイル・シート (CSS) を使用して、独自のスタイルを追加できます。

手順

「Display」画面の「XSL」タブを選択します。
「Add XSL」ボタンをクリックします。
変更できる XSL テンプレートのリストから「CSS」を選択します。
図 1 に示しているとおりです。

図 1. ディスプレイでの CSS のカスタマイズ

カスタム・スタイルを追加するために 2 つの空の CSS テンプレート (「Theme - Main」と「Theme - Extra」) が用意されています。「Theme」テンプレートを使用して、全体的なアプリケーション・テーマを定義できます。一方、マスター・アプリケーションから継承しているアプリケーションがある場合、「Extra」テンプレートを使用できます。

編集またはオーバーライドするディスプレイの部分に関連付けられている CSS スタイル・テンプレートを選択した後に、以下のようにします。
「Add Component」をクリックします。
選択したテンプレートの既存の CSS コードが含まれた編集可能領域が表示されます。

CSS を追加するか、この画面に表示されている既存の CSS を変更した後に、以下のようにします。
「OK」をクリックして変更を保存し、「XSL」タブに戻ります。
「Apply」をクリックして変更を保存し、編集を続行します。
あるいは、「Cancel」をクリックして、最終変更適用時以降に行った変更を破棄し (変更が存在する場合)、「XSL」タブに戻ります。

タスクの結果

このチュートリアルを進めるには、マークアップのカスタマイズをクリックします。