10 Kasım 2008 Pazartesi

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

Banner düzenlemesini yaptıktan sonra main wrapper (yazıların olduğu bölüm) ve sidebar için ayarlamalar yapalım. Kullandığım renklere uyumlu olacak şekilde yazı arkaplan rengini değiştireceğim. Bannerde çoğunlukla yer alan rengin hex kodunu fotoğraf programından aldım ve ikinci yazıda background:#ffffff; yazdığım yere ekledim. Yani beyaz fonu değiştirmiş olduk.

Diğer yandan yazının başlıkları ve yazılar, alanın hemen sınırından başlamıştı. Yanlardan biraz boşluk olursa göze daha hoş görünecek ve daha okunaklı olacaktır. Kenar boşluklarını ayarlamak için kodlarda iki ifade vardır. Bunlardan birincisi margin diğeri ise padding kelimesi. İkisi de temel olarak sol-sağ yukarı-aşağı boşluklarını ayarlasa da fark hangi objenin kaydırıldığındadır. Margin kodu tabloların boşluklarını, padding ise tablo içinde yer alan objelerin (yazı+resim) kenar boşluklarını ayarlar. Her bir postun sınırlarını görmediğimiz tablolar halinde olduğunu düşünün. Bu tabloların birbirleriyle olan (ve sidebar ile olan) mesafelerini margin belirler. Kodda yer alan margin ve padding değerlerini değiştirdiğimizde şablonda bazı değişiklikler gözlenecektir.

Şimdi main-wrapper bölümüne (postların gözükeceği bölüm) şu ilaveyi yapalım. Böylece yazılar sol ve sağdan 10 piksel içerde olacak. Üst ve alt için ise sıfır dedim. Çünkü zaten kodun başka yerinde o mesafe ayarlanmış durumda.

#main-wrapper { width: 680px;
background:#CCC8B1;
padding:0 10px 0 10px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Bu düzenlemeden sonra yukarıdaki resimde görüldüğü gibi ( tıklayıp büyük halini görebilirsiniz) yazılar sağ ve soldan bir miktar içerde başlamakta. Ancak ilave ettiğim bu 20 piksel nedeniyle, sidebar+main alanı 900 pikseli aştı ve sidebar yan tarafa sığamayıp aşağıya kaydı.

Bu yüzden uzunluklarını yeniden ayarlamam gerekecek ancak önce sidebar için de padding ayarı yapalım, çünkü onda da yazılar çok sınırda. Sidebarı da yine sağ ve soldan 10 ar piksel içeri alabiliriz. Ya da sadece sağdan yapıp, (bu şablonda solunda mainbar olduğu için) sol tarafını sıfır bırakabiliriz. Çünkü zaten main için sağ tarafta boşluk bırakmıştık.

Ancak bana kalırsa göz yormaması göze hoş görünmesi için herbir bölümün birbirinden bağımsız olması daha iyidir. Aksi takdirde yazılar içiçe geçmiş gibi görünüyor. Hele bir de ziyaretçinin tarayıcısında (ie , firefox vs) yazı boyutu normalden büyük ise çok daha karmaşık görünecektir. Bana göre 10 piksel bile az görünüyor (ben en az 20 yapardım) ama daha başka ayarlamalar yapacağım için 10 pikselde bırakalım. Sidebar'ın da padiing ayarlarını aşağıdaki kodda olduğu gibi düzenleyelim.

#sidebar-wrapper {
width: 220px;
background:#CCC8B1;
padding:0 10px 0 10px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}

Sidebar içine de padding değerlerini ekledikten sonra, şablondaki değişiklikleri kaydedip görüntülerseniz, yukardaki resimde görülen kesişmenin daha da arttığını görürsünüz. Şimdi aşağıdaki sidebarı yukarı almam lazım. Bunun için eklediğim 40 pikseli bir yerlerden çıkarmam ya da genişliği arttırmam gerekir. Yine oranın bozulmaması için her bir bölümden eklediğim kadar genişliği çıkarayım.

#main-wrapper { width: 660px;
background:#CCC8B1;
padding:0 10px 0 10px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

#sidebar-wrapper { width: 200px;
background:#CCC8B1;
padding:0 10px 0 10px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}

Main-wrapper genişliğini 680 den 660 a indirdim ve sidebarı da 220 den 200 piksele indirdim. Şimdi sidebar eski yerinde.


Bu yazıda son olarak banner ile yazılar arasında, arkaplanın gözükmesine izin veren boşluğu kaldıralım. İsterseniz kaldırılmayabilir tabi. Aynı şekilde bu boşluktan sidebar ile main bar arasında da oluşturabilirsiniz. Bunu da birinci yazıda söylemiştim. Ben bannerin etrafına arkaplandaki kırmızıyla geçiş olması açısından kırmızı bir gölge oluşturmuştum. Şimdi bu boşluğu kaldırsam da kırmızı çizgi gözükecek. Aşağıdaki kodda 10piksel yazan yeri sıfır yaptım ve aralarındaki boşluk kalkmış oldu.

#header-wrapper {
width:900px;
margin:0 auto 0px;
border:0px solid $bordercolor; }

Ancak bu değişikliği yapınca gözüme hoş gözükmedi ben yine boşluğu muhafaza ettim sonradan. Bu ayarlamalar tamamen bannere, sizin seçiminize ve renklere bağlı.

Bu yazıda bitirceğimi düşünmüştüm ama daha bir miktar düzenleme var. Aslında buraya kadar, birçok bedava tema veren sitelerde sunulan örnekler seviyesinde bir şablon oluşturduk. Birçok tema hoş bir banner, geniş bir yazı alanı ve uyumlu renklerden ibaret. Ancak ben işi daha da öteye götürerek, daha da süslemeyi anlatacağım.

Geriye kalan şeyler yazı aralarına yazı başlıklarına ve sidebara resim ekleme, footer'ı düzenleme ve benim hoşuma gitmeyen arkaplanın yarım yamalak görüntüsünü düzenleme.

Genelde yazılarımız sidebarlardan daha uzundur. Yaptığım örneğe de bakarsanız, yazı arkaplanı için seçtiğim şu sarımsı yeşilimsi renk sidebar bitince bitiyor. (Aşağıdaki resimde okla belirttiğim bölge) Blog aşağı doğru uzadıkça kalınlığı değişik gözükecek. Bu yüzden arkaplanın tamamının aynı renkte görünmesi için kırmızı arkaplan desenini yeniden ayarlayacağım.

Bir sonraki yazıda görüşmek üzere.

Not: Yorumlarıyla hep yanımda olan sürekli ziyaretçilerimin bu yazı dizisinden sıkıldığı izlenimini ediniyorum. Zira birkaç yazıdır yorum sayıları azaldı. Diğer yandan blogumun ziyaretçi oranı iki katına çıktı (ki benim için oldukça yüksek bir rakam). Okuyan ve faydalanan birileri olduğu umuduyla hevesim kaçmış olsa da bu işe devam edeceğim.

Sesini çıkarmadan okuyan ve faydalanan kesim!! Yorumlarınızla bizi şenlendiriniz efendim.

19 yorum:

  1. yok yok hevesin kaçmasın gece, merak ve ilgi ile okuyoruz, ben okuyorum yani, açıkçası sen bunları böyle detaylı anlatmasan çoğumuz bilmeyiz bunları, gerçekten emek ve vakit harcayıp, uzun ve detaylı anlattığın için çok teşekkürler, eminim bu uyarından sonra yorumlar artacaktır :) sevgiler.

    YanıtlaSil
  2. Valla yine çok süper anlatmışsın.Okuyup yaptıkça çok daha bir hevesleniyorum. Az önce bitti benim blogumda. Sen kimselere bakma devam böyle çok iyi. Gerçi diğer paylaştıklarında güzel şeyler. Hepsinin yeri ve zamanını sen daha iyi bilirsin. Gerçekten de yaralanıyoruz sevabın çok çok büyüüük.öpüyorum.

    YanıtlaSil
  3. Anlattiklarini uygulamaya calismaktan yorum yazmaya firsat olmuyor ki:) Tesekkurler..

    YanıtlaSil
  4. Sesini çıkarmadan okuyan ve faydalanan kesim!! Yorumlarınızla bizi şenlendiriniz efendim.

    BEN ONLARDAN BİRİ OLARAK ,İCRAATA GEÇMEK İÇİN YAZI DİZİSİNİN SONUNU BEKLİYORUM.
    birde canım 3 sütunlu şablon istiyorum ama diğer linkler çalışmıyor.onu nasıl halledebilirimki?

    sayfayı dümdüz yaptım .sonucu bekliyorum.
    vallahi...
    headerim bile yokk...
    onuda kendim hazırlamayı düşünüyorum.
    becerebilirsem...

    YanıtlaSil
  5. 3 sutunlu şablon için bir link vermiştim onu kullandım ben nesi çalışmıyor anlamadım.

    YanıtlaSil
  6. Gece şekeri sen neler yapmışsın gelmeyeli faydalı bilgilerini saklıyorum işime yararlar sağol canım. Tatile gittim geldim de ben sen farkında değilsin tabi :)

    YanıtlaSil
  7. selam.
    kodu yüklüyorum.hata veriyor.xlm hatası diye.hangisiniş denediysem olmadı malesef:((

    YanıtlaSil
  8. gece cim ben on marifetten asya yaren. canım benim derdim ne biliyormusn. bunu kim bilir kim bilir diye düşündüm bilse bilse bunu gece bilir dedim. :))okudum bir kaç yazını ama benim istediğim arka planlar böle değil maalesef. ben anlatayımda belki yardımcı olabilirsin zahmet olmzsa tabi....

    şimdi hani şablonlarımın iki bölme ya bizim ben üç bölme istiyorum her iki taratfa kategorilerimizin yazdığı gibi dar bir alan ortada geniş bir yazı yayınlama bölmümü olus istiyorum.birde zeminim tamamını beyaz istiyorum. tam sayfa öle zemin başka arka plan başka renk olsun istemiyorum. seninki gibi tam zemin beyaz,üç bölme olsun

    ben bunu nasıl yaparım canım.anlatana kadar yapsam daha kola olur diye düşünürsen eğer şifremi verebilirim. bana dönersen çok sevinirim

    YanıtlaSil
  9. Geç keşfetmenin utancıyla merhaba diyorum,bu konuları google da arata okuya epey öğrendim blogger için ama ben wordpresse taşındım orda bu değişiklikleri css den yapıyoruz sanırım benim sorum şu,3 kolonlu temamda sağ ve sol sidebarı yan duvarlara yaslayıp orta bölümü genişletebilirmiyim?ve headeride aynen büyütmek istiyorum,
    yani nasıl ölçeklemeliyim?

    YanıtlaSil
  10. merhabaBU faydalı yazı dizisi için teşekkürler. Woedpress ile yaptığım sitede tema editlerken karşılaştığım bir sorun var. Sizin son görselde anlattığınız sorun. Sayfaların gösterminde sidebar yüksekliğinin kısa kalması konusu. Bu konudaki yazının kalanın okumama rahmen anlayamadım. www.technopit.com/bou linkinde gördüğün gibi referanslara gittiğinizde sidebar kısa kalıyor. Bunu nasıl düzeltebilriim.

    alpay

    YanıtlaSil
  11. merhabalar;
    bence de yazmayı bırakmayın. ben çok mutlu oldum yazıları görünce.zira nasıl yapacağımı hiç bilemiyordum.şimdi uygulamaya başlayacağım..çok faydalı oldu gerçekten çok teşekkür ederim..sevgilerrr

    YanıtlaSil
  12. Merhaba Ge-ce,

    Yeni bloğum nine'de 4.dersin bir kısmını uyguladım.Kalanına yarın bakacağım inşallah.Bir bakarmısın lütfen.Her yeri farklı renk yaptımki daha iyi anlaşılabilsin.

    Çok iyi gidiyor dersler.
    Teşekkürler

    Sevgilerimle*

    YanıtlaSil
  13. bloğunuz güzel hazırlanmış emeğinize sağlık,benim gibi yeni ve acemi olanlar için sagolun

    YanıtlaSil
  14. Sen bir meleksin. Çok Teşekkürler..

    YanıtlaSil
  15. GeCe eline sağlık anlatımlar içinde okla gösterdiğin resimdeki sorun sidebar uzunluğu durumu arka planın ortaya cıkması bunu anlatmamışsın blogumda bi bunu yapamadım yahu. Yardımcı olursan sevınırım...

    YanıtlaSil
  16. meraba benimde size bi sorum vardı bende blog açmak istiyorum ama bu konuda hiç bir bilgim yok biraz yardımcı olursanız çok sevinirim yada sitenizde bununla ilgili bilgi varsa ordanda bakabilirm ben baktım ama bulamadım cevap verirseniz çok memnun olurum iyi geceler

    YanıtlaSil
  17. Ellerinize saglik. cok harika anlatmisiniz. cok faydalandim. Devamini dielriz. Masallah.

    YanıtlaSil
  18. çoook teşekkür ediyorum gerçekten bilgilendirici oluyor..

    YanıtlaSil
  19. ben birkaç gündür faydalanmaya çalışıyorum emeğine sağlık çok güzel bir yazı dizisi hazırlamışsın :)

    YanıtlaSil