Blog şablonunuzun CSS'siyle birlikte şablon tasarımcısını kullanmak için uygulanması gereken birkaç yönerge vardır.
Değişkenleri ayarlama
Kodunuzun <head> bölümünde, bir çift <b:skin> </b:skin> etiketiniz olmalıdır.
CSS stil ifadeleri, tasarımınızın Yazı Tipleri ve Renkler sayfasıyla çalışmasını sağlayan değişken adlarıyla birlikte bu etiketlerin arasına gelir.
<head>
...
<b:skin>
<style type='text/css'>
/*
* Değişken tanımları:
* <Variable name='bgcolor' description='Sayfa Arka Plan Rengi'
type='color' default='#fff'/>
*/
body {
background: $bgcolor;
margin: 0;
padding: 40px 20px;
}
</style>
</b:skin>
</head>/* ile */ açıklama etiketleri arasında yer alan CSS kodu blogunuzda gösterilmez.
Burada, "Yazı Tipleri ve Renkler" sekmesinde düzenlenebilmesini istediğiniz her yazı tipi ya da renk için bir tane olmak üzere, değişkenlerin bir listesi olacaktır. Her değişkenin, yukarıdaki örnekte gösterilen ve aşağıda açıklanan bilgilere sahip olması gereklidir:
- name - Harf veya sayı içerebilir. Şablonunuzdaki her adın benzersiz olması gerekir.
- description - "Yazı Tipleri ve Renkler" bölümünde görünecek bir açıklama ekleyin.
- type - "Font" veya "color".
- default - Varsayılan değerdir. Renkler için bunun onaltılık değerde bir renk kodu olması gerekir; örneğin: #FF0066. Yazı tipleri için şu şekilde bir liste olacaktır: font-style font-weight font-size font-family (yazı tipi stili, yazı tipi kalınlığı, yazı tipi boyutu, yazı tipi ailesi).
Değişkenleri kullanma
Değişkenler ayarlandıktan sonra, bir değişkenin değerini kullanmak istediğinizde b:skin css'sine $variable_name girin.
Şablon tasarımcısında, belirli CSS değişken türü grupları için düzenleme desteği sunulmaktadır. Değişkenin türünü belirlemek için:
- Renk değişkenleri, şablon tasarımcısında seçim için kullanılabilecek bir renk paleti sağlar.
- Yazı tipi değişkenleri, şablon tasarımcısında, boyut ve kalın/italik seçenekleriyle birlikte seçim için kullanılabilecek yazı tipleri sağlar.
Yukarıdaki örnekte, bgcolor adında ve beyaz renge (#fff) ayarlı bir değişken bulunmaktadır. Bir sonraki kod ise şöyledir: background: $bgcolor. Bu değişken, arka planı beyaza çevirir; rengi "Yazı Tipleri ve Renkler" bölümünde değiştirmeniz mümkündür.
Not: Diğer CSS özelliği türleri için değişken oluşturmanız gerekmez. Bunlar, CSS'ye normal şekilde dahil edilebilir (yukarıdaki örnekte yer alan margin: ve padding: özelliklerinde olduğu gibi).