포털 테마 생성
브랜딩 편집기가 제공할 수 있는 것보다 더 많은 사용자 정의가 필요한 경우 사용자 지정 테마를 만들 수 있습니다.
CSS를 이해하는 사용자만 사용자 정의 테마를 만들어야 합니다.
- 다음으로 이동 을 클릭한 다음 새로 만들기를 선택합니다.
- 양식 필드를 작성한 후 양식 컨텍스트 메뉴에서 저장을 선택합니다.
표 1. 테마 양식 필드 필드 설명 이름 테마의 이름입니다. 이 이름을 사용하여 테마를 포털에 연결합니다. 이 이름은 사용자에게 표시되지 않습니다. 포털에 올바른 테마를 적용하려면 이 이름을 알고 있어야 합니다. SCSS 컴파일 끄기 SCSS 컴파일을 해제하고 일반 CSS 파일을 클라이언트로 직접 보냅니다. 애플리케이션 기록 범위입니다. 헤더 메뉴 기록과 소스 테이블의 애플리케이션 범위가 같아야 합니다.
머리글 포털 테마와 연결할 수 있는 sp_header_footer 테이블의 머리글 및 바닥글 목록입니다. 머리글과 바닥글은 위젯이며 동일한 방식으로 구성할 수 있습니다. 바닥글 포털 테마와 연결할 수 있는 sp_header_footer 테이블의 머리글 및 바닥글 목록입니다. 고정 머리글 사용자가 스크롤할 때 헤더가 화면에 남아 있도록 페이지 상단의 헤더를 잠급니다. 고정 바닥글 사용자가 스크롤할 때 바닥글이 화면에 남아 있도록 페이지 아래쪽의 바닥글을 잠급니다. CSS 변수 포털에서 색상과 스타일을 변경하는 데 사용할 수 있는 CSS 사용자 지정 속성입니다. 예를 들어 재고 테마는 다음 변수 중 일부를 사용합니다. $sp-logo-margin-x: 15px !default; $sp-tagline-color: $text-color !default; $navbar-inverse-bg: #3a3f51 !default;주:CSS 변수 필드를 사용하여 CSS 변수만 정의합니다. CSS 포함 항목을 사용하여 CSS 규칙을 정의합니다. Madrid 릴리스에서부터, CSS 포함 항목 내에서 Sass와 LESS를 사용할 수 있습니다. - 테마에 스타일시트를 추가하려면 CSS 포함 관련 목록에서 새로 만들기를 선택합니다.
- 스타일시트 양식 필드를 작성하고 제출을 선택합니다.
표 2. 스타일시트 양식 필드 필드 설명 이름 CSS 포함의 이름입니다. CSS 포함을 테마와 연결하려면 이 이름을 기억하십시오. 애플리케이션 기록 범위입니다. 헤더 메뉴 기록과 소스 테이블의 애플리케이션 범위가 같아야 합니다. 소스 다음 옵션 중 하나를 선택합니다. - 스타일시트: CSS 테이블 [sp_css]에 업로드된 내부 스타일시트를 추가합니다. 예: ng-sortable.min.css. 내부 스타일 시트는 CSS 필드에서 표준 CSS를 사용합니다.
- URL: 외부 스타일시트에 연결합니다. 외부 스타일시트를 사용하여 회사 웹 사이트 또는 기타 온라인 리소스와 동일한 CSS를 사용합니다.
스타일시트 테마와 연결할 내부 스타일시트입니다. CSS 파일 URL 테마와 연결할 외부 스타일시트의 URL입니다. 지연 로드 페이지 로드 시간을 개선하기 위해 CSS 포함을 비동기적으로 로드하는 옵션입니다. 이 옵션은 테마의 모든 CSS 포함에 대해 동일한 값으로 설정해야 합니다. 테마와 연결된 일부 CSS 포함에 대해서만 비동기 로드를 사용하도록 설정하는 것은 권장되지 않습니다.
주:지연 로드를 사용하도록 설정하는 것은 스타일이 지정되지 않은 콘텐츠가 깜박이는 포털에는 권장되지 않습니다.지연 로드가 활성화된 CSS 포함은 테마 기록의 지연 로드 CSS 포함 관련 목록에 나열됩니다.
RTL CSS 파일 URL 세션 언어가 히브리어와 같이 오른쪽에서 왼쪽으로 쓰는 언어인 경우 포털의 방향을 미러링하기 위한 외부 스타일 시트의 URL.
오른쪽에서 왼쪽으로 쓰는 언어 지원에 대한 자세한 내용은 을 참조하십시오 포털에서 오른쪽에서 왼쪽으로 쓰는 언어에 대한 스타일링.
- JavaScript 포함을 테마에 추가하려면 JS 포함 관련 목록에서 새로 만들기를 선택합니다.
- JS 포함 양식 필드를 완료하고 제출을 선택합니다.
표 3. JS 포함 양식 필드 필드 설명 표시 이름 JS 포함의 이름입니다. JS 포함을 테마와 연결하려면 이 이름을 기억하십시오. 애플리케이션 기록 범위입니다. 헤더 메뉴 기록과 소스 테이블의 애플리케이션 범위가 같아야 합니다. 소스 다음 옵션 중 하나를 선택합니다. - UI 스크립트: 업로드된 내부 UI 스크립트를 UI 스크립트 테이블 [sys_ui_script]에 추가합니다. UI 스크립트를 사용하면 클라이언트 측 JavaScript를 만들어 여러 위치에서 다시 사용할 수 있습니다. UI 스크립트에 대한 자세한 내용은 UI 스크립트를 참조하십시오.
- URL: 외부 JavaScript 파일에 연결합니다. 외부 URL을 사용하여 회사 웹 사이트 또는 기타 온라인 리소스와 동일한 JavaScript를 사용합니다.
UI 스크립트 또는 JS 파일 URL 소스 필드에서 선택한 옵션에 따라 내부 UI 스크립트 또는 JavaScript 파일 URL을 연결합니다. 업데이트 일시 JS 포함이 마지막으로 업데이트된 날짜 및 시간 패키지 JS가 포함하는 서비스 포털 패키지가 연결되어 있습니다. 예를 들어 서비스 포털 구성 페이지입니다. 이 필드는 기본적으로 채워집니다.