스타일 선택
템플릿을 편집화면에서 열면 기본적으로 사용자가 사용중인 테마의 색상을 상속합니다. 다운 받은 템플릿 하나에만 색상을 입히려면 핵심 레이어에 클래스를 추가하고, 다수의 템플릿에 색상을 입히려면 더 상위 단계의 컨테이너 혹은 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
클래스는 템플릿에 사용된 대부분(필수 요소는 제외)의 둥근 모서리 효과를 없애줍니다. 기존 컬러를 수정하거나 새로운 사용자정의 컬러를 추가하려면 아래 링크를 참고하세요.
핵심 템플릿 레이어
핵심 레이어는 하나의 디렉토리를 통째로 복사하거나 아니면 개별로 복사해야 하는 경우도 있습니다.
핵심 레이어는 쉽게 찾을 수 있도록 레이어 이름 앞에 🚀 이모지가 붙어 있습니다. 디렉토리 전체가 핵심 레이어인 경우에는 디렉토리 레이어와 셋팅 레이어에만 이모지가 있습니다.
핵심 레이어가 여러 형태의 바리에이션을 가지고 있는 경우, 너무 많은 이모지가 혼란을 주므로 첫 번째 요소에만 붙어 있습니다.
이외의 다른 레이어는 모두 미리보기를 위한 데코레이션 입니다. 핵심 템플릿 레이어만 복사해서 다른 페이지나 템플릿에 붙여넣어 사용합니다.
템플릿의 구성
엘레멘터에서는 템플릿 레이어를 복사/붙이기 할 때 id
필드값이 사라지는 버그가 종종 있어 id
보다는 class
이름을 주로 사용합니다.
템플릿은 HTML Widget
을 사용해 템플릿의 추가 CSS 및 자바스크립트 코드를 설정합니다. 보통 Settings - 템플릿 이름
인 레이어가 그것입니다.
Custom CSS
필드는 HTML Widget
에서 명시한 기본값을 덮어씌울 때 사용합니다.
재사용이 많은 템플릿의 설정을 페이지 전역에서 사용하려면 Settings
레이어를 네비게이터 최상단으로 옮긴 후, 재사용되고 있는 동일한 템플릿에서는 해당 레이어를 삭제합니다.
쉽게 말해, 한 페이지에 동일한 내용을 담은 Settings 레이어가 없도록 해야합니다. 보통 이러한 작업이 필요한 경우는 해당 템플릿 매뉴얼에서 상세히 다루고 있습니다.
템플릿 관리
Jetcraft의 템플릿은 여러 형태의 위젯을 미리 볼 수 있도록 제작되었으므로 그 자체를 호출해서 사용하지 않고 필요한 핵심 레이어만 복사해서 원하는 곳에 붙여 넣습니다.
템플릿은 플러그인과 달리 별도의 업데이트가 필요하지 않도록 제작하고 있습니다. 이미 사용중인 템플릿에 아주 큰 문제가 있지 않은 이상 업데이트 없이 사용해도 됩니다.
템플릿의 수정이 필요하다면 엘리멘터에서 제공하는 컨트롤 패널, Custom CSS 등 여러분이 알고 있는 방법으로 자연스럽게 수정해도 좋습니다. 하지만 향후 템플릿의 업데이트를 잘 반영하고 싶거나 체계적인 관리를 원하다면 여기를 참고하세요.
클래스 이름 변경 및 삭제
템플릿의 ID
나 CSS Classes
필드에 명시한 클래스 이름은 변경하거나 삭제하면 템플릿이 제대로 표현되지 않습니다. 클래스 이름을 추가하는 것은 좋습니다.