Kendi Şablonumu Kendim Yaptım (Yazı Dizisi 3)

Şimdi arkaplana uygun bir banner ayarlayalım bunun için kendimiz de oluşturabiliriz ya da beğendiğimiz bir resmi uyarlayabiliriz. Şimdilik deneme amaçlı şu resmi kullanacağım. Ancak resmin boyutları 600'e 450 piksel imiş. Header genişliğini 900 piksel ayarlamıştım. Bu yüzden resmin küçük kalmaması için yeniden düzenleyeceğim. İsterseniz resmi yeniden boyutlandırarark genişliğini 900'e çıkarabilirsiniz. Ancak ben bunu kullanmayacağım. Genelde yeniden boyutlandırma işini resmi daha küçültmek için kullanırız. Daha büyütmeye çalıştığımızda resmin kalitesi düşer.



Bu yüzden resmin yanlarındaki düz rengi biraz çoğaltarak, uzatacağım. Bunun için fotoğraf programında uzunluğu 900 yüksekliği ise bu resimle aynı olacak şekilde boş bir sayfa açıyorum. Resmi tam ortasına koyup, yanlarındaki boşlukları zemindeki renkle dolduruyorum. Bu işlemi kova yardımıyla yapabilirsiniz ya da düz bir bölümden bir parça kopyala yapıştır deyip beyaz zemini doldurabilirsiniz.

İşte resmin yeniden düzenlenmiş hali.

Bu resim üzerinde yapımcıya ait çeşitli yazılar var ama ben şimdilik gösterme amaçlı kullanıyorum. Daha ilerde tamamen kendim oluşturduğum bannerleri de göstereceğim.

Banneri site şablonuna eklemek için iki yöntem mevcuttur. Birincisi herkesin bildiği kontol panelinden banner ekleme, diğeri ise banneri doğrudan koda yazıp arkaplan olarak gösterme. Doğrudan koda yazılmasıyla sonradan eklenmesi arasındaki tek fark blog adının ve tanımının gözüküp gözükmemesi durumu. Mesela Anne Kaz'ın bannerinde blog adını resim üzerine yazmıştık ve kod içine banneri eklediğimde blog adı tekrar gözükmekteydi. Onun gözükmesini engelleme şansı olmuyor. Diğer yandan eğer kontrol panelinden resim ekler gibi eklerseniz isterseniz blog adının yerine seçeneğini işaretleyerek onun gözükmesine engel oluyorsunuz.

Şimdi yukarıda kullanacağım bannerde ise ortada isim yazılması için bir alan olduğundan koda ekleyebilirim ve blog adı kendiliğinden gözükebilir. Tabi daha süslü püslü fontlarla resmin üzerinde de doğrudan yazılabilir.Başlangıçta seçmiş olduğum minima şablonunda görüldüğü gibi banner kısmı iç içe iki çerçeveden oluşuyor. Ve bu iki çerçeve arasında 5 piksel boşluk var. Çerçevelerin görünmemesi ve bu 5 piksel farkı kaldırmak için kodda şu değişiklikleri yapacağım. Aşağıda renkli yazdığım yerler kodda değiştirdiğim alanları ifade ediyor.

#header-wrapper {
width:900px;

margin:0 auto 10px;
border:0px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Bu değişiklikleri kaydedip bakarsanız banner için çerçeveler ortadan kalkmış olacak. Şimdi koda banneri ekleyelim. #header içine background olarak resmin url adresini yazıyoruz. Daha önce dediğim gibi resmi depoladığınız yerin adresi olacak ben kendi adıma ait hesaba koydum. Kodun yanına "no-repeat" yazarak kendini tekrar etmememesi ve "center" diyerek ortaya yerleşmesi emrini verdim. Bir de resmin tamamının gözükmesi için banner resminin yüksekliği neyse (benimki 452 pikseldi) height:452px; kodunu ekledim.

#header {
margin: 0px;
border: 0px solid $bordercolor;
background:url(http://gece.fezaneverd.com/pic/Untitled - 1.jpg) no-repeat center ;
height:452px;
text-align: center;
color:$pagetitlecolor;

Bu değişikliklerden sonra sayfamın görüntüsü şöyle:

Görüldüğü gibi banner üzerinde blogun adı gözüküyor. Öncelikle blogun adını resimde beyaz kalbin ortasına gelecek şekilde ayarlayacağız. Sonra da banner ile yazıların olduğu bölüm arasında görünen bölümü yok edip birleştireceğiz. aslında bu şekilde de kalabilir, fena gözükmüyor. Şimdi Gecedesign1 yazısını ortalamak için header içinde

#header h1 {
margin:5px 5px 0;
padding:200px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

değişikliğini yaptım. h1 başlığı temsil eder. Resmimin yüksekliği 450 piksel civarı olduğu için 200piksel padding ortalanır gibime geldi ve oldu da. Padding kodu koyulan nesnenin sağ, sol , yukarı ve aşağı bölümlerden ne kadar içerde olacağını belirlememize yardım eder. Daha sonra post yazı alanlarını düzenlerken padding ve margin arasındaki farkları ve uygulamaları göreceğiz . Şimdi başlığın rengini de yazı stili ve renklerden temaya uyumlu hale getirelim ve sitemin son hali işte bu.
Bir sonraki yazıda postların ve sidebarların olduğu bölümü makyajlayıp güzelleştireceğiz. Sona yaklaşıyoruz az kaldı. Görüşmek üzere herkese kolay gelsin.