Untuk menggunakan desainer template dengan CSS template blog Anda, ada beberapa panduan yang harus diikuti.
Menyiapkan variabel
Pada bagian <head> kode, Anda akan perlu memiliki sepasang tag <b:skin> </b:skin>.
Deklarasi gaya CSS akan diletakkan di antara tag tersebut, bersama dengan nama-nama variabel yang membuat desain Anda berfungsi dengan halaman Font dan Warna.
<head>
...
<b:skin>
<style type='text/css'>
/*
* Variable definitions:
* <Variable name='bgcolor' description='Page Background Color'
type='color' default='#fff'/>
*/
body {
background: $bgcolor;
margin: 0;
padding: 40px 20px;
}
</style>
</b:skin>
</head>Kode CSS yang diapit oleh tag komentar /* dan */ tidak akan ditampilkan di blog Anda.
Akan terdapat daftar variabel di sini, satu untuk setiap font atau warna yang Anda inginkan agar dapat diedit dari tab "Font dan Warna". Setiap variabel perlu memiliki informasi sebagaimana yang ditampilkan dalam contoh di atas dan dijelaskan berikut ini:
- name - Dapat terdiri dari huruf atau angka. Setiap nama dalam template Anda harus unik.
- description - Tambahkan deskripsi untuk ditampilkan pada bagian "Font dan Warna".
- type - "Font" atau "warna".
- default - Nilai default. Warna harus berupa kode warna heksadesimal, misalnya #FF0066. Font akan berupa daftar bentuk font-style font-weight font-size font-family (gaya font, ketebalan font, ukuran font, jenis font).
Menggunakan variabel
Setelah variabel ditetapkan, bila Anda ingin menggunakan nilai variabel, masukkan $variable_name dalam css b:skin.
Perancang template memiliki dukungan pengeditan untuk kumpulan tertentu dari jenis variabel CSS. Untuk menyetel jenis variabel:
- variabel warna akan menyediakan palet warna untuk pilihan di perancang template.
- variabel font akan menyediakan pilihan font, dengan opsi ukuran dan ketebalan atau kemiringan, di perancang template.
Dalam contoh di atas, terdapat variabel yang disebut bgcolor, yang disetel menjadi putih (#fff). Dalam kode berikutnya, dinyatakan: background: $bgcolor. Ini akan mengganti latar belakang menjadi putih, dan Anda dapat mengubahnya pada bagian "Font dan Warna".
Catatan: Anda tidak perlu membuat variabel untuk jenis atribut CSS lain. Ini dapat disertakan dalam CSS sebagaimana biasanya (seperti pada atribut margin: dan padding: dalam contoh di atas).