การใช้เครื่องมือออกแบบเทมเพลตกับ CSS ของเทมเพลตของบล็อกมีหลักเกณฑ์บางประการ
ตั้งค่าตัวแปร
ในส่วน <head> ของโค้ด จะต้องมีคู่แท็ก <b:skin> </b:skin>
การประกาศรูปแบบ CSS จะอยู่ระหว่างแท็กคู่นี้ พร้อมกับชื่อตัวแปรที่ทำให้การออกแบบของคุณใช้ได้กับหน้าแบบอักษรและสี
<head>
...
<b:skin>
<style type='text/css'>
/*
* คำจำกัดความตัวแปร:
* <Variable name='bgcolor' description='Page Background Color'
type='color' default='#fff'/>
*/
body {
background: $bgcolor;
margin: 0;
padding: 40px 20px;
}
</style>
</b:skin>
</head>โค้ด CSS ที่อยู่ระหว่างแท็กความคิดเห็น /* และ */ จะไม่แสดงในบล็อก
ส่วนนี้จะมีรายการตัวแปรอยู่ โดยตัวแปรหนึ่งใช้กับแบบอักษรหรือสีแต่ละรายการที่คุณต้องการให้แก้ไขได้จากแท็บ "แบบอักษรและสี" ตัวแปรแต่ละตัวต้องมีข้อมูลแบบที่แสดงในตัวอย่างข้างต้นซึ่งอธิบายได้ดังนี้
- name – มีตัวอักษรหรือตัวเลขได้ ชื่อแต่ละชื่อในเทมเพลตต้องไม่ซ้ำกัน
- description – เพิ่มคำอธิบายที่จะแสดงในส่วน "แบบอักษรและสี"
- type – "แบบอักษร" หรือ "สี"
- default – ค่าเริ่มต้น ในส่วนสี ค่านี้ควรเป็นรหัสสีเลขฐาน 16 เช่น #FF0066 ในส่วนแบบอักษร จะแสดงในรูปแบบแบบอักษร-รูปแบบ แบบอักษร-น้ำหนัก แบบอักษร-ขนาด แบบอักษร-ชุดแบบอักษร
ใช้ตัวแปร
หลังจากตั้งค่าตัวแปรแล้ว เมื่อต้องการใช้ค่าของตัวแปร ให้ใช้ $variable_name ใน css b:skin
เครื่องมือออกแบบเทมเพลตรองรับการแก้ไขสำหรับชุดตัวแปร CSS ตามประเภทที่ระบุ ในการตั้งประเภทของตัวแปร ให้ทำดังนี้
- ตัวแปรสีจะมีชุดสีที่ใช้เลือกในเครื่องมือออกแบบเทมเพลต
- ตัวแปรแบบอักษรจะมีแบบอักษรให้เลือก พร้อมตัวเลือกขนาด ตัวหนา หรือตัวเอียงในเครื่องมือออกแบบเทมเพลต
จากตัวอย่างข้างต้น มีตัวแปรที่เรียกว่า bgcolor ซึ่งตั้งไว้ให้เป็นสีขาว (#fff) ในโค้ดส่วนถัดไปเขียนว่า background: $bgcolor ซึ่งจะเปลี่ยนพื้นหลังเป็นสีขาวและคุณสามารถเปลี่ยนได้ในส่วน "แบบอักษรและสี"
หมายเหตุ: คุณไม่จำเป็นต้องสร้างตัวแปรสำหรับแอตทริบิวต์ CSS ประเภทอื่นๆ ตัวแปรเหล่านี้อาจรวมอยู่ใน CSS อย่างที่เคยเป็นมา (แบบแอตทริบิวต์ margin: และ padding: ในตัวอย่างข้างต้น)