Eski temamı bu yazımda paylaşmak istiyordum ama geçtiğimiz haftayı oldukça yoğun geçirdim. Bu yüzden de temayı herkesin kullanabileceği şekilde düzenleyemedim. Söz veriyorum bir önceki tema ile birlikte daha önce hazırlamış olduğum başka bir temayı da paylaşacağım ;)
Bu yazımda bana e-posta yolu ile sıklıkla sorulan sorulara ışık tutabileceğini düşündüğüm bazı konulara değinip, en sonunda White Freedom temasının hikayesini anlatacağım.
Şablon İle Tema Arasındaki Fark Nedir?
İlk olarak sürekli karıştırılan bu iki kelimenin ne ifade ettiğini anlatmak istiyorum. İngilizcede Layout şeklinde geçen şablon kelimesi kullanmış olduğunuz temanın iskeletini ifade eder. Tema ise bu iskeletin CSS ile giydirilmiş halidir. Aşağıda klasik bir şablon örneği görüyorsunuz.
Tema Nasıl Yapılır?
Bir tema geliştirebilmek için en azından CSS ve HTML kodlama bilgisi gereklidir. Bu işe başlarken eğer tasarımcı yanınız zayıfsa mecburen varolan temaları kendi kullandığınız sisteme çevirmeyle başlarsınız. Zaten piyasada bulunan bir çok Blogger temasının WordPress temasından çevrilme olduğu gerçeği bu durumu çok iyi izah ediyor. Çünkü üzerinde çok fazla düşünmeden, sadece gördüğünüz şeyi uygulamak çok daha kolay ve hızlıdır. Fakat bu kolaylık sizi aldatmasın, zira ışık, renk, tonlama vs. gibi bilgilere sahip olmadan nasıl portre çizemiyorsak; CSS ve HTML bilgisine sahip olmadan da gördüğümüz bir temayı kendi sisteminize çeviremezsiniz. Üstelik her iki durumda da deneyim oldukça ön plana çıkar. Tabi içerik sistemlerinin farklı olmasının getirdiği ekstra bir zorluk da vardır. Çünkü her ne kadar blog içerik sistemlerinin görüntüde yapı olarak bir farkı bulunmasa da kullandıkları dil çok farklı olabiliyor.
Varolan bir temayı çevirmeyi başarabilen kişiler kullandıkları içerik sisteminin yapısı ile az çok haşır neşir olmuştur. Başta ezbere yapılan şeyler zamanla anlaşılır ve daha çok merak duyulur. Zamanla kazanılan deneyim size çok daha hızlı tema çevirme becerisi kazandırır. Bir noktadan sonra ise kendinize ait bir tema oluşturma isteği baskın olmaya başlar, fakat bu durumda sizi frenleyecek en önemli eksiklik tasarımcı yönünüzün zayıf olmasıdır. Tasarım konusu da kendi içinde dallara ayrılabilir. Eğer hayal ettiğiniz tema Smashing Magazine'in kısa bir süre önce dağıttığı Notepad Chaos benzeri bir tema değilse sizi en çok zorlayacak nokta renk uyumu ve başlık (header) bölgesidir. Renk uyumu denildiğinde basit bir konu anlaşılmasın, zira temaları beğenme sebebinizin altında yatan en büyük nedenlerden biridir renk uyumu.
Eğer tasarım aşamasını da bir şekilde aşarsanız, sıra, çizdiğiniz temayı internet tarayıcılarının anlayabileceği şekilde HTML dili ile anlamlandırıp, üzerine CSS örtüsünü örtmeye gelmiştir. Bu aşamada, eğer kullanmış olduğunuz içerik sisteminin alt yapısına hakim değilseniz ve de HTML dili ile hala büyük sorunlar yaşıyorsanız CSS kodları ile temanızı canlandırmanın keyfine varmak oldukça zaman alabilir.
Tarayıcı Uyumsuzlukları
Gelelim White Freedom Temasına

Arayışla geçen bir kaç günün ardından bir sahur yemeğinden sonra kafamı yastığa koyduğumda o aradığım ışık bir şimşek gibi çaktı ve kafamda siyah beyaz bir şekilde temayı çizmeye başladım. Zaten kim renkli düşünebiliyor ki :) Hatta kafamdaki çizdiğim şeyi unutmamak için yatağımdan fırlayıp not almaya başladım. Işık kaynağı tükenene kadar düşündükten sonra ise derin bir uykuya daldım.
Uyandıktan sonra beni 4-5 gün sürecek bir çalışmanın içine girdim :)
Notlar
- İsim logoyu MS Paint programında hazırladım. Zaten MS Paint'te Mona Lisa çizildiğini gördükten sonra saygım kat ve kat arttı :)
- CSS kodları için uzun süredir kullandığım Free CSS Box programını kullandım. Bu programı eburhan'ın yazısı ile kullanmaya başlamıştım.
- Yazı ikonlarını iconspedia sitesinden buldum. İkonların sahibi DryIcons imiş. Sonunda içime sinen bir ikon seti bulabildim.
- Temanın düzgün görüntülendiği tarayıcılar: Mozilla Firefox 1.5+, Internet Explorer 5.5+, Opera 9 (daha alt sürümleri test etmedim), Google Chrome.
- Temamdaki tüm id ve class gibi isimlendirmeleri özellikle İngilizce yaptım. İngilizce isimlendirme benim daha kolayıma geliyor ve daha akılda kalıcı oluyor, ayrıca yarın bugün dağıtımını yaparsam daha geniş kitlelere ulaşabilir düşüncesindeyim.
Yazıyı daha fazla uzatmadan temayı yayınladıktan sonra hiç bir art niyet olmadan düşüncelerini paylaşan ve önerilerde bulunan arkadaşlarıma teşekkür ederim.
Aslında grafik kullanmakta kendini biraz kısıtlamışsın gibi.
YanıtlayınSilBunun dışında IE6 konusuna değinmen,diğer bir çok şeyden bahsetmek çok iyi olmuş.
Kolay gelsin.
Tema ie8 ile uyumlumu?
YanıtlayınSilBenim temada ie8de bazı sorunlar çıktı.Bide şu 32*32 resimlerderin şeffaflığı çalışmadı.İe8 final sürümü çıktığında inşallah sorunsuz görüntüleniyor yoksa bide ie8 uyumlu tema bul.Hemde Blogger..
Tema geliştiricilerin en çok hata aldığı browserın ie olduğu kesin burda erburhanın sunduğu ietester programı var eminim işinizi görecektir.Ayrıca yeni tema sade ve güzel olmuş
YanıtlayınSilseninde dediğin gibi html ve css den anlamak gerek öğrenmesi kolay ama şu üşengeçlik yokmu hazır yemek :D o yüzden pek işimede gelmiyor ben stilistim yaratıcılık varda bilgi yok bilgi olsa SİTELİST de olurdum :D
YanıtlayınSilGerçekten de yazının başında anlattığına tümden katılıyorum. Gerçi ben henüz sıfırdan kendi temamı yapamadım hazır temadan yola çıkarak ha bire orasını burasını değiştirerek ortaya birşey çıkarmaya çalışıyorum (nerdeyse komple değiştirmiş oluyorum). Çünkü bugün beğendiğimi yarın beğenmiyebiliyorum ve üzerinde sürekli değişiklik yada eklemeler yapıyorum. Vakit bulur bulmaz en kısa zamanda sıfırdan kendime ait bir tema geliştirmem lazım artık diye düşünüyorum.
YanıtlayınSilAslında kullandığın hazır şablonu komple değiştirmek (örneğin tek sidebar'lı ise 3-4 sidebarlı yapmak..vs) sıfırdan yapmak gibi değil mi? :)
Kafamı yastığa koyduğumda sitemin neresinde neyi yaparken uyuyakalıyorum ya da kalkıyorum pc'yi açıp uyguluyorum...hastalık bu gerçekten.. :)
Yazınız daki bilgiler için teşekkürler. Yine bana epeyce fikirler verdiniz sağolun.
İlk yorumu bu sefer ben yakaladım sanırım!
@rss_ems,
YanıtlayınSilSenin blogu görünce neden grafik azlığına değindiğini anladım, o ne cıvıl cıvı temadır öyle. Bundan sonra takibindeyim ;)
@gokhans,
Temam IE 8 Beta ile 99% uyumlu ;)
@merwick,
Zaten bu işe ufak ufak değişiklikler ile başlanıyor. Eğer sen de yaterince uğraşırsan bir gün istediğin temayı yapabilirsin. Yalnız ilk 5 kişi içinden sonuncu yorum senin :)
Bence peşinden eklemek istediğin resim ile ilk resmi bir resim işleme programında birleştirip tek seferde çağır :)
YanıtlayınSilPeş peşe sıralı bir biçimde arka plana resim nasıl çağrılıyor bilmiyorum. Şimdiye kadar da hiç ihtiyacım olmamıştı. Sen Google amcaya bir sor bakalım ;)
@Altuğ,
YanıtlayınSilBen temanın header arka planındaki resmi uygularken baştan sona olması için body içinde çağırmıştım. Sen arka plana başka bir resim koymak istediğini söyleseydin sana daha açıklayıcı bir cevap verirdim. Meğer sen header resmi yüzünden arka plana istediğin resmi koyamıyordun :) Baştan deseydin ya :)
Bu arada arka plan resmini mümkünse daha da ufalt.
Mrb. hocam ben Blog'umu özelleştirmeye çalışıyorum birçok kısmını deşiştirdim ama bir noktada kitlendim kaldım. konu sonlarındaki ''Sonraki Kayıt Ana Sayfa Önceki Kayıt ''seçeneklerinin yerine ikon koymaya çalışıyorum. Bunun için ikonlarımı resim sitesine yükledim ve adresleri resimli link koduna yerleştirdim ama şablonun neresine ekleyeceğimi bilmiyorum. Birçok deneme yaptım ama olmadı. Bu konuda yardımcı olabilirsen cok sevınırım. Teşekkürler.
YanıtlayınSil@kolonto,
YanıtlayınSilMerhaba, aşağıdaki yazı ve yorumlarını okuduğunda bir çok soruna cevap bulacaksınız.
Blogger Şablonunu Düzenleme (Güncellendi)