의 테마를 AI 검색 재정의할 CSS 포함 만들기 서비스 포털

회사 브랜딩을 준수하도록 in 서비스 포털 에 대한 AI 검색 테마를 재정의합니다.

시작하기 전에

필요한 역할: sp_admin 또는 admin

이 태스크 정보

in 서비스 포털의 스타일 지정 기능 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. 제출을 선택합니다.

결과

검색 결과 컨테이너와 검색 필터 주변의 테두리가 제거되고 적중 강조 표시 색상에 사용자 지정 색상이 표시됩니다.

• 에 대한 AI 검색 테마 서비스 포털
  관련 CSS 변수를 업데이트하여 환경의 서비스 포털 모양과 느낌을 AI 검색 사용자 지정할 수 있습니다.