Joomla 1.0 Tema Yapımı, Joomla Dersleri

Sevgili joomla dostlari,kullanicilari ve joomla yapimi ve gelistirilmesi konusuna gonul vermis tum arkadaslar yaklasik 1 veya 1,5 seneden beridir joomla ile ilgileniyorum ve bu sure icerisinde joomla gelisti ve sinirlari zorlar bir CMS haline geldi onunla birlikte benimde yeteneklerim gelisti ama bu demek degilki hersey burada bitmistir teknoloji,bilim vb. konularin gelisimine paralel olarak internet dunyasida hayatimizin vazgecilmez bir parcasi haline gelmis durumdadir ve kendisini devamli yenilemektedir eskiden insanlarin buyuk paralar verip’de bir internet sitesi sahibi olmasi seyrek gorunen bir olaydi ve yapanlar kendileri ile gurur duyup hatta bunu bir reklam araci olarak bile kullanirlardi , simdi ise artik durum oyle bir hal aldiki herkez kendi internet sitesini kendisi yapabilecek duruma gelmistir ve tabiki bu hayal joomla vb CMS sistemler sayesinde olmustur.
Iste bu baslik adi altinda siz sevgili forum uyelerimize elimden geldigi kadar joomla template yapimini daha dogrusu bir PSD sablonunu nasil joomla’ya uyarlayacagimizi kendi tekniklerimle anlatmaya calisacagim tabiki anlatim suresi uzun ve icerik hatali olabilir bunun icin simdiden sizlerden ozur diliyorum .

Anlatima baslamadan once kisadan gerekli olan arac ve gerecleri asagiya listeleyecegim;

a) Joomla uniform server (localhost) Bilgisayarinizda virtuel server olusturmanizi saglar…
b) Macromedia dreamweaver yada wordpad veya herhangi bir html editor …
c) Adobe photoshop Grafik programi…
d) Nattyware renk kodu programi http://www.nattyware.com/pixie.html
e) Multiple IE’s tum Internet Explorer’lar bir arada http://tredosoft.com/Multiple_IE

Onemli not: anlatimda kullanilacak olan PSD sablon sadece ve sadece bir anlatim araci olarak kullanilmistir .

Hedef sablonumuz asagidaki gibidir sonuc 100% olmayacak cunku sol menu jomlanin standart sol menusu ile uymuyor tabiki biraz ugrasilirsa 100% sonuc alinabilir onda suphe yok ama bizim amacimiz temayi 100% cevirmek degil tersine joomlaya ne sekil uyarlayabilcegimizi ogrenmek…

Bu konuda tema’yi bastan kendimiz yapmaya calisacagiz zaten temanin kendi index’i tablolar’ile cizilmis ve bizi cok ugrastirir en bastan temiz bir sekilde yapmak daha iyi olacaktir…

Bugun vaktimin yettigi kadar hazirliklar ile baslayip ilerlemeye devam edecegiz..

Ben herzaman yeni bir temaya baslarken soyle bir yol izliyorum : elimdeki herhangi bir temayi kobay olarak kullaniyorum daha dogrusu kurban ediyorum nasilmi? mesela elimde x temasi var localhostuma bu temayi kuruyorum kurduktan sonra temalarin oldugu dizine girip kurdugum x temasinin icini oldugu gibi bosaltiyorum index’ini images klasorunun icindeki grafikleri css dosyasini yani herseyi sifirliyorum sonuc olarak elimde sifir bir tema var ve simdi calismaya baslayabilirim…

Bu arada dersleri takip etmek isteyen arkadaslar sizlere PSD sablonununda vereyim …
http://volkann.vo.funpic.de/ders/joomladersleri.rar

flash entegrasyonu’na gecmeden evvel beni izleyen arkadaslar icin hemen buradan flash dosyamizi’da vereyim http://volkann.vo.funpic.de/ders/jd.rar
evet simdi flash entegrasyonu icin bize iki kutu gerekli birincisi container gorevini ustlenecek (flash_con) ikincisi flash’i kutulayacak (flash) ve birde flash tarzi animasyonlari joomlanin icine sokmak icin gerekli olan kodumuz var onuda asagida vereyim,

devam edelim …ilk once container’mizi yerlestirelim…

dikkat ederseniz simdiye kadar daha template_css.css dosyasini hic ellemedik ama birazdan bu konuyada girecegiz. Simdi sira geldi flash dosyamizi eklemeye bunun icin sizlere yukarida verdigim kodu kullanacagiz…
not: flash genislik:740px
flash uzunluk :161px

Buraya kadar yaptiklarimizdan sonra bendeki HTML editor ve tarayicimdaki goruntuleri sizlere gostereyim ve devam edelim…
tarayici goruntusu

HTML editor goruntusu

evet buraya kadar simdilik hersey yolunda gitti ama bu zaten isin kolay kismiydi …
dilerseniz devam edelim… simdi yapmamiz gereken yine bir container olusturmak olusturacagimiz bu container sol menumuzu (left) ve icerigimizi(mainbody) tasiyacak buna ek olarak birkac’da grafik tasiyacak container’mizin ismi ‘main‘ olsun …

main container’mizi yerine yerlestirdikten sonra simdi icindeki elementleri yerlestirmeliyiz ama bu bolume gecmeden once artik template_css.css dosyasina bir el atmanin zamani geldi…
css dosyamiz’daki kodlama su sekilde ;

Bu arada beni takip eden arkadaslar belki farkina varmislardir temamizin index.php’sinde actigimiz <body> ve <html> tag’larini kapatalim ben unutmusum.
index.php’deki son gorunum soyle olmali…

ve devam…
son olarak main adli container’mizi yerine yerlestirmistik ve simdi sirada onun icine girecek olan elemanlari isimlendirme ve ekleme islemi var…
solmenumuzu yine bir container icine sokalim ve bu container’mizi sol_con olarak adlandiralim daha sonra bu container’nin icine’de solmenu’yu sokalim…

simdi sirada solmenu’nun icine joomla’nin left menu icin yazdigi php tagini eklemek var… left menu php kod asagidaki gibi;

ve gorunum soyle olmali;

simdi sablonumuza dikkat ederseniz flash animasyonun hemen altinda icerik’in oldugu kismin ust tarafinda bir bombe var asagida gostereyim;

bu bombeyi psd sablonundan kesmemiz gerekli bunun icin elinizdeki psd sablonunu adobe photoshop yardimi ile acin bu arada kucuk bir hesap yapmak istiyorum bu gerekli cunku sayfa genisligimiz 740px sol menu genisligimiz 171px olacak geriye kalan genisligi icerik bolumu icin kullanacagiz yani 569px olacak oyleyse actigimiz PSD sablonun’da bombeli bolumden 569px genisliginde bir parca kesecegiz uzunlugu ise hemen hemen bombenin bittigi yere kadar olabilir atiyorum 20px diyelim…

oyle ise PSD sablonumuzu acalim ve strg+shift+e tuslari ile grafigimizi bir tabanda sabitleyelim;
yukarida’da goruldugu gibi butun resim bir tabanda birlesti simdi kesime hazir
rectangle selection tool’u alalim ve yukaridan sabit buyuklugu secelim ve buyuklugu 569px genisligi’de 20px olarak ayarlayalim…rectangle selection tool’u alalim ve yukaridan sabit buyuklugu secelim ve buyuklugu 569px genisligi’de 20px olarak ayarlayalim…

ve bombeli kismi strg+x yardimi ile keselim strg+n yeni bir tabela acalim ve ismini bombe_bg yapalim enter deyip gecelim ve acilan pncerede strg+v tuslari ile kestigimiz grafigi yapistiralim son olarak web icin kaydet diyelim ve localhost’da temalar bolumundeki temamizin icine images klasorune kaydedelim…
yapamayan arkadaslar buradan imaj’i alabilirler
imaj

butun bunlardan sonra yine index.php’ye geri donuyoruz ve kaldigimiz yerden devam ediyoruz en son olarak left menumuzu ekledik ve simdi sirada left menunun solunda belirecek olan alan kaldi yani icerik kismi bu alan icin yine bir container aciyoruz ismi ‘icerik_con’ olsun ve bu container’nin icine sirasi ile bombe’li grafigimizi ve mainbody kismini ekleyecegiz bombeli grafigimizi ekleyecegimiz div taginin ismi yine ‘bombe’ olsun ve mainbody’i ekleyecegimiz tagin ismide ‘icerik’ olsun …

ve icerik div taginin icerisine joomlanin mainbody kodunu ekleyelim;

ve simdi tekrar css kodlarimiza donelim yeni ekledigimiz div taglarini sekillendirelim…

tum bu yaptiklarimizdan sonra bendeki son gorunumler
HTML editor
index.php

template_css.css

tarayici

arkadaslar önceki yaptigimiz css calismalarina dair ;
#sol_con{
width:171px;/* genislik*/
height:100%;/* yukseklik*/
float:left;/* sol tarafa yanastirmak icin*/
}

satirlarini soyle degistirelim

#sol_con{
text-align:left;
width:171px;/* genislik*/
height:100%;/* yukseklik*/
float:left;/* sol tarafa yanastirmak icin*/
}

eklenti olarak sadece text-align eklentisi yaptik nedeni ise #ana_con kodlarini yazarken text-align:center demistik ve diger container’lerde text-align:left demedigimiz takdirde yazilar ortada cikmaya devam edeceklerdir…

simdi sablonu dikkatlice inceledigimiz takdirde bizim sol menu olarak kullandigimiz bolumu sablonu cizen kisi en ustte login bolumu ve onun altinda newsletter olarak kullanmis orjinalligi bozmamak icin bizde o bolumde solmenumuzun uzerine mesela arama bolumu ekleyebiliriz ne dersiniz?
o zaman baslayalim …kullanacagimiz alan PSD sablonumuzda login bolumu icin kulanilan alan olmaktadir ve bizim temamizda solmenumuzun ustune gelecek…
Hep birlikte PSD sablonumuzu acalim ve member login kismini oldugu gibi bosaltalim sonuc olarak asagidaki gibi bir gorunum elde edecegiz;

simdi sablonumuzu tekrar kesime hazir hale getirmek icin strg+shift+e tuslarina basalim ve sablonumuzu bir tabana sabitleyelim,
ve yine her kesimde oldugu gibi rectangle selection tool’u secelim ve sabit buyukluk kisminin genislik ayarini 171px yukseklik ayarini 110px yapalim asagidaki gibi;

bu kismi strg+x ile keselim strg+n ile yeni bir tablo acalim ve adini arama_con_bg olarak degistirelim enter ile gecelim strg+v ile acilan pencerede yapistiralim ve web icin kaydet diyelim temalar bolumundeki temamizin images klasorune yapistiralim…

yapamayan arkadaslar icin asagida tekrar bu imaj’i veriyorum ;

grafigimiz hazir simdi diledigimiz gibi bir arama alani olusturmamiz gerekli bunun icin iki kutuya ihtiyacimiz olacak birincisi container olup arama kutusunu icinde barindiracak adi ‘arama_con’ olsun ikincisi ise arama bolumunun kodlarini icinde barindiracak adi ‘arama’ olsun bu iki kutuda sol_con adli div container’mizin icinde solmenunu adli divtaginin uzerinde yer alacaklar…

simdi hepberaber arama_con adli div container’mizi yerine yerlestirelim asagidaki gibi;

arama kutusunun container’nisini temamizin index’ine yerlestirdikten sonra simdi sirada arama kutusu var onuda herzamanki gibi onun icin hazirladigimiz container’nin icine sokacagiz yani arama_con’un icine asagidaki gibi;

arama kutumuzu’da bu sekilde ekldikten sonra simdi sirada joomlanin search kodlarini arama kutusunun icine yerlestirmeliyiz asagidaki gibi;

buraya kadar index.php ile olan isimiz simdilik bitti ve simdi css dosyamizi acalim ve yeni ekledigimiz div taglarini sekillendirelim asagidaki gibi ;

icerik kodunu dunku calismada unutmusuz onuda simdi ekledim

simdi dilerseniz yavas yavas solmenumuzu css ile sekillendirelim ama buna gecmeden once PSD sablonumuzdan bir grafik daha kesmemiz gerekecek bu grafigi modul header olarak kullanacagiz hep beaber PSD sablonumuzu acalim ve newsletter bolumunun icini bosaltalim ve bu bolumdeki grafigi keselim boyutlari en:171px boy:40px olmak uzere ve keserken yaklasik 5px kadar yukari kaydiralim yani kutuyu tam olarak degilde biraz yukari kaydirip keselim asagidaki gibi;

asagida tekrar imajimizi yapamayan arkadaslar icin vereyim;

ve simdi yine css dosyamiza donelim kestigimiz imaji yerine yerlestirelim hepimizin bildigi gibi modul sekillendirme islemleri icin kullanilan birtakim css kodlari var onlar hakkinda biraz bilgi vereyim ve devam edelim

a) table.moduletable{} : modul tablosunu sekillendirir
b) table.moduletable th{}: modul header kismini sekillendirir
c) table.moduletable td{} : modul icerigini sekillendirir
d) table.moduletable td a{}: modul icindeki linkleri sekillendirir
e) table.moduletable td a:hover{}: modul icindeki linklerin mouse uzerine geldigindeki durumu sekillendirir
f) table.moduletable td a:visited{} : modul icindeki ziyaret edilen linkleri sekillendirir,

simdi butun bu bilgilerden sonra yine css dosyamiza donup modulmuzun header kismini ayarlayalim bunun icin gerekli kodumuz neydi ?
tabiki table.moduletable th{} o halde asagidaki gibi bir ayar yapalim;

simdi dilerseniz modul tablomuzu sekillendirelim tabiki table.moduletable{} kodumuz ile asagidaki gibi ;

simdide modullerimizin icindeki elemanlari sekillendirelim bunun icin gerekli kodumuz table.moduletable td{} asagidaki gibi;

Buradan sonra geriye kalan kodlari kullanmamiza gerek yok cunku geriye kalan td:a,hover,visited kodlarini sayfanin genel ayarlari ile birlestirecegiz ama mouse linkin uzerine geldiginde grafik ciksin veya ziyaret edilmis linkler grafik ile gosterilsin istiyorsak tabiki bu kodlari kullanmamiz sart olurdu bunun yerine biz asagidaki kodlari css temamizin genel HTML ayarlari bolumune ekleyelim;