9 Kasım 2008 Pazar

# Background images # Banner

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.

14 yorum:

  1. gece, harikasın ,süper bilgiler,benim gibi öğrenmeye hevesliler için çok açıklayıcı.Teşekkürler canım.

    YanıtlaSil
  2. bir konu bu kadar mı güzel anlatılır..ellerine sağlık.

    YanıtlaSil
  3. Beklediğimiz yazı geldi:) Benim gibi sabırsızlar için erkenden başlamışsın yine yazmaya.teşekkürler.

    YanıtlaSil
  4. Emekleriniz icin tesekkurler.. oldukca acik anlatmissiniz..kolaylikla simdilik anlattiginiz kadar bir blog yapabildim:)

    YanıtlaSil
  5. çok sağolun.bloğumun bannerini değiştirebildim vesilenizle..

    YanıtlaSil
  6. Gerçektenler için bile o kadar güzel anlatmışsınız ki.emeğinize elinize sağlık.

    YanıtlaSil
  7. İlginiz için teşekkürler..

    #header {
    width: 1000px;
    margin: 0 auto;
    background:url(http://4.bp.blogspot.com/_YMHafToEbWo/SV6koSfOlRI/AAAAAAAAACw/JuxA7UyjbOE/S730/g%C3%BCl+ve+b%C3%BClb%C3%BCl.jpg) ;
    border: 1px solid $headerBgColor;
    color: $headerTextColor;
    padding: 0;
    font: $headerFont;
    }

    Kodu sizin anlattığınızla yola çıkarak düzenledim, resim önizlemede gözüktü fakat, genişlik ve yükseklik gene başlık alanı dışına çıkamadı..Resmin kendi ölçeğine müsade etmeyen bir kod var ama ne?

    Bahsettiğim sorunlu blog adresim bu:
    http://cennetasa34.blogspot.com/

    Şablonu aldığım siteden başka üç sütunlu şablon da almıştım, resimde sıkıntı çıkmadı onda..
    http://sankiyedim.blogspot.com/

    Sayenizde, şablon düzenleme kursu görüyoruz..Tekrar teşekkürler..(=

    YanıtlaSil
  8. Tüm anlatımlarınız için teşekkürler...Sizin derslernizden cesaret alarak şablonumu kendim düzenledim.Bu harika bir duygu yabancı dilim olamasına rağmen artık şablonlarda nereleri düzeltmem gerektiğini öğrendim sayenizde tüm emeklerniz için tekrar teşekkürler...
    Bloguma bakıp fikriniz beyan ederseniz çok mutlu olurum..
    http://kamilece.blogspot.com/

    YanıtlaSil
  9. Hem tebriğe hem teşekküre geldim..çok güzel şeyler buldum blogunda.Gece adı da çok hoşuma gitti.

    YanıtlaSil
  10. Öncelikle başarılı çalışmanızdan dolayı tebrik ederim..Ben bir acemi blogcu olarak üç gündür temamın başlık kısmını küçültemedim sanırım uzunluk 900 px fakat yükekliği yarı yarıya düşürmek istiyorum..header yazan kodlarda gördüğüm her px denedim olmadı..yardımcı olursanız memnun olurum..Saygılarımla..

    YanıtlaSil
    Yanıtlar
    1. Merhaba net birşey söylemek için şablonu görmem lazım ancak en basit yolu ufak bir görsel koymak. Dar ve uzun bir görsel koyarsanız header için o da ufalacaktır

      Sil
    2. Bu yorum yazar tarafından silindi.

      Sil
  11. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  12. Elimde çok güzel bulduğum bir tema var..Butonları her biri başka renkli fakat sub menü değil tek menü her biri..sub menü altına açılır menü yapabilir misiniz? yapabilirseniz bunu kullanmayı düşünüyorum..
    http://balsozler2.blogspot.com.tr/

    YanıtlaSil