Emeğine sağlık güzel paylaşım devamınıda ben getiririm inşallah![]()
Joomla! 1.5.x Dersleri Kategorisinde ve Yazılı Dersler Forumunda Bulunan Joomla 1.5 Tema Tasarımı b1-b2 Konusunu Görüntülemektesiniz, Konu İçerigi Kısaca ->> 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 ...
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:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-9">
<title>Dead Dreams-Hakan ERSU</title>
</head>
<body>
</body>
</html>
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:<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-9">
<title>HAKAN ERSU</title>
<link rel="stylesheet" href="css/genel.css" type="text/css" />
</head>
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:<div id="tasiyici">
<div id="baslik"></div>
<div id="menu"></div>
<div id="icerik-tasiyici">
<div id="icerik"></div>
<div id="sag-tasiyici"></div>
</div>
<div id="taban"></div>
</div>
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:html, body, div, span, object, iframe, h1,
h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, cite, code, del, em,
img, ins, strong, sub, sup, dd, dl, dt, li, ol,
ul, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
}
html {
overflow: -moz-scrollbars-vertical;
overflow: scroll;
}
table {border-spacing:0;}
a:hover {text-decoration:none;}
a {outline-width:0}
dd {display:inline}
ul,ol { list-style:none }
1.5 Ek- Arkaplanm rengimizi vererek baslik katmanımıza geçelim.
CSS
PHP- Kodu:body {
background:#ecece2;
}
#tasiyici {
position:relative;
width:968px;
margin:0 auto;
}
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:b.rtop, b.rbottom{display:block;background: #ecece2}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #fff}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
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:<div id="baslik">
<h1>Dead Dreams-Hakan Ersu</h1>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>
1.8 Yine baslik katmanımıza benzer bir şekilde menu katmanımızı oluşturalım.
CSS
Gördüğünüz gibi menu katmanı içinde boşta katmanımız var bunu da yüksekliği düzenlemek için kullandık.PHP- Kodu:#menu {
width:968px;
position:relative;
margin:0 auto;
display:block;
background:#fff;
}
#menu .menu{
height:30px;
width:968px;
}
HTML
PHP- Kodu:<div id="menu">
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<div class="menu"></div>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>
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:#icerik-tasiyici {
margin:0 auto;
width:968px;
padding:10px 0 0 0;
}
#icerik {
width:755px;
min-height:400px;
float:left;
background:#fff;
}
#icerik .icerik {
width:755px;
min-height:400px;
}
HTML
PHP- Kodu:<div id="icerik-tasiyici">
<div id="icerik">
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<div class="icerik"></div>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>
<div id="sag-tasiyici">
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<div class="sag-tasiyici"></div>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>
</div>
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
b1-EndPHP- Kodu:#icerik-tasiyici {
margin:0 auto;
width:968px;
padding:10px 0 0 0;
}
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:<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN"
"http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>YuruyenAgac tematest</name>
<creationDate>2009-06-29</creationDate>
<author>Hakan ERSU</author>
<authorEmail>darkxuma@gmail.com</authorEmail>
<authorUrl>http://www.hakanersu.com</authorUrl>
<copyright>copyright 2009</copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>Bu bir deneme temasidir.</description>
2.Bölüm
PHP- Kodu:<files>
<filename>index.php</filename>
<filename>css/genel.css</filename>
</files>
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:<positions>
<position>pozisyon1</position>
<position>poz2</position>
<position>sag</position>
<position>sol</position>
<position>ust</position>
<position>alt</position>
<position>ahmet</position>
<position>mehmet</position>
<position>huseyin</position>
</positions>
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:<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN"
"http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>YuruyenAgac tematest</name>
<creationDate>2009-06-29</creationDate>
<author>Hakan ERSU</author>
<authorEmail>darkxuma@gmail.com</authorEmail>
<authorUrl>http://www.hakanersu.com</authorUrl>
<copyright>copyright 2009</copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>Bu bir deneme temasidir.</description>
<files>
<filename>index.php</filename>
<filename>css/genel.css</filename>
</files>
<positions>
<position>pozisyon1</position>
<position>poz2</position>
<position>sag</position>
<position>sol</position>
<position>ust</position>
<position>alt</position>
<position>ahmet</position>
<position>mehmet</position>
<position>huseyin</position>
</positions>
</install>
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:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
Yerine ise ;
Joomla
PHP- Kodu:<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>" >
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:<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-9">
<title>HAKAN ERSU</title>
<link rel="stylesheet" href="css/genel.css"
type="text/css" />
</head>
Ve yeni bölümü ekliyoruz.
YENI GİRDİ
PHP- Kodu:<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>
/templates/<?php echo $this->template?>/css/genel.css"
type="text/css" />
</head>
Eklediğimiz kısım hakkında ufak bir bilgi vermek gerekirse ; bu kısım da bulunan
Joomla
PHP- Kodu:<jdoc:include type="head" />
İ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:<div id="icerik">
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<div class="icerik">
İçeriğimiz burda olmalı
</div>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>
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:<jdoc:include type="component" />
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:<div id="menu">
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<div class="menu"></div>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>
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:<div id="menu">
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<div class="menu">
<jdoc:include type="modules" name="ust" />
</div>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>
Eklenen Kod Parçası
PHP- Kodu:<jdoc:include type="modules" name="ust" />
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:<div id="sag-tasiyici">
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<div class="sag-tasiyici"></div>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>
Modül Eklenmiş Hali
PHP- Kodu:<div id="sag-tasiyici">
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<div class="sag-tasiyici">
<jdoc:include type="modules" name="ust" />
</div>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>
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.
Emeğine sağlık güzel paylaşım devamınıda ben getiririm inşallah![]()
Hakan Ersu teşekkürler önemli makalen için![]()
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İ
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.
Ç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
Hakan gene yaptın yapacağını tebrikler![]()
Ellerine sağlık... Artık bu bilgilerin üzerine isteyenler daha fazlasını koyup değerlendirebilir...
Emeğine sağlık teşekkürler
Tüm arkadaşlara ilgileri için teşekkür ederim.
Bu genel bir sorundur ve en basit çözümü de içeriği temanıza göre ayarlamaktır.Çoğu profesyonel temada (rockettheme,joomlart vs gibi sitelerin temaları.) bununla karşılaşabilirsiniz.Çoğu kişi tema aldığım sitedeki gibi benim sitemde durmuyor der ki bunun nedeni yukarda belirttiğim sitelerde , içerik tema ile zenginleştirilmemiştir tema içerik ile zenginleştirilmiştir.Anlayacağınız güzel bir sunum için sadece temalara yüklenmeyin içeriğide uygun tutmaya çalışın.
Paylaş