• Bahattin Arıcı
  • 0 views
  • 10 Kasım 2009
  • 0
  •  

WordPress Tema Yapısı 12: Yazılarımızın (Post) Biçimi

Bu yazımızda yazılarımızın stilleri ile ilgili çalışmalar yapıyoruz.

1. Adım

Style.css dosyamıza, isterseniz body{} bilgilerinin altına kodlarımızı ekliyoruz.

body, h1, h2, h3, h4, h5, h6, blockquote, p{
margin: 0;
padding: 0;
}

dikkat ettiyseniz burda sadece margin:0; kullandık. Bizim kullandığımız değerin margin: 0 0 0 0; olması gerekirdi. Böyle yazmamızın nedeni margindeki tüm değerlerin aynı yani sıfır olacağıdır. Bu yüzden dört defa aynı sayıları girmiyoruz. Bu olay padding içinde geçerli. Tek sıfır yazmamız diğer değerlerinde sıfır olacağı gösteriyor.

2. Adım

Body{} içeriğinin altına aşağıdaki kodları yerleştiriyoruz.

h1{
font-family: Georgia, Sans-serif;
font-size: 24px;
padding: 0 0 10px 0;
}

  • font-family: Georgia, Sans-seriff; H1 başlığının fontunu Arial den Georgia fontuna değiştir. Georgia yoksa Sans-serif fontuna bak.
  • font-size: 24px; Sayfamızda kullandığımız font büyüklüğü 12px. Bunu da body{} içinde gösteriyoruz. Body{} içinde  H1 ve H2 için bilgi yoktu. Bunları kendi içlerinde ayarlıyoruz.
  • padding: 0 0 10px 0; 10 pixel üstten boşluk bıraktırıyoruz. Bloğumuzun başlığı ve sloganı için.

wordpress-tema-yapisi-12-01

3. Adım

Aşağıdaki kodları container{} altına kaydedin. Değişiklikleri görmek için her koddan sonra tarayıcınızı yenileyin.

.post{
padding: 10px 0 10px 0;
}

class ismi post olan DIV etiketinizin üstten ve alttan 10piksel boşluk bıraktırıyor.

.post h2{
font-family: Georgia, Sans-serif;
font-size: 18px;
}

Genel bir kural değildir. post DIV içindeki h2 ler sadece bundan etkilenir. Sidebar kısmındaki h2 bundan etkilenmez.

.entry{
line-height: 18px;
}

DIV içindeki her satırın arasındaki boşluk arttırıldı.

4. Adım

a:hover{} altına yerleştirilecektir.

p{
padding: 10px 0 0 0;
}

<p> Paragraf etiketi üstten 10piksel olacak şekilde ayarlandı.

5. Adım

.entry{} altına yerleştirilecektir.

p.postmetadata{
border-top: 1px solid #ccc;
margin: 10px 0 0 0;
}

index.php içinde bir <p> paragraf etiketinin class ismini postmedata vermiştik. Paragraf etiketininde stilleri DIV ile aynıdır. border (kenarlık), margin (marj), padding (boşluk verme), background (zemin) ikisinde de aynıdır.

postmedata için üstten 10 piksel boşluk veriyoruz ve gri bir çizgi çektiriyoruz.

border-top ile sadece üst tarafa çizgi çektiriyoruz. border-left olsa idi sadece sola kenarlık yaptırabilirdik. Border ile beraber top, bottom, left ve right kullanılabilir. Örneğin border: 1px solid #ccc; Dört tarafa da 1piksellik gri kenarlık atar.

6. Adım

postmetada{} altına aşağıdaki kodları yerleştirin.

.navigation{
padding: 10px 0 0 0;
font-size: 14px;
font-weight: bold;
line-height: 18px;
}

Sonraki sayfa ve Önceki Sayfa stilleri içindir. Sırayla;

Üstten 10piksel boşluk bırak.

Font büyüklüğünü 14piksel yap.

Yazı tiplerini kalınlaştır.

Satır yüksekliğini 18piksel yap.

 

Kaynak: http://www.wpdesigner.com/2007/03/13/wp-theme-lesson-12-post-formatting-and-miscellaneous/

Yazar: Bahattin Arıcı #administrator

1979 doğumluyum. Ortaokuldan beri bilgisayarla uğraşıyorum. Grafik, sunucu, donanım, overclock, pc modifikasyon, linux, network, web tasarım, programlama, bilgisayar formatlama :o) gibi işleri severek özenerek bezenerek yaparım. Potansiyel müşterilerimin dikkatine...
Tüm Yazılarına Git

YORUM YAP


BU YAZIYA 0 YORUM YAPILMIŞ