
Merhaba, sitemizden daha iyi yararlanabilmek için kayıt olunuz. Kayıt olmak için tıklayınız.. Şifrenizi Unuttuysanız yeni şifre istemek için tıklayınız..
Forumu daha iyi görüntüleyebilmek için firefox, safari, IE8 kullanınız. Foruma başlarken lütfen kuralları okuyunuz. Dersler ve arama size daha çabuk yardımcı olacaktır.
![]() |
|
|
LinkBack | Seçenekler | Stil |
|
|
#1 |
|
Ünvanı: Hakan ERSU Kayıt Tarihi: Mar 2008 Bulunduğu yer: Denizli Mesajlar: 421 Durum: Offline Tecrübe Puanı: 10 |
Merhaba daha önce bu konuda bir yazı yazmış olsamda bazı sorunlardan dolayı yazıya ait resimler gitti.Şu sıralar kendi site tasarımımla uğraşırken basit bir örneklemeyide paylaşmak istedim.Daha geniş ve umarımki anlaşılır bir anlatım yapmaya çalıştım.Elimden geldiğince basit tutmaya çalışmış olsamda hatalarım ve eksiklerim için affola eksik veya yanlış kısımları bildirirseniz sevimirim.
Joomla 1.5 ile joomla temaları oldukça esnek bir yapıya sahip oldu.Bu sayede tema tasarımcıları ve kullanıcılar istedikleri yapıya daha kolay ulaşmaya başladı.Ancak bu konuda yeterli kaynak olmadığı kaanatindeyim (Yada benim rastladığım pek fazla yok).Bu yüzden basit bir tema nasıl hazırlanır buna bir göz atalım. 1-XHTML TASARIM (test) 2-JOOMLA'YA GEÇİŞ 1-XHTML TASARIM Yukarda belirttiğim gibi oldukça basit bir yapı tercih edeceğim ve bunun için ps’de şu şekilde bir şablon oluşturdum. ![]() Bu tasarımla minimal seviyede grafik kullanarak sizlere tasarımdan çok joomla temaları konusunda bilgi vermeyi amaçlayacağım. Ancak yinede başlangıç olarak XHTML/CSS tasarımla ilgili bölümlere de yer vereceğim. NOT: Tasarımda browser sorunları göz ardı edilecektir.Sadece firefox ve Google Chrome ile test edilmiştir. 1.1- İlk html dosyamızı oluşturarak başlayalım.Ben yazı boyunca editör olarak notepad++ ve aptana kullanacağım. HTML PHP- Kodu:
1.2- Şimdi basit bir klasör yapısı oluşturalım.Kullanacağım yapı temalarınız için uygulanması gereken bir yapı değil siz dilediğiniz yapıyı oluşturabilirsiniz. ![]() 1.3- Şimdi css klasörümüz içine genel.css adında bir css dosyası oluşturalım ve html temamızdaki head bölümüne bağlayalım. HTML PHP- Kodu:
1.4- Artık sitemizi kodlamaya başlayabiliriz.İlk olarak ana html yapımızı oluşturalım.index.html dosyamıza aşağıdaki gibi bir yapı oluşturuyorum. HTML PHP- Kodu:
Görüldüğü gibi oldukça basit bir yapıya sahip. 1.5- Oluşturduğum katmanlarla ilgili işlemlere başlamadan önce css dosyam içine css reset olarak bilinen css sıfırlama yapılarından birini ekliyorum.Bu sayede birçok gereksiz kod yazımından ve sinir bozan sorunlardan kurtulmuş olacağız.Birçok css sıfırlama yapısı olsada ben aşağıdaki yapıyı kullanmaktayım. CSS PHP- Kodu:
1.5 Ek- Arkaplanm rengimizi vererek baslik katmanımıza geçelim. CSS PHP- Kodu:
1.6 Bu aşamada kafanızın karışmaması için yuvarlak kenarlar için kullanacağım yöntemi açıklamayacağım ama yöntemi hazır olarak html.it adresindeki bu makaleden alacağım.Aslında bu yöntem yanlış hatırlamıyorsam ilk olarak google tarafından gmail'de kullanıldı. Aşağıdaki css kodlarını bu makaleden genel.css dosyama ekliyorum. CSS PHP- Kodu:
1.7 Yukardaki aşamayı tamamladıktan sonra başlık katmanımız içine yuvarlak kenarlarımızı oluşturalım. HTML PHP- Kodu:
1.8 Yine baslik katmanımıza benzer bir şekilde menu katmanımızı oluşturalım. CSS PHP- Kodu:
HTML PHP- Kodu:
1.9 Artık icerik(içeriğimizin yerleşeceği bölüm.) ve sag-tasiyici(menüler ve modüllerin gelebileceği bölüm.) katmanlarına geçebiliriz. İcerik ve sagtasiyici katmanlarımızda baslik ve menu’ye benzer şekilde olacak yani yuvarlak kenarlar için uygun bir yapı kullanılacak kodların ne kadar benzediğini sizde görebilirsiniz. CSS PHP- Kodu:
HTML PHP- Kodu:
Gördüğünüz gibi sag-tasiyici ve icerik katmanlarında menu ve baslik katmanlarında kullandığımız yapının aynısını kullandık ancak fazladan icerik katmanımızın sola yapışık olmasın için float:left; parametresini ve sag tasiyici katmanı içince float:right;parametresini kullandık.Bunun yanında bu iki katmanda bu halleriyle ortalı durmayacaklari için icerik-tasiyici katmanımızı kullandık ve baslik ve menu katmanlarında olduğu gibi magrin:0 auto; değeriyle bu katmanımızı ortaladık. CSS PHP- Kodu:
Joomla Tema tasarımı Bölüm-1’de basit bir XHTML/CSS tema nasıl hazırlanır bunu gördük.Temamızı basit tutmamızın amacı joomla temalarına geçiş kısmını daha anlaşılabilir kılmaktı ve umarım bunu aşağıda başarmış olurum. 2-JOOMLA İÇİN TEMAMIZI YAPILANDIRALIM. 2.1- Ön Hazırlık : Daha önce XHTML/CSS temamızı oluşturmuştuk.Şimdi bunu templates klasörü içine taşıyalım (ben ya_temademo adını verdim ve templates klasörü içerisine bu klasörü taşıdım)ve index.html olarak adlandırdığımız dosyamızı index.php olarak adlandıralım.(Daha sonra boş bir index.html dosyası oluşturmakta yarar vardır ancak şuan bu konuya değinmiyorum).Böylece temamız için ön yapılandırma çalışması bitmiş durumda. ![]() 2.2-Joomla’ya kendimizi tanıtalım : Temamızın kullanılabilir olması için joomla’nın ilk olarak temamızı tanıması gerekiyor.Yani bir nevi kimlik belgesi sunar gibi joomla’ya kendimizi tanıtmalıyız.Bunun için joomla temaları templateDetails.xml dosyasını kullanır.Bizde hemen tema klasörümüz içine templateDetails.xml dosyamızı oluşturalım.(Veya rhuk_milkyway joomla varsayılan templateDetails.xml dosyasını alarak üzerinde değişiklikler yapabiliriz.Bu temayı yine joomla templates klasörü içerisinde bulabilirsiniz.) Joomla templateDetails.xml dosyası 3 ana yapıdan oluşur.Bunlar birincisi tema bilgilerinin bulunduğu kısım ,ikincisi dosya yolları , üçüncü ve en önemlilerinden birisi temada bulunacak pozisyonların tanımlandığı kısım. 1.Bölüm PHP- Kodu:
2.Bölüm PHP- Kodu:
Aslında files yani dosyalarımızın ve dizinlerin sıralanacağı bölümde tüm dosyalarının sıralanması gerekir ancak tema yapım aşamasında her şeyi baştan planlamadıysanız ki her zaman değişiklikler gerekir bu işlemi sona bırakmakta yarar vardır.Ancak yukarda belirttiğim gibi burda bütün dosyalarımızı yollarıyla birlikte berlitmmemiz gerekir ki bu özellikle temanızın otomatik yüklenmesi esnasında gerekli bir bölümdür. 3.Bölüm PHP- Kodu:
Bu bölümde pozisyonlarımızı tanımlıyoruz.Çoğu kişi klasik İngilizce isimler kullanılması gerektiğini düşünsede bu pozisyonlara dilediğiniz isimleri verebilirsiniz.Aslında buna benzer olarak temaların hepsinde template.css olması gerektiğini düşünen arkadaşlar varsa da aslında buna da gerek yoktur dilediğiniz ismi verebilirsiniz. Bende yukardaki örneklere benzer şekilde kendi temam için gerekli templateDetails.xml hazırlıyorum: templateDetails.xml PHP- Kodu:
Not: Türkçe karakter kullanmamaya dikkat edin ve administrator sayfanızdan artık temanızı kontrol edebilirsiniz. Gördüğünüz gibi temamız gerçektende görünüyor. Ancak minimal özelliklerle çalıştırmayı amaçladığımız için ön izlemesi görünmeyecektir dilerseniz temanızın ön izlemesini tema klasörü içerisine template_thumbnail.png olarak kaydedebilirsiniz ancak temanız bittikten sonra yapmak sanırım daha yararlı olacaktır. ![]() 2.3 Temamız artık joomla tarafından tanındığına göre artık temamızı joomla için çalışabilir hale getirebiliriz. 2.3a İlk olarak tema dosyamızdan(index.php olarak adlandırdığımız dosyamızdan) aşağıdaki kısmı bulup siliyoruz. HTML PHP- Kodu:
Yerine ise ; Joomla PHP- Kodu:
kısmını ekliyoruz.En basit şekilde joomla'nın doctype ve language bilgilerini eklemesini sağlıyoruz. 2.3b Joomla kendi header bilgisini kendisi oluşturur (dilerseniz manuel ek yapabilirsiniz ama işi joomlaya bırakmakta yarar vardır.)Bu yüzden aşağıdaki bölümü temamızdan bularak bir sonraki kod blogunu ekliyoruz. Eski HTML PHP- Kodu:
Ve yeni bölümü ekliyoruz. YENI GİRDİ PHP- Kodu:
Eklediğimiz kısım hakkında ufak bir bilgi vermek gerekirse ; bu kısım da bulunan Joomla PHP- Kodu:
İfadesi sitemiz için joomla tarafından oluşturulan header bilgilerini girer.Altında bulunan kısım ise tanıdık gelmesi gereken bir kısım ki bu kısımda temazın stil dosyasına erişim sağlıyoruz sadece tema yolunu belirten birkaç php girdi ekledik. Bu haliyle artık temamız çalışabilir durumda ancak içeriğimiz görünmeyecektir bunun için bir sonraki aşamaya geçmemiz gerek. 2.4c Burda içeriğimizin temamızda hangi kısma geleceğini bilmemiz gerek.Hazırladığımız temada icerik katmanı içinde bulunmasını tasarladık.Yani; HTML PHP- Kodu:
Yukarda kodlar içerisinde belirttiğim kısımda içeriğimiz yer almalı.Bunun için joomla içeriğinin çıktı olarak verek özel fonksiyonu kullanıyoruz. Joomla İçerik Özel Fonksiyonu PHP- Kodu:
Artık temamız ilk deneme için hazır administrator-eklentiler-şablon yöneticisi kısmından artık temamızı aktif hale getirebiliriz ve yaklaşık olarak temamız şu şekilde görünmeli. ![]() 3-Joomla temamızı düzenleyelim. Yukarda görüldüğü gibi temamız stilsiz ve modul'süz bir şekilde çalışmakta şimdi modül pozisyonlarımızı ekleyelim. İlk olarak üst menümüz için oluşturduğumuz katmanı ele alalım. Menu Katmanı PHP- Kodu:
Bu katman için templateDetails.xml’de tanımladığım ust poziyonunu ufak bir değişiklikle icerik katmanı için uyguladığımz yönteme benzer şekilde ekleyebilirim Modül Pozisyonu Eklenmiş Hali PHP- Kodu:
Eklenen Kod Parçası PHP- Kodu:
Görüldüğü gibi modül pozisyonları için yapmamız gereken jdoc:include kalıbını kullanmak ve sadece name parametresi için gerekli modül ismini girmek. Benzer şekilde sag modül pozisyonunu tanımlayalım. HTML PHP- Kodu:
Modül Eklenmiş Hali PHP- Kodu:
Böylelikle menu ve sag pozisyonlarını eklemiş olduk. Şuan siteyi yenilediğinizde bir değişiklikle karşılaşmayacaksınız çünkü henüz sag ve ust pozisyonlarına herhangi bir modül yüklenmedi.Bunu sağlamak için administrator sayfanızdan eklentiler-Modül yöneticisi menüsünü izleyebilirsiniz.Ben modüller arasından anamenü modülünü sag pozisyonu’na ayarladım.Tekrar sitemize dönersek şu aşağıdakine benzer bir yapı elde etmiş olmamız gerekiyor. ![]() Ust pozisyonu içinde bir menu tanımlayabilirsiniz ancak stiller tanımlanmadığı için pek hoş bir görüntü elde etmezsiniz. Bir dahaki bölümde temamızı nasıl stilize edeceğiz ve html çıktılarını nasıl düzenleyeceğimiz hakkında bilgi vermeye çalışacağım. |
|
|
|
#2 |
|
Avatar
Ünvanı: Kıdemli Joomlacı Kayıt Tarihi: Apr 2009 Mesajlar: 130 Durum: Offline Tecrübe Puanı: 1 |
Emeğine sağlık güzel paylaşım devamınıda ben getiririm inşallah
|
|
|
|
#3 |
|
Avatar
Ünvanı: Yeni Joomlacı Kayıt Tarihi: Dec 2008 Mesajlar: 6 Durum: Offline Tecrübe Puanı: 0 |
Güzel bir paylaşım olmuş. Çok teşekkürler.
|
|
|
|
#4 |
|
Ünvanı: what is this joomla? Kayıt Tarihi: Feb 2008 Mesajlar: 1.243 Durum: Offline Tecrübe Puanı: 10 |
Hakan Ersu teşekkürler önemli makalen için
|
|
|
|
#5 |
|
Ünvanı: Joomlacı Gençlik Kayıt Tarihi: Apr 2008 Bulunduğu yer: Localhost Mesajlar: 1.571 Durum: Offline Tecrübe Puanı: 10 |
Hocam süpersin eline emeğine sağlık diyor ve bu temayı yavaş yavaş herkezinde bişeyler katarak geliştirmesini temenni ediyorum =)
En başta ben
__________________
Lütfen Kayıt oldukdan sonra Forum Kuralları Okuyunuz. Daha sonra Derslerimizi İnceleyiniz. Formda Arama Yapmak İçin Buraya Tıklayınız. Bir İşin Nasıl Yapılabileceğini Biliyorken, Bir Başkasının Yapamadığını Görüp Dilini Tutmak İmkansızdır...!!! Ne kadar bilirsen bil, anlattıkların sadece karşındakinin anlayabildiği kadardır... MEVLANA CELALEDDİN RUMİ |
|
|
|
#6 |
|
Ünvanı: Müslüman Metalci Kayıt Tarihi: Feb 2008 Mesajlar: 1.228 Durum: Offline Tecrübe Puanı: 4 |
xuma bu değerli paylaşımın için teşekkürler.
Çoğu arkadaşımızın kafasında oluşan sorular bu konu ile çözüm bulacaktır inşallah. |
|
|
|
#7 |
|
Ünvanı: JoomlaTR Kayıt Tarihi: Mar 2009 Mesajlar: 1.421 Durum: Offline Tecrübe Puanı: 10 |
Çok teşekkürler eline sağlık xuma tamda tema yapmaya çalışıyordum bu bilgiler ilaç gibi geldi. Kafamda çok soru işareti var ama inanıyorum kafamdaki soru işaretleri siz anlattıkça kalkacaktır.
Genişliği content alanını taşacak kadar büyük resim vb eklentilerde content genişliyor ve sağ sutunu dışa savurarak bozuyor. Contentin ölçülerini sabit px verdiğimde ise sağ veya sol modulleri kaldırdığımda bu defada content boşalan sutunu doldurup genişlemiyor. Bu problemide aşarsam sanırım isteklerimi karşılayacak düzeyde bir tema oluşturabilecem. Yeniden çok teşekkürler
__________________
Forum Kurallarını Okuyunuz.Derslerimizi İnceleyiniz SSS Temel Bilgileri İnceleyiniz |
|
|
|
#8 |
|
Ünvanı: JTR-Kurucu Kayıt Tarihi: Feb 2008 Bulunduğu yer: İstanbul Mesajlar: 12.114 Durum: Offline Tecrübe Puanı: 10 |
Hakan gene yaptın yapacağını tebrikler
|
|
|
|
#9 |
|
Avatar
Ünvanı: Üyeliği Durduruldu Kayıt Tarihi: Nov 2008 Bulunduğu yer: İstanbul Mesajlar: 1.885 Durum: Offline Tecrübe Puanı: 0 |
Ellerine sağlık... Artık bu bilgilerin üzerine isteyenler daha fazlasını koyup değerlendirebilir...
Emeğine sağlık teşekkürler |
|
|
|
#10 | |
|
Ünvanı: Hakan ERSU Kayıt Tarihi: Mar 2008 Bulunduğu yer: Denizli Mesajlar: 421 Durum: Offline Tecrübe Puanı: 10 |
Tüm arkadaşlara ilgileri için teşekkür ederim.
Alıntı:
|
|
|
![]() |
| Bookmarks |
| Etiketler |
| joomla 1.5 tema tasarımı, joomla tema yapımı |
| Seçenekler | |
| Stil | |
|
|
Benzer Konular
|
||||
| Konu | Konuyu Başlatan | Forum | Cevaplar | Son Mesaj |
| Joomla Tema Tasarımı b3-2 | xuma | Yazılı Dersler | 4 | 11-20-2009 14:51 |
| Joomla 1.5 Tema Tasarımı b3 | xuma | Yazılı Dersler | 9 | 08-25-2009 20:49 |
| Her "bölüme,kategoriye" ayrı ayrı tasarımı nasıl yapabilirim? | kadel | Tema Sorunları | 7 | 07-24-2009 19:20 |
| joomla tema | pc-uzmani | Çöp Tenekesi | 1 | 06-09-2009 00:20 |
| Mizah Sitesi Tasarımı Acil Lazım | leon21 | Çöp Tenekesi | 2 | 04-30-2009 21:12 |