WordPress Tema Yapısı 13: Sidebar (Kenar çubuğu) Stili
10 Kasım 2009 Yazan Bahattin Arıcı
Kategori Tema
Bu dersimizde index.php dosyasıyla işimiz yok. style.css dosyamızla çalışıyoruz. Kenar çubuğu üzerinde görüntü ile ilgili düzeltmelerimiz olacak.
1. Adım
.sidebar{} altına kodlarımızı yerleştiriyoruz.
.sidebar ul{
list-style-type: none;
margin: 0;
padding: 0 10px 0 10px;
}
Bu örneğimizde sidebar altındaki UL etiketlerinin stillerini değiştiriyoruz. Bu yaptığımız stilden sonra bu ve bunun altındaki tüm ul etiketleri yaptığımız stili devralacaktır.
Alt seviye UL etiketleri üstteki UL etiketinden stilleri devralır. örneğin ilkine kenarlık verirseniz alt seviyedeki de kenarlık alır.
padding: 0 10px 0 10px; ile sağ ve soldan 10piksel üst ve alttan 0 piksel boşluk bıraktırıyoruz.
Şimdi de alt ve üste boşluk verelim.
2. Adım
.sidebar ul{} altına kodları yerleştiriyoruz.
.sidebar ul li{
padding: 10px 0 10px 0;
}
Neden 10px UL etiketininin başındakilere eklemedim. Daha önceki ul etiketinde 10px sağ ve sol marj vardı. Bir defa daha yapmış olsaydık 20px bir boşluk olacaktı. Biz sadece arama ve takvim arasına 10px koyduk.
Eğer bu işlemi yaptıysanız biraz gariplik göreceksiniz. Yazı ve Sayfalarda da boşluk oldu. Her başlık li altında olduğu için başlıkların tamamı 10px boşluk yaptı. Devam ediyoruz.
3. Adım
.sidebar ul li{}; altına kodları yerleştirin.
.sidebar ul li h2{
font-family: Georgia, Sans-serif;
font-size: 14px;
}
Başlıklarımızın fontlarını ve büyüklüklerini değiştirdik.
4. Adım
.sidebar ul li h2 {}; altına ekliyoruz
.sidebar ul ul li{
padding: 0;
}
Az önce bahsettiğimiz kategori ve sayfa bağlantılarında oluşan boşlukları bu stille düzeltiriyoruz. Her tarafın boşluğunu 0 piksel yaptık. üst, alt, sağ ve sol.
Buradaki hatalarımızı veya ne için yaptığımızı sayfa kodlarından görebilirsiniz. Sayfa kodlarında başta bulunan <ul> ve <li> etiketlerinden kontrol edebilirsiniz.
Şimdi düzeltmiş olduk. Yanaştırma piksellirimiz sıfır oldu.
line-height: 24px; şimdi bu kodla satır aralarını bir miktar açalım. bunu tekrar .sidebar ul ul li{} kodu içine koyuyoruz.
Åžimdi internet explorer’a özgü olan arama formu ve bloklar arasındaki boÅŸluÄŸu alıyoruz.
body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p{
margin: 0;
padding: 0;
}
olan kodlarımızı
body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
margin: 0;
padding: 0;
}
olarak deÄŸiÅŸtiriyoruz.
5. Adım
Takvimimizi ekrana tam sığdıralım isterseniz.
Takvimle ilgili isim ve id etiketimiz ne idi? En iyisi sayfa kodlarından bakalım.
Table içindeki id etiketi wp-calender olan biçimi style.css içinde düzenliyoruz.
.sidebar ul ul li{}: altına kodlarımızı yerleştiriyoruz.
table#wp-calendar{
width: 100%;
}
Neden table#wp-calender kullanıyoruz? Çünkü div etiketinde görmüştük. # işareti id lerde . işareti class etiketlerinde kullanılıyordu. Tek olan id idi. Tekrarı yoktu. Sayfada bir defa kullanıyordu. class (.) işareti kendi tekrar edebiliyordu.
Biraz daha işi özelleştirelim mi? .sidebar ul li table#wp-calendar{}
Biraz daha mı? .sidebar ul li#calendar table#wp-calendar{}
Baktığınız zaman <li> alt listesi altında bulunuyor bunlar. Bu etiketleri alt alt göstermenin hiçbir sakıncası yok.
Genişliği %100 yaptık. Çünkü sidebar değiştiği zaman buna ayak uyduracak ve sidebar ı olduğu gibi kaplayacak.
Â
Kaynak: http://www.wpdesigner.com/2007/03/14/wp-theme-lesson-13-styling-sidebar/
güzel anlatım olmuş.teşekkür ederim