インターフェイスのカラースキーム変更

AEM Forms Workspace ユーザーインターフェイス部分のカラースキームを必要に合わせて変更できます。代表的なカラースキームのカスタマイズの例を以下にいくつか示します。この記事で説明する手順に加えて、AEM Forms Workspaceのカスタマイズの一般的な手順を参照してください。

トップナビゲーションバー

背景画像の使用

AEM Forms Workspace 上部のナビゲーションバーを更新するには：

1. 背景画像を作成して色を更新します。ファイルに newBackground.jpg と名前を付けます。

2. WebDAV クライアントを使用して背景画像を /apps/ws/images フォルダーにアップロードします。

   メモ

   WebDAVアクセスの詳細については、https://dev.day.com/docs/en/crx/current/how_to/webdav_access.htmlを参照してください。

3. 次のスタイルを追加することによって、/apps/ws/css/newStyle.css にある新しい背景画像を参照します。

   #header {
       background:#292929 url(../images/newBackground.jpg) repeat-x;
   }
   

CSS におけるカラープロパティの使用

1. /apps/ws/css にある newStyle.css に次のスタイルを追加します。

   #header {
   background : none;
   background-color: gray;
   }
   

カテゴリコンポーネント

カテゴリコンポーネントは、左パネルでタスクのさまざまなカテゴリを表示します。 色を変更するには、CSSファイルの.category要素で背景色を定義します。

タスクコンポーネント

タスクは、TaskList コンポーネントと呼ばれる中央のパネルに表示されます。色を変更するには、スタイルシートの.taskセレクターに関連付けられているスタイルを変更します。