Joomla tema yapimi hakkinda (ders baslangici)...

Lutfen okuyunuz:

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...

This image has been resized. Click this bar to view the full image. The original image is sized 740x783.

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

Yukaridaki son yaptiklarimizdan sonra simdi elimizde bombos bir x temasi ama dolu bir xml dosyasi var o su anda bizi ilgilendirmiyor xml son konumuz olacak ...

simdi index.php'yi acalim ve joomlanin header tagini ekleyelim,

Kod:

http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
http://www.w3.org/1999/xhtml">

id ) { initEditor(); } ?>
" />

" ; ?>" ; ?>

bu islemden sonra devam edelim ve esas bolume gecelim, hemen bitisinden sonra asagiya ile tekrar baslayalim temamizin header kismi flash olacak bunu simdiden belirteyim .
simdi sira geldi sayfanin ana kutusunu olusturmaya unutmayalim bu anlatimda sadece div taglari kullanilacaktir bu konuyu da gectikten sonra simdi ana kutuyu asagidaki gibi olusturalim...

Kod:

http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
http://www.w3.org/1999/xhtml">

id ) { initEditor(); } ?>
" />

" ; ?>" ; ?>

__________________

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,

Kod:

devam edelim ...

ilk once container'mizi yerlestirelim...

Kod:

http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
http://www.w3.org/1999/xhtml">

id ) { initEditor(); } ?>
" />

" ; ?>" ; ?>

ve container'mizin icine flash kutumuzu ekleyelim...

Kod:

http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
http://www.w3.org/1999/xhtml">

id ) { initEditor(); } ?>
" />

" ; ?>" ; ?>

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

Kod:

http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
http://www.w3.org/1999/xhtml">

id ) { initEditor(); } ?>
" />

" ; ?>" ; ?>

__________________

Buraya kadar yaptiklarimizdan sonra bendeki HTML editor ve tarayicimdaki goruntuleri sizlere gostereyim ve devam edelim...

tarayici goruntusu

This image has been resized. Click this bar to view the full image. The original image is sized 1152x864.

HTML editor goruntusu

This image has been resized. Click this bar to view the full image. The original image is sized 1152x864.

__________________

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 ...

Kod:

http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
http://www.w3.org/1999/xhtml">

id ) { initEditor(); } ?>
" />

" ; ?>" ; ?>

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 ;

Kod:

 /* genel html ayarlari####################################################################################### */


/* html yuksekligi */
html {
height:100%;
}/* html yuksekligi bitis */

body {
font-family:Arial, Helvetica, sans-serif; /* tekst ailesi arial,helvetica */
color:#000000;/* yazi rengimiz siyah */
margin:0px;/* sagdan soldan ustten alttan bir kayma yapilmayacak */
height:100%;
font-size:0.8em;/* yazi buyuklugu */
}
/* genel html ayarlari bitti######################################################################################### */

/* sayfa icindeki div'lerin ayarlari baslangic ######################################################################## */
#ana_con{
border-right:1px solid #000000; /* sag taraf kanarlik siyah*/
border-left:1px solid #000000; /* sol taraf kanarlik siyah*/
background-color:#ffffff;/* arka plan beyaz*/
width:740px;/* genislik*/
text-align:center;/* hack sayfayi ortalamamizi saglar margin auto oldugu takdirde*/
margin:auto;
}
#flash_con{
width:740px;/* genislik*/
height:161px;/* yukseklik*/
}
#flash{
/* bos kalabilir*/
}
#main{
width:740px;
margin:auto;
}

__________________

Bu arada beni takip eden arkadaslar belki farkina varmislardir temamizin index.php'sinde actigimiz ve tag'larini kapatalim ben unutmusum.

index.php'deki son gorunum soyle olmali...

This image has been resized. Click this bar to view the full image. The original image is sized 1152x864.

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...

Kod:

 
http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
http://www.w3.org/1999/xhtml">

id ) { initEditor(); } ?>
" />

" ; ?>" ; ?>

__________________
simdi sirada solmenu'nun icine joomla'nin left menu icin yazdigi php tagini eklemek var...

left menu php kod asagidaki gibi;

Kod:

ve gorunum soyle olmali;

Kod:

id ) { initEditor(); } ?>
" />

" ; ?>" ; ?>

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

This image has been resized. Click this bar to view the full image. The original image is sized 782x706.

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...

This image has been resized. Click this bar to view the full image. The original image is sized 1152x864.

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 ...

Kod:

http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
http://www.w3.org/1999/xhtml">

id ) { initEditor(); } ?>
" />

" ; ?>" ; ?>

ve icerik div taginin icerisine joomlanin mainbody kodunu ekleyelim;

Kod:

Kod:

http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
http://www.w3.org/1999/xhtml">

id ) { initEditor(); } ?>
" />

" ; ?>" ; ?>

__________________
ve simdi tekrar css kodlarimiza donelim yeni ekledigimiz div taglarini sekillendirelim...

Kod:

/* genel html ayarlari####################################################################################### */


/* html yuksekligi */
html {
height:100%;
}/* html yuksekligi bitis */

body {
font-family:Arial, Helvetica, sans-serif; /* tekst ailesi arial,helvetica */
color:#000000;/* yazi rengimiz siyah */
margin:0px;/* sagdan soldan ustten alttan bir kayma yapilmayacak */
height:100%;
font-size:0.8em;/* yazi buyuklugu */
}
/* genel html ayarlari bitti######################################################################################### */

/* sayfa icindeki div'lerin ayarlari baslangic ######################################################################## */
#ana_con{
border-right:1px solid #000000; /* sag taraf kanarlik siyah*/
border-left:1px solid #000000; /* sol taraf kanarlik siyah*/
background-color:#ffffff;/* arka plan beyaz*/
width:740px;/* genislik*/
text-align:center;/* hack sayfayi ortalamamizi saglar margin auto oldugu takdirde*/
margin:auto;
}
#flash_con{
width:740px;/* genislik*/
height:161px;/* yukseklik*/
}
#flash{
/* bos kalabilir*/
}
#main{
width:740px;
margin:auto;
}
#sol_con{
width:171px;/* genislik*/
height:100%;/* yukseklik*/
float:left;/* sol tarafa yanastirmak icin*/
}
#sol_menu{
/* bos birakiyoruz*/
}
#icerik_con{
text-align:left;/* yazilari sol'a yanastiriyoruz*/
float:right;/* bu container sag tarafa yanasik olmali*/
width:569px;
}
#bombe{
background-image:url(../images/bombe_bg.jpg);
background-repeat:no-repeat;
height:20px;
width:569px;
}
#icerik{
/* bos kalabilir*/
}

tum bu yaptiklarimizdan sonra bendeki son gorunumler

HTML editor
index.php

This image has been resized. Click this bar to view the full image. The original image is sized 1152x864.

template_css.css

This image has been resized. Click this bar to view the full image. The original image is sized 1152x864.

tarayici

This image has been resized. Click this bar to view the full image. The original image is sized 1152x864.

arkadaslar dunku 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;

This image has been resized. Click this bar to view the full image. The original image is sized 740x783.

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;

This image has been resized. Click this bar to view the full image. The original image is sized 1152x864.

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;

Kod:

__________________
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;

Kod:

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

Kod:

 













 " onblur="if(this.value=='') this.value='';" onfocus="if(this.value=='') this.value='';" />
 

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

Kod:

 #icerik{
/* bos kalabilir*/
}
#arama_con{
width:171px;/* genislik*/
height:110px;/* yukseklik######## yukseklik grafigimizin yuksekligi dikkat ederseniz*/
background-image:url(../images/arama_con_bg.jpg);
background-repeat:no-repeat;
}
#arama{
width:100%;/* genislik bolumu container'nin icinde oldugu icin 100% kalabilir*/
height:auto;/* genislik orjinal olarak biraktik */
padding-top:50px;/*yukaridan 50px uzaklastirdik boylece kutunun tam ortasinda izlenimini almis olduk*/

}

#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;

Kod:

#solmenu table.moduletable th{/* modul header ayarlari */
 text-align:left;/* yazilar solda */
 color: #FFAA00;/* yazi rengi */
 width: 171px;/* genislik*/
 background-image:url(../images/solmenu_th_bg.jpg);
 background-repeat:no-repeat;
 padding:15px 0 0 10px; /* yukaridan 15px sagdan 0px asagidan 0px soldan 10px ayirik */
}

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

Kod:

#solmenu table.moduletable {
 width: 171px;  
}

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

Kod:

#solmenu table.moduletable td{
 width: 171px;/* genislik*/
 padding-left:5px;/* soldan 5px ayri*/
 padding-bottom:2px;/* asagidan 2px ayri*/
}

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;

Kod:

a {
color: #800000;
text-decoration:none;
}
a:hover {
text-decoration:underline;
color: black;
}

evet modullerimiz hemen hemen sekillendi daha sonra belki gerek gorursek bu konuya tekrar donup bir iki degisiklik yapabiliriz...

__________________
beni takip eden arkadaslar farkina varmistir bizim temamiz ile sablonumuzda ki yazilarin buyuklukleri arasinda farklilik var bu farki yok etmek icin css dosyamizin e ustunde bulunan genel HTML ayarlari bolumundeki body{} kodunun font-size{} bolumundeki 0.8em komutunu 0.7em olarak degistirelim ve yazilarimizi biraz kucultelim asagidaki gibi ;

Kod:

 body {
font-family:Arial, Helvetica, sans-serif; /* tekst ailesi arial,helvetica */
color:#000000;/* yazi rengimiz siyah */
margin:0px;/* sagdan soldan ustten alttan bir kayma yapilmayacak */
height:100%;
font-size:0.7em;/* yazi buyuklugu */
}

ve buna paralel olarak solmenu table.modultable kodumuzu'da su sekilde degistirelim;

Kod:

 #solmenu table.moduletable th{/* modul header ayarlari */
 text-align:left;/* yazilar solda */
 color: #FFAA00;/* yazi rengi */
 width: 171px;/* genislik*/
 background-image:url(../images/solmenu_th_bg.jpg);
 background-repeat:no-repeat;
 padding:10px 0 0 10px; /* yukaridan 10px sagdan 0px asagidan 0px soldan 10px ayirik */
 font-size:110%;
}

yazilari kuculttugumuz icin modullerimizin uzerinde cikan yazilarda kuculmus oldu onlari biraz buyultup yukari kaydirdik degisiklleri padding ve font-size alanlarinda yaptik...

Buraya kada yaptiklarimizdan sonra bendeki durum soyle ;

HTML editor
index.php gorunumu;


HTML editor
Template_css.css gorunumu;
ekran goruntusu buraya sigmayacagi icin download edip bakabilirsiniz;
http://volkann.vo.funpic.de/ders/template_css.css


Tarayici goruntusu mozilla firefox;


Tarayici goruntusu ie6;


Tarayici goruntusu ie7;

simdi kucuk onizleme molamizdan sonra temamizi biraz guzellestirelim istiyorum ozellikle main kismi yani solmenu ve mainbody'i icinde barindiran kisim biraz ciplak kaldi gerci sonlara dogru guzellesecek ama simdi main bolumunu halledelim istiyorum bunun icin yine PSD sablonunumuzdan kucuk bir bolum kesmek zorundayiz sanirim beni takip eden arkadaslar sablondan grafiklerin nasil kesildigini ogrendiler bunu simdi tekrarlamayacagim ama nereden kesilecegini hemen asagida gostereyim;



bu kestigimiz grafik main container'mizin arka plani olacak ;
yapamayan arkadaslar icin asagida imaji tekrar ekliyorum;

This image has been resized. Click this bar to view the full image. The original image is sized 740x5.

imajimizi kestik simdi tekrar index.php dosyamizi acalim ve kucuk bir eklenti yapalim
icerik_con container bitisinden hemen sonra yeni bir div tag olusturalim adi cleaner olacak bu kodun gorevi sayfanin altini temizlemektir yani footer bolumu ve main bolumunu birbirinden ayiracak yoksa footer istedigimiz gibi cikmaz veya main bolumune istedigimiz sekli veremeyiz asagidaki gibi index.php'yi yazalim;

Kod:

 " onblur="if(this.value=='') this.value='';" onfocus="if(this.value=='') this.value='';" />
 

div tagimizi bu sekilde ekledik ve simdi onun gorevini css dosyamizda aciklayalim;

Kod:

#cleaner {/* ayirac yada temizlikci'de denilebilir*/
 clear: both;/* bot temizlesin*/
 margin: 0;/* yukaridan sagdan soldan asagidan sifir kayma*/
}

ve simdi main containermizin arka plan resmini ekleyebiliriz asagidaki gibi main{} bolumunu degistirelim;

Kod:

#main{
background-image: url(../images/main_bg.jpg);
background-repeat:repeat-y;/* y ekseninde grafigi tekrarla */
width:740px;
margin:auto;
}

evet simdi main bolumumuz yavas yavas bir seye benziyor...

simdi eger dikkatinizi cektiyse son grafigimizi ekledikten sonra icerigin solmenuye ne kadar yakin oldugu biraz daha belirginlesti o zaman bunu hemen degistirelim daha evvelki css kodlarimizda bildiginiz gibi #icerik{} kismini bos birakmistik simdi o bolumu soyle degistirelim;

Kod:

#icerik{
padding-left:8px;/* soldan 8px ayir*/
}

__________________
simdi artik yavas yavas temamizin sonlarina yani footer bolumlerine dogru geliyoruz arkadaslar simdi yapmamiz gereken is PSD sablonumuzun altinda icerik bolumunde'ki notebook grafigimizi bir sekilde temamiza entegre etmektir bunun icin PSD sablonumuzu acalim ve strg+shift+e tuslari ile kesime hazir hale getirelim ve rectangle selection tool yardimi ile keselim en:740px boy:154px burada dikkat etmemiz gereken husus kestigimiz grafiklerin birbirlerine tam olarak uymalaridir yoksa bozuk bir goruntu elde ederiz ,isinizi kolaylastirmak icin sablonu iyice zoom yapabilirsiniz(alt+scroll)
asagida kesim yerini gostereyim;



yapamayan arkadaslar icin asagida tekrar imajimizi vereyim ;





simdi kestigimiz bu grafigi temamizin icine entegre edelim index.php'yi acalim ve main container bitis kismindan sonra yeni bir div tagi ekleyelim adi grafik_ust olsun simdi asagidaki gibi index.php'yi degistirelim;

Kod:

 " onblur="if(this.value=='') this.value='';" onfocus="if(this.value=='') this.value='';" />
 

ust grafigimizi temamiza ekledikten sonra simdi sirada ikinci grafigimiz var yani orta grafik onuda PSD sablonumuzdan kaldigimiz yerde en:740px; boy:80px olmak uzere keselim onceki kestigimiz yerin hemen altindan hic bosluk birakmadan ;

yapamayan arkadaslar icin imaji ben burada vereyim;

This image has been resized. Click this bar to view the full image. The original image is sized 740x80.

ve bu grafigimizi'de temamizin icine yerlestirelim hemen 'grafik_ust' div taginin altina yeni div acalim adi 'grafik_orta' olsun asagidaki gibi;

Kod:

 " onblur="if(this.value=='') this.value='';" onfocus="if(this.value=='') this.value='';" />
 

daha sonra bu her iki div tagimizin yani grafik_ust ve grafik_orta divlerinin css komutlarini verelim asagidaki gibi;

Kod:

#grafik_ust{
background-image:url(../images/grafik_ust.jpg);
background-repeat:no-repeat;
width:740px;
height:154px;
}
#grafik_orta{
background-image:url(../images/grafik_orta.jpg);
background-repeat:no-repeat;
width:740px;
height:80px;
}

simdi 3.grafigimizi'de temamiza sokalim bunun icin yine PSD sablonumuzda kaldigimiz yerden kesmeye devam edelim genislik:740px; yukseklik:43px; olacak sekilde ;

yapamayan arkadaslar icin ben asagida imaji ekliyorum;

This image has been resized. Click this bar to view the full image. The original image is sized 740x43.

ve index.php de yine hemen grafik_orta div taginin altina bu yeni imajimiz icin bir div tagi acalim adi grafik_alt olsun ve index.php'yi su sekilde yazalim;

Kod:

 













 " onblur="if(this.value=='') this.value='';" onfocus="if(this.value=='') this.value='';" />
 

ve son ekledigimiz div taginin'da css komutunu verelim ve bugunu burada noktalayalim isterseniz arkadaslar;

Kod:

 #grafik_alt{
background-image:url(../images/grafik_alt.jpg);
background-repeat:no-repeat;
width:740px;
height:43px;
}

evet bugun'de bayagi bir yol gidildi ve footer bolumune gelindi eksik kalan joomlanin kendi css komutlari var birkac guzellik makyaji ve tabiki XML dosyamiz var..
Bugun sizler ile birlikte temanmizin alt kismina yatay menumuzu PSD sablonumuzdaki sekilde entegre etmeye calisacagiz...

simdi yapmamiz gereken islem index.php'mizi acmak ve yatay menumuzu icine yerlestirebilecegimiz bir sekilde div kutusu olusturmaktir bunun icin ilk once yatay menumuzu nerede istedigimizin kararini vermemiz gerekir ben dunku calismadan hatirlayacaginiz gibi temamizin altina 3 adet grafik yerlestirmistim (grafik_ust,grafik_alt,grafik_orta) bu grafiklerden grafik_orta uygun diye dusunuyorum ayrica grafik_orta div tagi yatay menumuzede ister istemez container olacak yani isimizi kolaylastiracak ...

o zaman baslayalim yatay menumuz'un ismi

olsun ve asagidaki sekilde index.php'ye bu div'imizi yazalim;

Kod:

 " onblur="if(this.value=='') this.value='';" onfocus="if(this.value=='') this.value='';" />
 

bu islemi yaptiktan sonra simdi sirada yatay menu icin gerekli olan php kodumuz var neydi bu kodumuz? yine asagida gostereyim;

Kod:

php kodumuzu'da daha evvelki konularimizdaki gibi yeni yaptigimiz div tagimizin icine ekliyoruz asagidaki gibi;

Kod:

 













 " onblur="if(this.value=='') this.value='';" onfocus="if(this.value=='') this.value='';" />
 

simdi butun bunlari yaptiktan sonra temamiz'da yatay bolum ortaya cikti fakat yatay degil listelenmis bir sekilde simdi bu durumu css kodlari yardimi ile duzeltelim duzeltmeye gecmeden evvel PSD sablonumuzda alt kisimdaki yatay menuden genislik:5px; yukseklik:5px; olmak uzere 'li' yani listeleme imajini kesmenizi istiyorum ben size asagida kesilmis olarak vereyim yapamayan arkadaslar olabilir;



bu imajimizida temamizin images klasorune attiktan sonra simdi css kodlarimiza gecebiliriz yapmamiz gereken yatay menumuzun liste seklini degistirip yatay bir konuma getirmektir bu islem icin gerekli olan css kodu 'li' dir yani #yatay_menu li{} asagidaki gibi bir kodlama yapalim;

Kod:

 #yatay_menu li{
background-image:url(../images/li.png);/* psd sablonumuzdan kestigimiz kucuk imajimiz*/
background-repeat:no-repeat;/* tekrar edilsin istemiyoruz*/
background-position:left;/* ve imajimizin daima solda cikmasini istiyoruz*/
display:inline;/* listeleme seklini'de yatay olarak ayarliyoruz*/
padding:0px 20px 0px 20px; /* imajimizi sagdan ve soldan 20px ayiriyoruz*/
}

butun bunlari yaptiktan sonra hemen hemen istedigimiz gorunumu elde ettik sayilir simdi istedigimiz islem biliyorsunuzki yatay menu'ye daha fazla link eklenebilir ve her link eklediginde dogal olarak saga dogru kayma olacak ama sag tarafda bizim notebook imajimiz var ve yatay menumuz ile cakisacak bunu ortadan kaldirmak gerekli bunun icin yatay menumuzun genisligini sinirlandirmamiz gerekli asagidaki gibi ;

Kod:

#yatay_menu{
float:left;/*sola yanasik*/
text-align:left;/* ie6'da sola yanasik*/
width:400px;/* genislik*/
height:20px;/* yukseklik*/
padding-top:40px;/* yukaridan 40px asagiya insin*/
}

simdi dikkat ederseniz yatay menumuz hafif bir sekilde asagidaki copyright yazisina gore saga dogru kayik isterseniz bunu ortadan kaldiralim bunun icin gerekli css kodumuz 'ul'dir yani #yatay_menu ul{} ul kodu yatay menulerin kutulama sekillerini belirler asagidaki gibi;

Kod:

 #yatay_menu ul{
margin: 0px;/* sagdan soldan yukaridan asagidan kayma istemiyoruz*/
padding:0px 0px 0px 25px;/* soldan 25px uzaklas*/ 
}

evet arkadaslar sonlara dogru gelirken yatay menumuzu'de basari ile yerine yerlestirdik bir sonraki ders'e kadar saglicakla kalin...(aksama zamanim olursa yine devam)

Arkadaslar buraya kadar sag salim geldik ve sizlerin pozitif yondeki elestirileri beni cok mutlu ediyor insallah anlatimimizin geriye kalan kisimlari boyle gecer ...

Bugun sizler ile birlikte Adobe photoshop yardimi ile temamizin arka plani'ni cizip temeya entegre etmeye calisacagiz...

Onemli not: bendeki Adobe photoshop programi Almanca bu yuzden anlatimlarimda bazi kelimeleri yanlis tellafuz edebilirim herkezden ozur diliyorum...

Öyleyse baslayalim ...


Hep beraber Adobe photoshop programimizi acalim ve yeni bir dosya olusturalim en:840px; boy:500px; arkaplan:transparent olmak uzere neden eni 840px; yaptik onu aciklayalim temamizin eni bildiginiz gibi 740px; biz 100px daha uzerine koyduk cunku yapmak istedigimiz grafik'deki efektler yaklasik sagdan ve soldan 20px ila 25px calacakclar geriye kalan bolumu ise biz arkaplan rengi ile birlestirecegiz simdi biraz karmasik gelebilir hersey bittikten sonra daha iyi anlayabiliriz;
evet 840px eninde 500px boyunda arkaplani transparent olan dosyamizi actik asagidaki gibi;



paletimizden beyaz rengi secelim (#ffffff) ve arka planimizi boyama aracimizi kullanarak beyaz'a cevirelim, simdi rectangle selection tool'u secelim ve sabit buyuklugu en:740px boy:500px olarak ayarlayalim bu arada cetvelimiz'de acik olmali'ki pixel'lari gorelim yeni bir layout olusturalim ismi taban1 olsun ve rectangle selection tool ile cetvelimiz'in sol tarafinda 50px bir bosluk birakarak bu alani beyaz'a boyayalim; ve alan uzerine asagidaki degisiklikleri yapalim;



simdi yine rectangle selection tool'u secelim ve bu sefer sabit buyuklugu en:746px; boy:500px olarak ayarlayalim yeni bir layout olusturalim ismi taban2 olsun bu ayar ile sagdan ve soldan 3px daha buyuk bir layout olusturacagiz bunu yapmak icin tabiki grafigi buyultmek(zoom) gerekir asagidan sol tarafdan 1000% kadar buyultelim asagida sizlere gostermeye calisayim;



ve simdi taban2'yede taban1'e uyguladigimiz efektin aynisini uygulayalim yukaridaki resimde gostermistim ve taban2'nin uzerindeyken strg+# yardimi ile bu layout'umuzu bir adim arkaya atalim simdi elimizde asagidaki gibi bir goruntu olmasi gerekli;



bu islemden sonra taban2'yi secelim ve asagidaki efektleri uygulayalim;

This image has been resized. Click this bar to view the full image. The original image is sized 689x449.

Bu efektide basarili ile uyguladiktan sonra simdi elimizde asagidaki bir grafik olustu;



simdi elimizdeki bu grafigi kesime hazir hale getirelim strg+shift+e tuslari ile ve rectangle selection tool yardimi ile en 840px; boy:5px; olmak uzere strg+x ile keselim strg+n ile yeni bir pencere acalim adi body-bg olsun enter ile gecelim strg+v ile acilan yeni pencereye yapistiralim web icin kaydet diyelim jpg formati ile temamizin images klasorune kaydedelim...

yapamayan arkadaslar icin asagida grafigimizi ben tekrar ekliyorum ;

This image has been resized. Click this bar to view the full image. The original image is sized 840x5.

PSD sablonu incelemek isteyen arkadaslar asagidaki linkten indirip inceleyebilirler;

http://volkann.vo.funpic.de/ders/body-bg.rar


evet imajimiz'i olusturduk simdi sirada bu imaji temamizin arkaplani olarak kullanacagiz...
yaptigimiz grafigimizi temamizin images klasorune kaydettik yani isin zor kismi geride kaldi ve kolay kismi geldi temamizin css dosyasini HTML editor yardimi ile acalim ve body{} kismini su sekilde degistirelim;

Kod:

body {
background-image:url(../images/body-bg.jpg);
background-position:center;/* arka plan grafigini ortada goster */
background-repeat:repeat-y;/*arka plan grafigini y ekseninde tekrarla */
background-color:#ffffff;/* arka plan rengi beyaz olsun */
font-family:Arial, Helvetica, sans-serif; /* tekst ailesi arial,helvetica */
color:#000000;/* yazi rengimiz siyah */
margin:0px;/* sagdan soldan ustten alttan bir kayma yapilmayacak */
height:100%;
font-size:0.7em;/* yazi buyuklugu */
}

hepsi bu kadar simdi temamiz guzel bir gorunume kavustu siz ne dersiniz?

Arkadaslar bugunku anlatimimla birlikte yaklasik 3 gunu geride biraktik zor oldu ama cok sey ogrendik ogrendik diyorum cunku bende sizler gibi ogreniyorum hatta bir seyi anlattigim zaman kendim daha'da iyi anliyorum neyse fazla uzatmadan buraya kadar yaptiklarimizdan sonra temamiz ana hatlari ile meydana cikti ve guzel bir gorunume kavustu ve simdi sizlere bendeki son goruntuleri vereyim ;

HTML editor
Index.php;
2 parca olarak eklemek zorundayim

1.parca



2.parca



HTML editor
template_css.css
4 parca olarak ekliyorum

1.parca


2.parca


3.parca


4.parca


Tarayici Mozilla Firefox


Tarayici IE6


Tarayici IE7

_____________
Bugun joomla'ya ait bazi css kodlarimiz var onlari yazacagiz ve bir kucuk grafigimiz var readmore bolumune ekleyecek oldugumuz, son olarak test edip ekran goruntulerini'de buraya aktarmayi dusunuyordum fakat gerek yok galiba, merak eden arkadaslar zaten temayi indirip bakabilirler diye dusundum. Ayrica ben forumda gormemistim XML dosyasi yapimi ile ilgili bir bolumumuz zaten varmis onuda ben tekrar'dan anlatmayacagim ...

simdi hepberaber css dosyamizi acalim joomlanin componentlerinin acilisina ait olan kodumuzu yazalim kodumuz .componentheading{} ve asagidaki gibi bir css sekillendirmesi yapalim;

Kod:

.componentheading {/* componentlerin acilis basliklari haberler,arama vs.*/
font-size:120%;/* yazi normal yazidan 120% daha buyuk olsun*/
color:#800000;
padding-bottom:10px;/* alttan 10px yukari kaysin*/
font-weight:bold;/* yazi tipi kalin olsun*/
}

simdi icerik'lerin acilis'lari icin gerekli kodumuz bize gerekli oda soyleydi .contentheading{} ve yine asagidaki gibi bir sekillendirme yapalim;

Kod:

.contentheading {
font-size:120%;/* yazi normal yazidan 120% daha buyuk olsun*/
font-weight:bold;/* yazi tipi kalin olsun*/
color:#800000;
}

simdi genellikle frontpage'de cikan yine 3 adet kodumuz var .small:icerigi hangi editor'un ekledigine dair cikan kucuk bilgi, .createdate:icerigin hangi tarihde eklendigine dair cikan kucuk bilgi, .modifydate:icerigin hangi tarihde degistirildigine dair cikan kucuk bilgi bu kodlarimizi'da asagidaki gibi yazalim;

Kod:

.small {/*icerigi hangi editor'un ekledigine dair cikan kucuk bilgi*/
color:#666666;/* yazi rengi*/
}
.createdate {/*icerigin hangi tarihde eklendigine dair cikan kucuk bilgi*/
color:#999999;/* yazi rengi*/
}
.modifydate{/*icerigin hangi tarihde degistirildigine dair cikan kucuk bilgi*/
color:#666666;/* yazi rengi*/
}

tum doldurulabilir kutulari ayarlayalim kodumuz: .inputbox{} asagidaki gibi bir sekillendirme yapalim;

Kod:

.inputbox {/*tum doldurulabilir kutular search,contact vs.*/
background-color:#FFFFFF;/*arkaplan rengi*/
border:1px solid #CCCCCC;/*kenarlik olsun 1px genislik kesintisiz cizgi ve beyaz renk*/
color:#800000;/* yazi rengi*/
}

ve simdi son olarak (son degil aslinda fakat siz diger gerekli kodlari cesitli kaynaklardan bulabilirsiniz) .readon kodumuz var sirada PSD sablonunda dikkatinizi cekmistir learnmore olarak geciyor ve yaninda kucuk bir grafik var biz simdi onu joomlaya uyarlayalim PSD sablonunuzu acip o grafigin oldugu bolumu en:9px; yukseklik:7px; olmak uzere kesin ve kestiginiz grafigi gif formatinda temanizin images klasorune kaydedin yapamayan arkadaslar icin ben asagida ekledim ;

grafik


ve daha sonra css dosyamizi acip su kodlari yazalim ;

Kod:

.readon {
background-image:url(../images/readon-bg.gif);/*arkaplan grafik*/
background-repeat:no-repeat;/*arkaplani tekrar etme*/
background-position:left;/*arkaplan grafik solda ciksin*/
float:right;/*readmore bolumu sagda ciksin*/
padding-left:15px;/*soldan 15px kaydir boylece grafik ile yazi arasi acilsin*/
font-weight:bold;/* yazi tipi kalin olsun*/
}

evet arkadaslar bize bu temamiz icin gerekli css kodlari bunlardi son olarak footer yada copyright 'da diyebiliriz ekleyelim ve bitirelim...

index.php'yi acalim ve su satirlari garfik_alt bitisinden sonra ekleyelim;

Kod:

©http://www.joomladersleri.com"> Joomladersleri
|
http://www.arkadasca.de.tc">Made by volkann
|
JD lesson

simdi bu kodlari css dosyamizda sekillendirelim asagidaki gibi;

Kod:

#footer{
text-align:right;
float:right;
background-color:#F5E432;
height:20px;
width:100%;
}
#footer_icerik{
padding-right:5px;
}

Anlatimimiz burada bitiyor...

evet sevgili arkadaslar dersimiz burada son buluyor Turkiye'de joomla kaynaklari arasinda kisa zamanda insallah yerini alacak bu kaynagin olusmasinda herseyden evvel siz joomladersleri.com forum uyeleremize, site sahibi sevgili mehmet YAZICI'ya buradan icten selamlarimi ve tesekkurlerimi iletiyorum .
Herzaman bu konuya deginiyorum Türk insanin digerlerinden hicbir eksigi yoktur fazlasi vardir sadece 'armut pis agzima dus' ideolojisini kafamizdan sildigimiz takdirde bizde onlarin yaptiginin cok daha fazlasini yapabiliriz buna ben yurekten inaniyorum insallah bu kaynak iyi isler icin kullanilir insanimiza bir klavuz olur ...

Hepinize tekrar tesekkuru bir borc bilir islerinizde basarilar dilerim .


not: yakin zamanda sanirim yarin olabilir temamizin bitmis seklini, PSD sablonumuzu, Arkaplan PSD sablonunu ve anlatimda kullanilan tum resimleri buraya ekleyecegim... sorularinizi,görüslerinizi yine temalar bolumundeki baslik altina yazabilirsiniz.
arkadaslar joomla tema yapimina dair dokumanlar asagidaki gibidir;

PSD dosyalari;
a) temanin PSD sablonu http://volkann.vo.funpic.de/ders/joo...ema_sablon.rar

b) temanin arkaplan PSD sablonu
http://volkann.vo.funpic.de/ders/body-bg.rar

Tema anlatiminda kullanilan tum resimler;
1.bolum http://volkann.vo.funpic.de/ders/anlatim_grafik_1.rar
2.bolum http://volkann.vo.funpic.de/ders/anlatim_grafik2.rar

Bitmis olan tema JD-lesson
JD-Lesson http://volkann.vo.funpic.de/ders/jd-lesson.zip

cmsturk.net volkann