서비스 포털 의 테마를 AI 검색재정의할 CSS 포함 작성

회사 브랜딩과 일치하도록 의 서비스 포털 테마 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. 제출을 선택합니다.

결과

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

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