การกำหนดสไตล์เฉพาะองค์ประกอบ

องค์ประกอบรูปภาพ

องค์ประกอบรูปภาพมีโครงสร้างของคลาส CSS ดังต่อไปนี้ใต้คลาส scs-component-content:

scs-image-container
scs-image-link
scs-image-image
scs-image-caption

คลาส scs-image-image มีผลกับแท็ก <img> นั้นเอง คลาส scs-image-caption ใช้เพื่อกำหนดสไตล์ของคำอธิบาย ถ้ามีคำอธิบายอยู่

คลาส scs-image-link จะปรากฏต่อเมื่อรูปภาพมีลิงค์เชื่อมโยงอยู่ โดยทั่วไปแล้ว ทั้งคลาสนี้และคลาส scs-image-container ไม่ต้องการสไตล์แบบกำหนดเอง

โดยปกติ คำอธิบายรูปภาพจะแสดงผลเป็นการซ้อนทับแบบกึ่งโปร่งใสที่พาดขวางด้านล่างของรูปภาพ

.scs-image .scs-image-caption {
 position: absolute;
 left: 0px;
 bottom: 0px;
 right: 0px;
 background-color: rgba(0, 0, 0, 0.54);
 padding: 0.5em;
 color: #FFFFFF;
}

ถ้าต้องการวางคำอธิบายไว้ที่ด้านบนของรูปภาพและเปลี่ยนสี ให้เพิ่มสไตล์สำหรับองค์ประกอบรูปภาพในไฟล์ design.json จากนั้นกำหนด CSS ให้กับสไตล์ในไฟล์ design.css

.scs-image-style-17 .scs-image-caption {
 position: absolute;
 top: 0px;
 height: 35px;
 font-weight: bold;
 background-color: rgba(122, 213, 256, 0.54);
 color: #515151;
}

องค์ประกอบปุ่ม

องค์ประกอบปุ่มมีโครงสร้างของคลาสต่อไปนี้

scs-button-button
    scs-button-text

คลาส scs-button-button เป็น <div> แบบคลิกได้ ซึ่งกำหนดสไตล์ให้เหมือนกับปุ่ม คลาส scs-button-text ใช้เพื่อกำหนดสไตล์ของข้อความภายในปุ่ม

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

.design-style .scs-button-button {
 background-image: linear-gradient(
  to top, #E3E7E9 0%, #E7EBED 50%, #F1F3F3 100%);
 border: 1px solid #c4ced7;
 color: #000000;
}

.design-style .scs-button-button:hover {
background: #f7f8f9;
border: 1px solid #c4ced7;
 color: #0572ce;
}

.design-style .scs-button-button:active {
background: #0572ce;
border: 1px solid #0572ce;
color: #ffffff;
}

.scs-button-style-4 .scs-button-button {
 background-image: radial-gradient(
  red, yellow, green
 );
border: 1px solid #c4ced7;
color: #000000;
}

.scs-button-style-4 .scs-button-button:hover {
 background: #f7f8f9;
 border: 1px solid #c4ced7;
 color: #0572ce;
}

.scs-button-style-4 .scs-button-button:active {
 background: #0572ce;
 border: 1px solid #0572ce;
 color: #ffffff;
}

เอกสาร

องค์ประกอบเอกสารมีโครงสร้างของคลาสต่อไปนี้

scs-document-container
 scs-document-cap
  scs-document-title
  scs-document-desc

คลาส scs-document-container จะแรปโปรแกรมดูเอกสาร และปกติไม่มีการกำหนดสไตล์

แกลเลอรี่

องค์ประกอบแกลเลอรี่มีเพียงหนึ่งคลาสที่แรปองค์ประกอบตัวเลื่อน JSSOR ที่รองรับอยู่

scs-gallery-container 

ตัวเลื่อน JSSOR จะใช้หลายคลาสที่คุณสามารถกำหนดสไตล์ได้ด้วย

jssorb14 (navigator)
jssora02l (left arrow)
jssora02r (right arrow)
jssort07 (thumbnails)

กริดของแกลเลอรี่

คลาสที่ใช้สำหรับองค์ประกอบกริดของแกลเลอรี่จะอ้างอิงเลย์เอาต์และการครอบตัดที่เลือกไว้ในแผงข้อมูล การตั้งค่า:

scs-gallerygrid-container scs-gallerygrid-layout
  scs-gallerygrid-cell
    scs-image (multiple)

ค่าของ layout ได้แก่ ยืด ครอบตัด ปรับให้พอดี หรือโฟลว์ ขึ้นอยู่กับการตั้งค่าการครอบตัดและเลย์เอาต์ที่เลือกสำหรับกริดของแกลเลอรี่

คลาส scs-gallerygrid-cell จะปรากฏเฉพาะสำหรับเลย์เอาต์ของคอลัมน์เท่านั้น

แถบข้อมูลสังคม

องค์ประกอบแถบโซเชียลมีโครงสร้างของคลาสต่อไปนี้

scs-socialbar-container
  scs-socialbar-icon

คลาส scs-socialbar-icon มีผลกับแต่ละแท็ก <img> ในแถบโซเชียล

ย่อหน้า

องค์ประกอบย่อหน้ามีเพียงหนึ่งคลาสที่แรปข้อความย่อหน้าจริง

scs-paragraph-text 

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

.scs-paragraph-style-7 {
 font-size: 24px;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: 700;
 padding: .3em;
 color: #000000;
 background: #666666;
 text-shadow: 0px 1px 1px #ffffff;
}

หรือถ้าคุณต้องการเพิ่มสีสัน ให้ใช้วิธีแบบในตัวอย่างถัดไปนี้

.scs-paragraph-style-8 {
 padding: 20px;
 margin: 10px;
 background: #ff0030;
 color: #fff;
 font-size: 21px;
 font-weight: bold;
 line-height: 1.3em;
 border: 2px dashed #fff;
 border-radius: 10px;
 box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
 text-shadow: -1px -1px #aa3030;
 font-weight: normal;
}

ชื่อ

องค์ประกอบชื่อมีเพียงหนึ่งคลาสที่แรปข้อความจริง

scs-title-text 

แผนที่

องค์ประกอบแผนที่มีเพียงหนึ่งคลาสที่แรปการแสดงผลแผนที่

scs-map-content

คลาสนี้มักไม่มีการกำหนดสไตล์

องค์ประกอบในระบบที่กำหนดเอง

องค์ประกอบในระบบที่กำหนดเองมีเพียงหนึ่งคลาสที่แรปองค์ประกอบจริง

scs-custom-component-wrapper 

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

องค์ประกอบระยะไกลที่กำหนดเอง

องค์ประกอบระยะไกลที่กำหนดเองมีเพียงหนึ่งคลาสที่แรป iframe

scs-app-iframe-wrapper

นอกเหนือจากการใช้สไตล์ CSS ที่กำหนดในองค์ประกอบระยะไกลที่กำหนดเองแล้ว คุณยังสามารถใช้ Sites SDK เพื่อดึงข้อมูลไฟล์ design.css จากไซต์ที่เป็นโฮสต์

// fetch current theme design from host site and then add it to the page
SitesSDK.getSiteProperty('theme',function(data){
 // check if we got a url back
 if ( data.url && typeof data.url === 'string' ) {
  if ( data.url !== '') {
   // theme is loaded, so dynamically inject theme
   SitesSDK.Utils.addSiteThemeDesign(data.url);
  }
 }
});

ด้วยวิธีนี้ คุณสามารถทำให้องค์ประกอบของคุณรับค่าการกำหนดสไตล์จากสไตล์ของโฮสต์

ตัวคั่น

ถึงจะไม่มีคลาสเฉพาะขององค์ประกอบสำหรับองค์ประกอบตัวคั่น แต่แท็ก <hr> นั้นสามารถกำหนดสไตล์ได้

ตัวอย่างเช่น คุณสามารถสร้างตัวคั่นที่เป็นเส้นประได้

.design-style .scs-divider hr {
border-top: 1px dotted #333333;
}

วิดีโอ, YouTube, ตัวควบคุมพื้นที่ว่าง

ไม่มีคลาสเฉพาะขององค์ประกอบสำหรับองค์ประกอบวิดีโอ, YouTube หรือตัวควบคุมพื้นที่ว่าง