12 Kasım 2008 Çarşamba

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.

22 yorum:

  1. emegine saglik canim

    en kisa zamanda deneyecegim :)

    YanıtlaSil
  2. Gece bu isi sayende cogu kiside ögrenecek güzel anlatiyorsun, eline yüregine saglik.
    Ben sana birsey sormak istiyorum, blogumda yorumlarim yazinin altinda, birde arasinda cizgi var ama sanki diger yaziya aitmis gibi duruyor bunu sevmiyorum nasil degistirsem, bir fikrin var mi bu konuda?
    Sevgiler

    YanıtlaSil
  3. selam:)
    banner deneme mahiyetinde oldu aslında.
    daha farklı birşeyler tasarlıyorum.şimdilik dursun bakalım:))
    ben seçtiğim şablonun verilen kodunu benim kodu silip yapıştırıyorum.ama sürekli hata veriyor.gözattanda denemiştim önceden.o da olmadı.
    zaten diğer,boşalltığım sayfada deniyorum.ama hiçbiri olmadı.
    hatayı nerede yapıyor olabilirim?
    iyi geceler:))

    YanıtlaSil
  4. Birgünümü sadece bunun için ayıracagım :D

    YanıtlaSil
  5. oyy bu footer iyi oldu. ben kelebekgibi ye bir tavsiye verceğim.html ekle düzenle den çerçeveleri kaldır diyebilir yada bloguna göre görünmeyecek bir renk seçebilir ben çizgileri beyaz yaparak kaldırdım mesela..=)

    YanıtlaSil
  6. Oooo valla süper oldu :) Şablon değiştikçe hoşuma gidiyor. Artık kodların dilinden anlamaya başladım ne güzel. Teşekkürler canım öptüüm seni.

    YanıtlaSil
  7. eglenceli sarkiymis...tam sabah 6lik:)yavrukusla dans ediyoruz...
    ama postun yayinlanmamis..ohh iyiki reader var:)

    YanıtlaSil
  8. Tesekkürler Annekaz :) Deneyecegim bakalim.

    YanıtlaSil
  9. GeCecim,sidebar için hazırladığım görselleri ayrı ayrı yapmayı başaramadım.Defalarca okudum ama kafam basmadı bu aşamaya :) Ben de kod şeklinde ekledim artık :)

    Ayırdığın kodu eklerken nereye koymalıyız.mesela sağ ve sola ayrı ayrı menü başlığı ekleyeceğim,html düzenleden mi bulacağım yerlerini? yoksa gadget ekleden mi?

    svg

    YanıtlaSil
  10. GeCecim,sidebar için hazırladığım görselleri ayrı ayrı yapmayı başaramadım.Defalarca okudum ama kafam basmadı bu aşamaya :) Ben de kod şeklinde ekledim artık :)

    Ayırdığın kodu eklerken nereye koymalıyız.mesela sağ ve sola ayrı ayrı menü başlığı ekleyeceğim,html düzenleden mi bulacağım yerlerini? yoksa gadget ekleden mi?

    svg

    YanıtlaSil
  11. O kadar güzel anlatmışsın ki saatlerdir bloğundayım.Çok teşekkürler,sayende bloğumu değştirdim ama sidebarlar sorun yaşıyorum.İnşallah onu da düzeltebilirim.. :)

    YanıtlaSil
  12. çok teşekkürler gece, footer ekledim.
    sidebar uğraştım yapamadım.ama footer güzel oldu. sağol.

    YanıtlaSil
  13. Merhaba ge-ce,

    Buraya kadarki herşeyi anladım ve yaptım ama bu 5.derse gelince öylece kaldım.Bazı anlamadığım noktalar var.
    Lütfen bu yazı dizini devam ettir. çünkü konu içinde konu var.(bence tabi)
    1-sidebar için resim düzenleyicide resim yaptım diyorsunya işte o resim nasıl oluyorda Banner resminle aynı temalardan meydana gelebiliyor?İşte bunu nasıl yaptın?
    Böyle bir resim yapmayı öğrenmeliyim.Ama nereden?
    Tabiki ben herhengi bir resmi kullanacağım şimdilik deneme blogumda ve söylediklerini adım adım uygulayacağım.Kolay olmayacak ama biliyorumki başaracağım. Çok açık anlatıyorsun çünki.
    ****Bir konu daha varki sormak istiyorum.Yazılarımın altındaki yorum kutusu görünmüyor.Yani bırakılan yorumları görmek için yorum bölümüne tıklamak gerekiyor.Bu durumu nasıl düzelte bilirim.?? Seni çok yormak istemem ama lütfen zamanın varsa bu konudada açıklama yapabilirmisin:)

    Sevgilerimle* http://hadiyenineden.blogspot.com/

    YanıtlaSil
  14. Canım ya çok beceriklisin,senin yolunu takip edip denemeler yapıcam bakalım neler saçmalıycam,eline sağlık çok başarılı bir çalışma olmuş,sevgiler.

    YanıtlaSil
  15. ayyy ablacııım sayende kendi işimi az da olsa kendim halledebiliyorum valla tekrardan çoook teşekkür etmek istedim :)

    Sen bana yazılar arasına ekleyebilecegim güzel bir resim bulmuştun, hani böyle yeşil cicekli falan. Nerden bulabilirim ki ben öyle civil civil, yazılar arasına ekleyebilecegim resimler? Eger bir bilgin varsa paylaşabilirmisin benimle?

    YanıtlaSil
  16. Elinize, emeğinize sağlık..
    Yardımlarınız için çok teşekkürler.

    YanıtlaSil
  17. teşekkürler gece :)

    yaptım sayenizde..

    YanıtlaSil
  18. sizin sablon derslerinizi buldugumdan beri deliler gibi gecenin koruna kadar ugrasip duruyorum. Siteye günde belki 5 kez giriyorumdur. Çok güzel anlatmışsınız ama hala beceremediğim konular var :(.
    Ben bir de şu footer bölümündeki sütunlara çok özeniyorum. O nasıl yapılıyor?

    YanıtlaSil
  19. http://denizkayra.blogspot.com/10 Haziran 2010 20:06

    olmuyor olmuyor olmuyor bende yapamadım yeni tema lütfennnnnnnnn

    YanıtlaSil
  20. merhabalar GeCe nasilsiniz? sizi bikac gun once kesfettim. blog olusturmaya calisiyorum. size bi kac sorum olcak mail adresiniz nedir acaba ? bebisiniz dunyaya geldi hos geldi :)) saglikli sihhatli hayirli uzun omurler diliyorum...

    YanıtlaSil
  21. Merhaba ben dediğiniz o kodu arattım lakin bir türlü bulamadım sadece o da değil önemli ve sürekli sitelerde gördüğümüz o kodlar bende yok..Ne yapmalıyım acaba??Acaba şablonum mu bozuk?:((((

    YanıtlaSil
    Yanıtlar
    1. Bu yazıların tarihi oldukça eski yeni kodlardabiraz değişiklikler var fakat mantık aynı

      Sil