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

最終更新日: 2023-05-04
  • 作成対象:
  • User
注意

AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

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 セレクターに関連付けられたスタイルを変更します。

このページ