ออกแบบไฟล์

มีสองไฟล์ที่ถือว่าเป็นไฟล์การออกแบบดีฟอลต์สำหรับธีม: 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" ได้ ซึ่งหมายความว่า เฉพาะชื่อ "Box" เท่านั้นที่จะปรากฏในลิสต์สำหรับแท็บ สไตล์ ของแผงข้อมูลการตั้งค่าสำหรับองค์ประกอบนั้น แทนที่จะเป็น "COMP_STYLE_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; }