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

Umuyorum ki bu son yazı olacak şablon düzenlemeyle ilgili. Bana mail atarak özel olarak bu konuya ilgi gösteren, anlamadıklarını soranlar oldu. Çok teşekkür ediyorum ilginiz için. Geçenlerede şablon yapımı ile başka kaynaklar olup olmadığına baktım. Elbette ki bir sürü kaynak var incelediğim kadrıyla benim yazdığım kadar açıklayıcı yazan pek yoktu (tabi gözümden kaçanlar da olabilir). Diğer yandan en basit anlatımda bile birçok yeni kavram ortaya çıkıyor hiç bilmeyenler için. Birçok kişi daha en başta "aman bunlar ne" diye korkup kaçıyor. Çaba göstermeye çekiniyor. Normal eğitim hayatından uzak kalmış, bu yüzden yeni şeyler öğrenme alışkanlığından zorunlu olarak vazgeçmiş kişiler tekrar başlangıç yapmakta zorlanıyor. Diğer yandan her türlü sorunuzu anlamadığınız yerleri sorabilirsiniz.

Buraya kadar tüm anlattığım ve anlatacaklarım illa ki hepsi birden olmak zorunda değil. İstediğiniz değişikliği tek başına yapabilirsiniz. Sadece banner yada sadece genişilik değişimi. Ya da sadece arkaplan. Size kalmış.

Bu yazıda belki de bayanların en hoşuna gidecek aşamayı yapacağız. Mevcut şablonunuza yine sadece bu eklemeleri de yapabilirsiniz.

Birinci aşamada sidebarlar için süsleme yapalım. Daha önceki yazılardan birinde sidebarların ve yazı alanların görünmez tablolar olduğunu söylemiştim. Her bir postu eklediğimiz mainbar ya da her bir gadget i eklediğimiz sidebar ayrı bir tablo içinde. Mantık olarak biz bu tabloya yine blogun tamamının arkaplanına eklediğimiz gibi bir resim ekleyeceğiz. Yani tablonun background'nu değiştireceğiz. Koyduğumuz resim küçük bir resim ise gadget'in (ya da postun) büyüklüğü kadar kendini tekrarlayacak. Ya da büyük bir resim koyup yine sabitleyebiliriz. Siteyi fazla ağırlaştırmamak adına küçük bir resim ekleyip bunun kendini tekrarlamasına izin vermeyeceğim ve bir noktaya sabitleyeceğim. Eğer yukarı sabitlersen başlık resmi, aşağı sabitlersen gadgetleri ayıran resim olarak gözükecek. Dar bir resim ise sol üstte yada diğer köşelere de sabitleyebilirim. Gördüğünüz gibi tamamen resme ve hayalgücünüze kalmış bişey.

Yeniden yaptığım şablon üzerinden devam edersem, sidebar için toplam genişliği 220 piksel ayarlamıştım. Şimdi yazımın başlığında 220 piksel genişliğinde bir süslü çerçeve şekilinde bir resim canlandırdım kafamda. Önce bu resmi fotoğraf düzenleyicilerde oluşturayım.


Temanın genel tarzına uygun olacak şekilde fonu aynı renk olan yanında bir kalp ve çerçeveli bir resim oluşturdum. Genişiliği 220 piksel ayarladım. Şimdi bu resmi koda ekleyeceğim. Kodda yer almayan background ifadesini .sidebar .widget, .main.widget { yazan yere ekleyeceğim. Kodda bu kısmı bulup içine eklediğim zaman hem sidebar da hem de main kısmının en başında resim gözüktü. Çünkü ikisi için ortak başlık atmış. Aynı resmi kullanmak isterseniz bu şekilde kalabilir. Ancak ben iki kısma farklı resimler ekleyeceğim için kodu kopyalayıp ikiye ayırdım.

.sidebar .widget {
background:url(http://gece.fezaneverd.com/pic/1.jpg) no-repeat center top;
min-height:53px;
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em; }

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em; }

Koda sidebar için arkaplanın url adresini verdim ve yanına no-repeat (tekrar etme), center (ortala) , top (yukarıda) komutlarını verdim. Bunu center-left-right (orta-sol-sağ) ile ve top-bottom (yukarı-aşağı) ile çeşitlendirebilirsiniz. Bundan başka resmin yarım yamalak kalmaması için minimum yüksekliği resmin yüksekliği olmasını söyleyen min-height:53px; ekledim.

Düzenlemelerden sonra sidebar resimleri yerini aldı. Sadece sidebar başlıklarının yerlerinin ayarlanması gerekiyor. Resmin çok üzerinde olduğundan okunması zorlaşıyor. Şimdi yukarıda yazdığım kodda görüldüğü üzere margin ve padding değerleri var. Bunlarla oynayarak yazıların yerlerini konumlandıracağım.

.sidebar .widget, {
background:url(http://gece.fezaneverd.com/pic/1.jpg) no-repeat center top;

min-height:53px;
border-bottom:1px dotted $bordercolor;
margin:10px 0 10px 0px;
padding:25px 0px 25px 10px; }

Benim resmim düzgün görünecek şekilde olması için bu değerleri girdim. Sizde kendi resminize uygun olması için deneyerek bu değerleri belirleyin. Sırasıyla yukarı-sağ-aşağı-sol yanlardan olan boşluklar bunlar.

Sidebar için düzenlediğim bu resimde kalpleri önce sola yapmıştım. Ancak yazının gözükmesi için padding değerlerini oynadığımda sadece başlığınkini değiştirme imkanı olmadığını gördüm bu alan için. Alttaki yazıların tamamı birden kayıyor ve görüntü hoş olmuyordu. Bu yüzden sağ tarafa kalpleri koyduğumda sorunsuzca ayarlayabildim.

Şimdi footer bölümüne resim ekleyelim. Kodda farklı renkle gösterdiğim ilaveleri yaptım. Yüksekliği eklemek özellikle önemli çünkü belirtmezseniz dar gözüküyor. Resmin yüksekliği kaç piksel ise bu değeri ekliyoruz.

#footer {
width:900px;
background:url(http://gece.fezaneverd.com/pic/5.jpg) no-repeat center;
height:100px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;}

Bu eklemeyi de yaptıktan sonra footer resmi eklenmiş oldu. Main bar ile arasında bir boşluk var ama bu boşluk şimdilik önemli değil. Arkaplanı değiştireceğim için bu boşluk kaybolacak. Resim olarak ben 900 piksel genişliğinde ve 100piksel yüksekliğinde bir resim hazırladım. Üzerine ismimi yazdım. Çiçekli böcekli de olabilir sizinki. Koda eklediğiniz yüksekliğin sizinkiyle tamamen aynı olduğuna dikkat edin.

Şimdi de post aralarına ve tarihin yanına koymak için resimler ayarlayalım. /* Posts başlığının altında post footer bölümüne

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
background:url(http://gece.fezaneverd.com/pic/post.jpg) no-repeat center bottom;

height:100px;

text-transform:uppercase;
letter-spacing:.1em; font: $postfooterfont;
line-height: 1.4em;}

ilavelerini yaptım. Burada yüksekliği resim yüksekliğinden daha fazla ayarlıyorum. Çünkü etiketler yazısı resmin üzerine geliyor ve iki kesişmeyecek şekilde bir değer olması lazım. Ben 100 piksele ayarladım. Tarih yanlarına da bir resim oluşturdum ve date-header bölümüne ekledim.

*/h2.date-header {
background:url(http://gece.fezaneverd.com/pic/saat.jpg) no-repeat left top;
height:50px;
padding-left: 100px;
padding-top: 20px;
margin:1.5em 0 .5em; }

Bu değişikliklerden sonra şablonumuz daha da sevimli oldu. bakmak için tıklayın.

Malesef bütün bunlar oldukça vakit aldı, arkaplanın yeniden düzenlenmesini anlatmak için vaktim kalmadı. Bir yazı daha uzayarak tema oluşturmayı tamamlayacağım. Bu derste anlatılanlar mevcut şablonuzu değiştirmeden de ilave edebileceğiniz şeyler. Umarım beğenirsiniz.