디자인 파일

두 개의 파일 design.json 및 design.css가 테마의 기본 디자인 파일로 간주됩니다.

design.json은 구성요소의 스타일을 지정합니다.
design.css는 클래스 값(예: 색상 및 글꼴)에 대한 정의를 제공합니다.

이 파일은 테마 구조의 /designs/default/ 디렉토리에 있습니다.

design.json 파일

design.json 파일의 구조는 다음과 같습니다.

{
    "componentStyles": {
        "scs-image": {
            "styles": []
        },
        "scs-map": {
            "styles": []
        },
        "scs-title": {
            "styles": []
        },
        "scs-paragraph": {
            "styles": []
        },
        "scs-divider": {
            "styles": []
        },
        "scs-button": {
            "styles": []
        },
        "scs-app": {
            "styles": []
        },
        "scs-spacer": {
        },
        "scs-gallery": {
            "styles": []
        },
        "scs-youtube": {
            "styles": []
        },
        "scs-socialbar": {
            "styles": []
        },
        "scs-document": {
            "styles": []
        }
    }
}

각 "styles":[] 항목은 특정 구성요소에 대한 스타일 목록을 포함할 수 있습니다. 예를 들어, 제목 구성요소는 다음 기본 스타일을 제공합니다.

    "styles": [{
                    "name": "COMP_STYLE_FLAT",
                    "class": "scs-title-default-style"
               },
               {
                     "name": "COMP_STYLE_HIGHLIGHT",
                     "class": "scs-title-style-2"
               },
               {
                     "name": "COMP_STYLE_DIVIDER",
                     "class": "scs-title-style-3"
               }
    ]

주:

구성요소에 대한 사용자정의 스타일을 생성하여 design.json의 스타일에 매핑하는 경우 시스템에서 제공한 전체 이름을 사용할 필요가 없습니다. 사용할 문자열을 지정하면 됩니다. 예를 들어, 이름에 "COMP_STYLE_BOX" 대신 간단히 "Box"를 사용하십시오. 그러면 "COMP_STYLE_BOX" 대신 "Box" 이름만 해당 구성요소에 대한 설정 패널의 스타일 탭에 목록으로 나타납니다.

다음과 같이 이름 값은 사용자 인터페이스에 표시할 실제 단어에 매핑됩니다.

                "COMP_STYLE_FLAT": "Flat",
                "COMP_STYLE_HIGHLIGHT": "Highlight",
                "COMP_STYLE_DIVIDER": "Divider",

design.css 파일

design.css 파일은 클래스 값에 대한 정의를 제공합니다. 다음은 몇 가지 예제입니다.

.scs-title-default-style {
  color: #333333;
  display: block;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 24px;
  font-weight: normal; }

.scs-title-style-2 {
  background-color: #DEF300;
  color: #333333;
  font-family: adobe-clean, sans-serif;
  padding-top: 2em;
  padding-bottom: 2em; }

.scs-button-default-style .scs-button-button:hover {
  background: #f7f8f9;
  border: 1px solid #c4ced7;
  color: #0572ce;
  box-shadow: inset 0 1px 0 #f7f8f9;
  text-shadow: 0 1px 0 #f7f8f9; }

.scs-button-default-style .scs-button-button:active {
  background: #0572ce;
  border: 1px solid #0572ce;
  color: #fff;
  box-shadow: inset 0 1px 0 #0572ce;
  text-shadow: 0 1px 0 #0572ce; }