UI ビルダー のテーマの拡張

  • リリースバージョン: Washingtondc
  • 更新日 2024年02月01日
  • 読む4読むのに数分

    • メインテーマのバリエーションを、別のテーマに拡張して作成します。

    始める前に

    必要なロール：ui_builder_admin または admin

    このタスクについて

    テーマ [sys_ux_theme] レコードを別のテーマレコードに拡張すると、特定のエクスペリエンスのメインテーマのバリエーションを作成できます。テーマの拡張後に、拡張されたテーマのバリエーションでより具体的なスタイルを設定することで、メインテーマから継承されたスタイルを上書きできます。 たとえば、組織のメインのブランディングテーマを作成できます。そのテーマを ワークスペース に固有のカスタマイズされたスタイルを持つ ワークスペース テーマに拡張できます。

    次の手順では、メインテーマを作成し、ワークスペース 向けにそのテーマを拡張してスタイル構成をカスタマイズする方法の例を示します。Next Experience CSS カスタムプロパティを使用してテーマを作成および拡張する方法の詳細については、「UI Builder ページの表示スタイルの管理」を参照してください。

    手順

    1. 次のいずれかの操作を行います。
      • エクスペリエンスへのテーマの適用 の手順に従ってください。
        1. 移動先 メニュー > エクスペリエンスの設定を編集 > ブランディングとテーマ.
        2. [テーマ] の [ブランディングとテーマ] の設定画面で、 [テーマを作成] を選択します。
      • 移動先 Now Experience フレームワーク > テーマ.
      テーマリストビューが表示されます。
    2. [新規] を選択します。
    3. フォームで、次のフィールドを入力します。
      フィールド 説明
      名前 テーマ拡張の名前 (「My Main Theme」など) を入力します。
      説明 テーマ拡張について説明します。
      拡張 リストから参照アイコン (リストから参照アイコン) を選択し、リストから [デフォルト] レコードを選択します。
      テーマ
      次のように入力します。
      {
  "--now-color_brand--primary": "23,64,139",
  "--now-color--primary-1": "23,64,139",
  "--now-color--primary-0": "220,226,238",
  "--now-color--primary-2": "18,48,105",
  "--now-color--primary-3": "12,32,70",
  "--now-color_brand--secondary": "201,8,42",
  "--now-color--secondary-1": "201,8,42",
  "--now-color--secondary-0": "247,218,223",
  "--now-color--secondary-2": "151,6,32",
  "--now-color--secondary-3": "151,6,32"
}
      注:
      テーマ [sys_ux_theme] レコードでは 16 進数の色値はサポートされていません。すべての色値は RGB トリプレットである必要があります。
      アクティブ このテーマ拡張を有効にする場合に選択します。
      上書き このフィールドは空のままにします。
    4. 他のすべてのフィールドはそのままにして、[送信] を選択し、メインテーマの作成を終了します。
      テーマリストビューが再度表示されます。
    5. コンテキスト ヘッダーで、 新規 を選択して別のテーマ レコードを作成します。
    6. フォームで次のフィールドに入力します。
      フィールド 説明
      名前 「My Workspace Theme」と入力します。
      説明 テーマ拡張について説明します。
      拡張 リストから参照アイコン (リスト を使用して参照アイコン) を選択し、リストから [自分のメインテーマ] レコードを選択します。
      テーマ
      次のコードを入力します。
      {
"--now-actionable--text-transform": "uppercase",
"--now-actionable--border-radius": "30px",
"--now-actionable--border-width": "5px",
"--now-window--border-radius": "30px",
"--now-window--border-width": "5px"
}
      注:
      テーマ [sys_ux_theme] レコードでは 16 進数の色値はサポートされていません。すべての色値は RGB トリプレットである必要があります。
      アクティブ このテーマ拡張を有効にする場合に選択します。
      上書き このフィールドは空のままにします。
    7. 他のすべてのフィールドはそのままにして、[送信] を選択し、ワークスペース テーマの作成を終了します。
      メインテーマが ワークスペース テーマに拡張されました。継承されたスタイルが、ワークスペース テーマのより具体的なスタイルによって上書きされない限り、メインテーマのスタイルセットは ワークスペース テーマによって継承されます。

    次のタスク

    メインテーマと拡張テーマのバリエーションを作成したので、エクスペリエンスにテーマを適用してみます。