기본
사용
템플릿 초기화 코드
템플릿의 미리보기 환경과 몇 가지 기능을 위해 간단한 CSS 코드를 Import 해야합니다. 자세한 내용은 템플릿 초기화 코드 문서를 참고해 주세요.
스타일 선택
템플릿을 편집화면에서 열면 기본적으로 사용자가 사용중인 테마의 색상을 상속합니다. 다운 받은 템플릿 하나에만 색상을 입히려면 핵심 레이어에 클래스를 추가하고, 다수의 템플릿에 색상을 입히려면 더 상위 단계의 컨테이너 혹은 DOM 요소(예를들면 body 태그)에 스타일을 추가합니다.
편집화면의 색상 선택 GUI 콘트롤러는 템플릿이 가지고 있는 색상을 미리볼 수 있도록 도와주지만 DB에 저장하지는 않습니다. 사용 가능한 컬러 클래스는 다음과 같습니다.
- jetcraft-color-default
- jetcraft-color-violet
- jetcraft-color-blue
- jetcraft-color-purple
- jetcraft-color-olive
- jetcraft-color-orange
- jetcraft-color-magenta
- jetcraft-color-dark
그리고 jetcraft-no-radius 클래스는 템플릿에 사용된 대부분(필수 요소는 제외)의 둥근 모서리 효과를 없애줍니다. 기존 컬러를 수정하거나 새로운 사용자정의 컬러를 추가하려면 아래 링크를 참고하세요.
단일 템플릿에 클래스 지정
GUI 콘트롤러는 미리보기 이외에 템플릿에 어떠한 영향도 주지 않습니다
핵심 템플릿 레이어
핵심 레이어는 하나의 디렉토리를 통째로 복사하거나 아니면 개별로 복사해야 하는 경우도 있습니다.
핵심 레이어는 쉽게 찾을 수 있도록 레이어 이름 앞에 🚀 이모지가 붙어 있습니다. 디렉토리 전체가 핵심 레이어인 경우에는 디렉토리 레이어와 셋팅 레이어에만 이모지가 있습니다.
핵심 레이어가 여러 형태의 바리에이션을 가지고 있는 경우, 너무 많은 이모지가 혼란을 주므로 첫 번째 요소에만 붙어 있습니다.
이외의 다른 레이어는 모두 미리보기를 위한 데코레이션 입니다. 핵심 템플릿 레이어만 복사해서 다른 페이지나 템플릿에 붙여넣어 사용합니다.
핵심 레이어
템플릿의 구성
엘레멘터에서는 템플릿 레이어를 복사/붙이기 할 때 id 필드값이 사라지는 버그가 종종 있어 id 보다는 class 이름을 주로 사용합니다.
템플릿은 HTML Widget을 사용해 템플릿의 추가 CSS 및 자바스크립트 코드를 설정합니다. 보통 Settings - 템플릿 이름인 레이어가 그것입니다.
Custom CSS 필드는 HTML Widget에서 명시한 기본값을 덮어씌울 때 사용합니다.
재사용이 많은 템플릿의 설정을 페이지 전역에서 사용하려면 Settings 레이어를 네비게이터 최상단으로 옮긴 후, 재사용되고 있는 동일한 템플릿에서는 해당 레이어를 삭제합니다.
쉽게 말해, 한 페이지에 동일한 내용을 담은 Settings 레이어가 없도록 해야합니다. 보통 이러한 작업이 필요한 경우는 해당 템플릿 매뉴얼에서 상세히 다루고 있습니다.
버튼 템플릿의 Settings 레이어를 페이지 최상단으로 이동시킨 형태
템플릿 관리
업로드한 템플릿은 수정하지 않고, 필요한 핵심 레이어만 복사해서 원하는 곳에 붙여 넣습니다. 재사용이 많은 템플릿의 경우, Settings 레이어를 Global Widget으로 설정하면 편리합니다.
템플릿은 플러그인과 달리 별도의 업데이트가 필요하지 않도록 제작하고 있습니다. 이미 사용중인 템플릿에 아주 큰 문제가 있지 않은 이상 업데이트 없이 사용해도 됩니다.
템플릿을 효과적으로 사용하기 좋은 방법은 Global Widget을 잘 사용하는 것입니다. Settings 레이어는 해당 템플릿에 대한 자바스크립트와 CSS를 포함하고 있는데, 이 레이어를 글로벌 위젯으로 등록해 놓으면 엘리멘터 DB에 별도로 저장되기 때문에 원본을 삭제하고 업데이트 된 템플릿을 Import해도 문제가 없습니다.
그리고 기존 글로벌 위젯의 Settings 레이어 내용을 새로 업데이트 된 템플릿의 Settings 레이어의 코드로 대체하면 됩니다. 보통 업데이트는 Settings 레이어에 국한되고 위젯 자체는 변경점이 없습니다.
클래스 이름 변경 및 삭제
템플릿의 ID나 CSS Classes 필드에 명시한 클래스 이름은 변경하거나 삭제하면 템플릿이 제대로 표현되지 않습니다. 클래스 이름을 추가하는 것은 좋습니다.