サービスポータル の AI 検索 用のテーマを上書きする CSS インクルードを作成

  • リリースバージョン: Xanadu
  • 更新日 2024年08月01日
  • 所要時間：4分

    • サービスポータル の AI 検索 用のテーマを上書きして、会社のブランディングに準拠します。

    始める前に

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

    このタスクについて

    サービスポータル での AI 検索 の機能のスタイル設定の例として、この手順では、検索結果コンテナーと検索フィルターの周囲の境界線を削除し、検索結果の強調表示の色を変更します。追加の CSS 変数を使用して、他のいくつかの機能をスタイル設定できます。これらの変数の詳細については、「 サービスポータル の AI 検索 のテーマ作成」を参照してください。

    検索結果コンテナー：検索で取得した各アイテムの境界線を削除します。

    検索結果コンテナー。

    検索フィルター：検索フィルターの境界線を削除します。

    検索フィルター。

    ヒットハイライト色：検索したテキストで検索ヒットを表示する色を変更します。

    ヒットハイライト。

    手順

    1. スタイルシートレコードを作成します。
      1. フィルターナビゲーターに「sp_css.do 」と入力します。
      2. フォームのフィールドに入力します。
        表 : 1. スタイルシートフォーム
        フィールド 説明
        名前 スタイルシートの一意の名前。たとえば、sp_ais.css。
        CSS CSS スクリプトのスクリプトフィールド。このスクリプトを入力し、変数をカスタマイズします。

        • 検索結果コンテナーの境界を削除するには、このスクリプトを貼り付けて、必要に応じてカスタマイズします。

          sn-search-results-container  {
  --now-container--border-width: 0px !important;
  --mv9-JvmzrAmtZ--kvZptZ-9Apz8: 0px !important;
  --mv9-jvmzramtz--kvzptz-9apz8: 0px !important;
}

        • 検索フィルターの境界を削除するには、このスクリプトを貼り付けて、必要に応じてカスタマイズします。

          sn-search-facets {
  --now-color--divider-tertiary: 0px !important;
}

        • ヒットハイライトの色を変更するには、スクリプトに目的の rgb 色を入力します。

          sn-search-results-container, sn-search-combobox {
  --now-color_alert--warning-1: rgb(40,103,178) !important;
}
        スクリプトは次のようになり、完了時にカスタマイズされます。
        sn-search-results-container  {
  --now-container--border-width: 0px !important;
  --mv9-JvmzrAmtZ--kvZptZ-9Apz8: 0px !important;
  --mv9-jvmzramtz--kvzptz-9apz8: 0px !important;
}
 
sn-search-facets {
  --now-color--divider-tertiary: 0px !important;
}
 
sn-search-results-container, sn-search-combobox {
  --now-color_alert--warning-1: rgb(40,103,178) !important;
}
        アプリケーション このスタイルシートに適用されるアプリケーション 。グローバルとは、スタイルシートがすべてのアプリケーションに適用されることを意味します。
      3. [送信] を選択します。
    2. CSS インクルードレコードを作成します。
      1. フィルターナビゲーターに「sp_css_include.do 」と入力します。
      2. フォームのフィールドに入力します。
        表 : 2. CSS インクルードフォーム
        フィールド 説明
        名前 CSS インクルードレコードの一意の名前。
        ソース CSS インクルードのソース。スタイルシートを選択します。
        スタイル シート この CSS インクルードフォームに組み込むスタイルシート。手順 1 で作成したスタイルシートを選択します。
        アプリケーション この CSS インクルードレコードが適用されるアプリケーション。グローバルとは、CSS インクルードがすべてのアプリケーションに適用されることを意味します。
        遅延ロード

        CSS インクルードを非同期にロードしてページのロード時間を短縮するオプション。このオプションはテーマのすべての CSS インクルードに対して同じ値に設定する必要があります。テーマに関連付けられた一部の CSS インクルードに対してのみ非同期ロードを有効にすることはお勧めしません。

        注:
        スタイル設定されていないコンテンツが点滅しているポータルで [遅延ロード] を有効にすることはお勧めしません。

        [遅延ロード] が有効になっている CSS インクルードは、テーマレコードの [遅延ロード CSS インクルード] 関連リストに一覧表示されます。
    3. CSS 上書きをスタイルシートフォームに入力し、UI に適用されるテーマを上書きします。
      1. フィルターナビゲーターに「m2m_sp_theme_css_include」と入力します。
      2. フォームのフィールドに入力します。
        表 : 3. スタイルシートフォーム
        フィールド 説明
        順番 他のスタイルシートに対してこのスタイルシートの組み込みを優先する整数。数字が小さいほど、リスト内の順序が高くなります。一般的には、これらの数字を 100、200、300、400 などのように数百にし、将来既存のアイコンの間に新しいアイコンを配置できるようにします。
        CSS インクルード 前の手順で作成した上書きを含む CSS インクルード。
        アプリケーション このスタイルシートに適用されるアプリケーション 。グローバルとは、スタイルシートがすべてのアプリケーションに適用されることを意味します。
        テーマ 上書きする UI に適用されるテーマ。
      3. [送信] を選択します。

    タスクの結果

    検索結果コンテナー周囲の境界および検索フィルターが削除され、ヒットハイライトの色にカスタム色が表示されます。
    SP の AI Search のテーマは、結果を上書きします。