ขั้นตอนที่ 12: กำหนดสไตล์ที่กำหนดเอง

ระบบจะใช้งานองค์ประกอบที่คุณสร้างเช่นเดียวกับองค์ประกอบอื่นในไฟล์ design.json และ design.css ในธีมที่ใช้สำหรับไซต์ของคุณ

หากต้องการเพิ่มสไตล์ของคุณเองสำหรับองค์ประกอบที่กำหนด ให้ยืนยันค่า id ที่คุณใช้เมื่อคุณรีจิสเตอร์องค์ประกอบของคุณ ในไฟล์ appinfo.json ค่านี้คือ "id": "hello-world"

ใช้ค่าดังกล่าวเพื่อแก้ไขไฟล์ design.json ของธีมและเพิ่มสไตล์ใหม่ที่คุณต้องการรองรับกับ id นั้นๆ ตัวอย่างเช่น แก้ไขไฟล์ /designs/default/design.json ในธีมของคุณ และเพิ่มรหัสนี้

"hello-world": {
  "styles": [{
    "name": "Plain",
    "class": "hello-world-default-style"
  },
  {
    "name": "Gothic",
    "class": "hello-world-gothic-style"
  }]
},

หากคุณเปิดใช้งานแผงข้อมูลการตั้งค่ากับองค์ประกอบของคุณ คุณจะเห็น ธรรมดา (ดีฟอลต์) และ กอทิก เป็นสองตัวเลือกที่แสดงในแท็บสไตล์ อย่างไรก็ตาม การสลับระหว่างตัวเลือกเหล่านี้จะไม่ส่งผลใดๆ จนกว่าคุณจะกำหนดคลาสของสไตล์ที่แสดงรายการในไฟล์ design.css ตามจริง

แก้ไขไฟล์ design.css ของธีมและเพิ่มในคลาสของสไตล์ชีสแบบคาสเคดของสไตล์ของคุณ ตัวอย่างเช่น แก้ไขไฟล์ /designs/default/design.css ในธีมของคุณ และเพิ่มรหัสนี้

.hello-world-default-style .scs-component-content {
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 24px;
  font-weight: normal; }

.hello-world-gothic-style .scs-component-content {
  font-family: "Century Gothic","CenturyGothic","AppleGothic",sans-serif; 
  font-size: 32px;
  font-weight: bold; }

บันทึกและซิงโครไนซ์ไฟล์ของคุณในเซิร์ฟเวอร์อินสแตนซ์ Oracle Content Management