テキストオーバーレイのカスタムブランディングとスタイル設定 creating-custom-branding-styling

AEM Screens プロジェクトを作成します。この例では、という名前のプロジェクトを作成して、機能を示します。 customstyle および「」というタイトルのチャネル DemoBrand を参照してください（下図を参照）。

エディターから画像をドラッグ&ドロップし、テキストオーバーレイをアセットに追加します。

AEM インスタンスからCRXDE Lite / ツールに移動します。 CRXDE Lite.

でのカスタムデザインの作成 /apps/settings/wcm/designs/<your-project>/例えば、この場合、次に移動します。 /apps/settings/wcm/designs/customstyle/

static.css ファイルを作成し、次の css ルールを設定します。また、css ルールは下の図の例としても示されています。

 //global styles
 cq-Screens-textOverlay {
 padding: 1em;
 font-size: 3rem;
 line-height: 1em;
  }
 //authoring overrides
.aem-AuthorLayer-Edit .cq-Screens-textOverlay {
 display: none;
 padding: 0;
 font-size: 1rem;
 }
  // light text variant
 .cq-Screens-textOverlay-color--light {
  background-color: rgba(0, 0, 0, .6);
  }
  // dark text variant
  .cq-Screens-textOverlay-color--dark {
   background-color: rgba(255, 255, 255, .6);
 }

パスをプロジェクトにコピーします。この場合、パスはです。 /apps/settings/wcm/designs/customstyle.

手順（1）で作成した DemoBrand というタイトルのチャネルに移動し、チャネルを選択した後、アクションバーの​ プロパティ ​をクリックします。

「詳細」タブに移動し、「デザイン」フィールドを確認します。

プロジェクトフォルダーのパスで、「デザイン」フィールドを更新します。この場合、値は /apps/settings/wcm/designs/customstyle です。

「保存して閉じる」をクリックして、デザインパスを更新します。

既存の Screen テンプレートをオーバーレイして独自のデザインを挿入するには、次の手順に従います。

1. /apps/screens/core/templates/sequencechannel の /libs/screens/core/templates/sequencechannel をオーバーレイします。
2. を変更する cq:designPath のプロパティ /apps/screens/core/templates/sequencechannel/jcr:content そのため、新しいデザインを指しています。

完全に独自のテンプレートを作成するには：

1. /libs/screens/core/templates/sequencechannel を /apps/customstyle/templates/styled-sequencechannel にコピーします。
2. を変更する cq:designPath のプロパティ /apps/customstyle/templates/styled-sequencechannel/jcr:content そのため、新しいデザインを指しています。

ユーザー管理に移動し、screens-<project>-devices group を選択してカスタムデザインパスの読み取り権限を付与します。

このパスに対する screens-<project>-administrators グループの読み取りおよび変更の権限を指定します。

というタイトルのAEM Screens プロジェクトに移動します。 customstyle > チャネル > DemoBrand. チャネルを選択し、 編集 アクションバーから。

デザインは「デザイン」フィールドに追加されたので、前述のように「プレビュー」をクリックすると、現在のスタイルが画像上のテキストオーバーレイで表示されます。

CRXDE Lite の static.css ファイルに移動し、次に示すように、このファイルにフォント（font-family: "Lucida Console", Courier, monospace; など）を追加します。

変更を保存してプレビューを再読み込みすると、テキストオーバーレイフォントが更新されます（下図を参照）。

また、コードの最後の 2 つのブロックを static.css テキストオーバーレイの周囲のボックス化されたスタイルを削除するファイル。

テキストオーバーレイが画像に追加された、更新された変更をプレビューで表示します。

これで、アセットに追加されたテキストオーバーレイのブランドやカスタムスタイルを更新する準備が整いました。