Web tasarım rehberi - İçindekiler
Joomla! sitenizin tasarımını, sistemde kurulu olan tasarım şablonu (template) belirler. Joomla!'nın güçlü şablon altyapısı sayesinde sitenizin içeriğini aynen koruyarak site tasarımınızı dakikalar içinde değiştirebilirsiniz. Ücretli ve ücretsiz şablonlar temin edebileceğiniz çeşitli adresleri önceki bölümlerimizde belirtmiştik. Bu bölümde şablonların nasıl kullanıldığına ve özelleştirilebileceğine kısaca değineceğiz. Örnek uygulamamız için www.joomlashack.com/free-joomla-templates adresindeki ücretsiz şablonlar arasından beğendiğimiz JS Jamba adlı şablonu sitemize yükleyeceğiz.
JS Jamba'nın hemen altındaki Download Now linkine tıklayıp açılan sayfadaki forma adımızı, e-posta adresimizi ve güvenlik kodunu yazıyoruz ve Please Get My Free Template linkine tıklıyoruz. Kısa bir süre içinde JoomlaShack'ten "Your download link for your Joomlashack template" başlıklı bir e-posta alacaksınız. Bu e-postadaki linke tıklayıp Download linkine tıklayarak şablonunuzu indirin.
İndirdiğiniz .zip dosyasını genişletin ve Joomla Denetim Masası'ndan Eklentiler > Kur/Kaldır menüsüne girin. Gözat düğmesine tıklayıp açtığınız arşivin içindeki Joomla1.5 klasörüne girin ve içindeki js_mamba.zip dosyasına çift tıklayın, ardından Dosya Yükle & Kur düğmesine tıklayın. "Şablon Kur: Başarılı" mesajını gördüğünüzde şablonunuz kurulmuş demektir.
Şimdi Eklentiler > Şablon Yöneticisi'ne girip js_jamba adlı şablonu seçip Varsayılan düğmesine tıklayarak yeni şablonunuzu sitenizin tasarımı olarak atayabilirsiniz.
Şablonu özelleştirme
Şimdi js_jamba başlığına tıklayıp şablon ayarlarına girin. Buradaki Theme Color seçeneğinden şablonunuzun renk temasını değiştirebilirsiniz. Ne yazık ki seçilebilen renklerin isimleri yazılmamış, bu yüzden deneme yanılma yapmak zorundasınız. Bu şablonda yok ama yüklediğiniz bazı şablonlarda Türkçeleştirilmesi gereken kısa İngilizce mesajlar olabilir.
Bunları değiştirmek için "HTML Düzenle" düğmesine tıklayın, şablonunuzun HTML kodları içinde tercüme edilmesi gereken cümleleri bulun ve Türkçelerini yazdıktan sonra Kaydet düğmesine tıklayın. Elbette HTML konusunda az da olsa deneyiminiz varsa bu sayfayı kullanarak şablonunuzu çok daha fazla özelleştirebilirsiniz. Yine bizim şablonumuzla birlikte gelmiyordu ama özellikle paralı ve profesyonel şablonlar şablonda kullanılan resimlerin kaynak dosyalarıyla birlikte gelirler.
Bu dosyalar genellikle Photoshop'un PSD formatında olur ve bu dosyaları Photoshop'ta açıp kendi logonuz ve site isminizle özelleştirebilir, ardından File > Save for Web & Devices komutuyla web'e uygun bir formatta kaydedip şablonunuzun içindeki images klasörüne uygun bir dosya ismiyle yükleyebilirsiniz. Bizim şablonumuzdaki logo imajı js_jamba/ images/styleX/logo.png yolunda bulunuyordu.
Bu dosyayı Photoshop'ta açıp uygun şekilde düzenledikten ya da aynı boyutlarda yeni bir logo imajı oluşturduktan sonra dosyamızı FTP ile templates/ js_jamba/images/styleX/logo.png dosyasının üzerine yazarak kaydedebiliriz.
Modül konumları
Arşiv dosyasının içinden çıkan jamba documentation. html dosyasını açarsanız şablonunuzla ilgili yardım belgelerinin linklerine ulaşabileceksiniz, elbette bu dokümanların tamamı İngilizce. Tabii biz önemli noktaları size aktarmayı ihmal etmiyoruz. Yardım belgelerinden ulaşabileceğiniz linklerden biri sizi şablonun "modül pozisyonlarına" götürüyor.
Bu linkin tam adresi demotemplates.joomlashack.com/jamba/index.php?tp=1. Bu adrese girdiğinizde şablonda kullanabileceğiniz modül pozisyonlarının örnek konumlarını göreceksiniz. Siz de kendi site adresinizin sonuna index.php?tp=1 ekleyerek her zaman kullandığınız şablonun modül pozisyonlarını canlı olarak görebilirsiniz.
Her şablonda ön tanımlı olarak gelen modül pozisyonları farklıdır, bu nedenle şablonunuzu etkili bir biçimde kullanabilmek için pozisyonları öğrenmeli ve modüllerinizi onlara uygun olarak konumlandırmalısınız. Bununla birlikte top (üst), left (sol), right (sağ), footer (alt) gibi bazı konumların genellikle adından anlaşılan konumları ifade ettiğini söyleyebiliriz. Modül pozisyonlarını gördükten sonra kendi modüllerinizin pozisyonlarını değiştirmek için Eklentiler > Modül Yöneticisi'ne girin ve bir modül seçin. Örneğin Ana Menü modülünü sitenin üst kısmını ifade eden "top" pozisyonuna almak istediğimizi varsayalım.
Bunun için Ana Menü modülüne girip Konum ayarını "top" olarak değiştiriyoruz ve Kaydet düğmesine tıklıyoruz. Şablonlarda yerleri en çok değişen pozisyonlar "user" adıyla başlayan kullanıcı tanımlı konumlardır. Bu nedenle her şablonda userX adlı konumların yerlerine dikkat etmekte fayda var. demotemplates.joomlashack.com/ jamba/ adresindeki şablon demosuna göz attıysanız bazı modüllerin standardın dışında renkli kutular halinde göründüğünü fark etmişsinizdir.
Bu özellik, çoğu şablonda standart olarak bulunan "modül sınıf sonekleri" sayesinde sağlanmaktadır. Kullanabileceğiniz sonekler genellikle şablonunuzun yardım ya da demo sayfasında belirtilir. JS Jamba şablonunda kullanabileceğiniz 3 farklı sonek var: Bunlar S1,S2 ve S3. Bir modülün ayarlarına girip Gelişmiş Özellikler'deki Modül Sınıf Soneki kısmına örneğin S1 yazıp kaydederseniz o modülün bir anda renklendiğini göreceksiniz.
S2 ve S3 değerleri de farklı renk tonları sağlıyor. Demodaki Main Menu adlı menünün de daha çekici bir görünüme sahip olduğunu fark etmişsinizdir. Bu da bir "Menü Sınıfı Soneki" ile sağlanıyor. Siz de "left" konumundaki menü modüllerinizden birine girip Menü Biçimi'ni Geri Uyumluluk – Dikey yaptıktan sonra Gelişmiş Özellikler'deki Menü Sınıfı Soneki'ne –sidenav yazın.
Örneğimizde anlattığımız S1, -sidenav gibi sınıf soneklerinin sadece kurduğumuz şablona özel olduğunu unutmayın. Bu sonekler kurduğunuz her şablon için farklı olacaktır. Bu nedenle kurduğunuz şablonun tüm özelliklerinden faydalanabilmek için varsa demosundaki "module positions" ve "module styles" gibi örnek sayfaları dikkatle inceleyin.