อัปเดตธีมเพื่อให้ผู้ใช้อื่นเลือกสไตล์ขององค์ประกอบ H1

คุณสามารถรีจิสเตอร์สไตล์สำหรับองค์ประกอบของคุณกับธีมนี้ เพื่อให้ผู้ใช้อื่นสามารถสลับระหว่างสไตล์ที่คุณระบุให้กับองค์ประกอบของคุณจากแผงข้อมูลการตั้งค่าหรือแท็บ สไตล์

ในการอัปเดตธีมเพื่อให้ผู้ใช้อื่นสามารถเลือกสไตล์ขององค์ประกอบ ให้ทำดังนี้
  1. เพิ่มสไตล์อื่นๆ ในไฟล์ design.css ขององค์ประกอบของคุณ ระบุคำนำหน้าของแต่ละสไตล์ด้วย styleClassName ที่รีจิสเตอร์ขององค์ประกอบตามที่กำหนดใน appinfo.json สำหรับองค์ประกอบนี้ คำนำหน้าดังกล่าวคือ h1-component

    ระบบได้เพิ่มสไตล์สองรายการ h1-component-gothic-style และ h1-component-courier-style

    เนื้อหาใหม่ของ design.css มีดังต่อไปนี้

    .h1-component-default-style .scs-component-content {
     font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
     font-size: 24px;
     color:red;
     font-weight: normal; }
    .h1-component-gothic-style .scs-component-content {
     font-family: "Century Gothic","CenturyGothic","AppleGothic",sans-serif;
     font-size: 32px;
     font-weight: bold; }
    .h1-component-courier-style .scs-component-content {
     font-family: "Courier";
     font-size: 32px;
     font-weight: bold; }
  2. รีจิสเตอร์สไตล์ของคุณในไฟล์ design.json ของธีม ไฟล์นี้จะอยู่ในธีมที่ไซต์ใช้งานอยู่ ดริลล์ดาวน์ไปยังไฟล์ของธีมในโฟลเดอร์การออกแบบ จากนั้นไปยังโฟลเดอร์ดีฟอลต์ และเพิ่มส่วนสำหรับองค์ประกอบของคุณไปยัง design.json

    ข้อความ ตัวหนา ถัดจากนี้เป็นตัวอย่างของข้อมูลที่จะเพิ่ม:

               "news-article": {
                        "styles": [{
                                          "name": "News Article 1",
                                          "class": "news-article-default-style"
                                          },
                        {
                                          "name": "News Article 2",
                                          "class": "news-article-style-1"
                                          }
                                   ]
               }, 
               "h1-component": { 
        "styles": [{ 
          "name": "Plain", 
          "class": "h1-component-default-style" 
       }, { 
                "name": "Courier", 
                "class": "h1-component-courier-style" 
       }, { "name": "Gothic", 
            "class": "h1-component-gothic-style" 
       }] 
      }
      },
      "componentIcons": {
              "scs-socialbar": {
                        "icons": [

ชื่อในสนิปเปท design.json ที่เพิ่ม ("Plain", "Courier", "Gothic") จะปรากฏในแผงข้อมูลการตั้งค่าสำหรับองค์ประกอบของคุณในแท็บสไตล์ดังด้านล่างนี้ เมื่อเลือกแล้ว จะมีผลกับสไตล์ ("h1-component-default-style", "h1-component-courier-style", "h1-component-gothic-style") ในองค์ประกอบของคุณตามลำดับ