Sesuaikan teg CSS untuk reka letak

Terdapat beberapa garis panduan yang perlu dipatuhi untuk menggunakan pereka bentuk templat dengan CSS templat blog anda.

Sediakan pemboleh ubah

Di bahagian <head> kod, anda perlu mempunyai sepasang teg <b:skin> </b:skin>.

Pengistiharan gaya CSS akan disisipkan antara teg itu, bersama-sama dengan nama pemboleh ubah yang menjadikan reka bentuk anda berfungsi dengan halaman Fon dan Warna.

Contoh

<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>

Kod CSS yang terkandung dalam teg ulasan /* dan */ tidak akan ditunjukkan di blog anda.

Senarai pemboleh ubah akan disediakan di sini, satu untuk setiap fon atau warna yang anda mahu boleh diedit daripada tab “Fon dan Warna”. Setiap pemboleh ubah perlu mempunyai maklumat yang dipaparkan dalam contoh di atas dan yang dihuraikan di sini:

name - Boleh mengandungi huruf atau nombor. Setiap nama dalam templat anda mestilah unik.
description - Tambahkan huraian untuk dipaparkan di bahagian “Fon dan Warna”.
type – "Font" atau "color."
default – Nilai lalai. Untuk warna, nilai ini haruslah kod warna perenambelasan, contohnya #FF0066. Untuk fon, nilai ini ialah senarai dalam bentuk font-style, font-weight, font-size, font-family.

Gunakan pemboleh ubah

Selepas pemboleh ubah disediakan, masukkan $variable_name dalam css b:skin apabila anda mahu menggunakan nilai pemboleh ubah.

Jenis pemboleh ubah

Pereka bentuk templat mempunyai sokongan pengeditan untuk set jenis pemboleh ubah CSS tertentu. Untuk menetapkan jenis pemboleh ubah:

pemboleh ubah warna akan menyediakan palet warna untuk pilihan dalam templat pereka bentuk.
pemboleh ubah fon akan menyediakan pilihan fon, dengan pilihan saiz dan ketebalan atau italik dalam pereka bentuk templat.

Dalam contoh di atas, terdapat pemboleh ubah dipanggil bgcolor yang ditetapkan kepada putih (#fff). Dalam kod yang seterusnya, tertera: background: $bgcolor. Kod ini akan menukar latar belakang kepada putih dan anda boleh mengubahnya di bahagian “Fon dan Warna”.

Nota: Anda tidak perlu membuat pemboleh ubah untuk jenis atribut CSS lain. Pemboleh ubah ini boleh dimasukkan dalam CSS, sama seperti kebiasaannya (sama seperti atribut margin: dan padding: dalam contoh di atas).

Ketahui lebih lanjut tentang CSS.