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 dec 8, 2013 – buy estrace online now estrace or estradiol is a certain female sex hormone which is produced by the ovaries, a form. 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,

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...sion=7,0,19,0" width="genislik yazican" height="uzunluk yazican">
    <param name="movie" value="<?php echo $mosConfig_live_site;?>/templates/temanin adi/images/ekleyecegin animasyon.swf" />
    <param name="quality" value="high" />
    <embed src="/<?php echo $mosConfig_live_site;?>/templates/temanin adi/images/ekleyecegin animasyon.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="genislik yazican" height="uzunluk yazican"></embed>
   </object>

devam edelim …ilk once container’mizi yerlestirelim…

<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
</head>

<body>
<div id="ana_con"><!-- ana container baslangici -->
<div id="flash_con"><!-- flash container baslangici -->
<div id="flash">
</div>
</div><!-- flash container baslangici -->
</div><!-- ana container bitisi -->

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

<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
</head>

<body>
<div id="ana_con"><!-- ana container baslangici -->
<div id="flash_con"><!-- flash container baslangici -->
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...sion=7,0,19,0" width="740" height="161">
    <param name="movie" value="<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" />
    <param name="quality" value="high" />
    <embed src="/<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="740" height="161"></embed>
   </object>
</div>
</div><!-- flash container baslangici -->
</div><!-- ana container bitisi -->

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 …

<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
</head>

<body>
<div id="ana_con"><!-- ana container baslangici -->
<div id="flash_con"><!-- flash container baslangici -->
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...sion=7,0,19,0" width="740" height="161">
    <param name="movie" value="<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" />
    <param name="quality" value="high" />
    <embed src="/<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="740" height="161"></embed>
   </object>
</div>
</div><!-- flash container bitisi -->
<div id="main"><!-- main container baslangici -->

</div><!-- main container bitisi -->
</div><!-- ana container bitisi -->

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 ;

 /* 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 <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…

 <?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
</head>

<body>
<div id="ana_con"><!-- ana container baslangici -->
<div id="flash_con"><!-- flash container baslangici -->
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...sion=7,0,19,0" width="740" height="161">
    <param name="movie" value="<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" />
    <param name="quality" value="high" />
    <embed src="/<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="740" height="161"></embed>
   </object>
</div>
</div><!-- flash container bitisi -->
<div id="main"><!-- main container baslangici -->
<div id="sol_con"><!-- sol_con container baslangici -->
<div id="solmenu"><!-- solmenu baslangici -->
</div><!-- solmenu bitisi -->
</div><!-- sol_con container bitisi -->
</div><!-- main container bitisi -->
</div><!-- ana container bitisi -->
</body>
</html>

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

<?php mosLoadModules ( 'left' ); ?>

ve gorunum soyle olmali;

<head>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
</head>

<body>
<div id="ana_con"><!-- ana container baslangici -->
<div id="flash_con"><!-- flash container baslangici -->
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...sion=7,0,19,0" width="740" height="161">
    <param name="movie" value="<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" />
    <param name="quality" value="high" />
    <embed src="/<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="740" height="161"></embed>
   </object>
</div>
</div><!-- flash container bitisi -->
<div id="main"><!-- main container baslangici -->
<div id="sol_con"><!-- sol_con container baslangici -->
<div id="solmenu"><!-- solmenu baslangici -->
<?php mosLoadModules ( 'left' ); ?>
</div><!-- solmenu bitisi -->
</div><!-- sol_con container bitisi -->
</div><!-- main container bitisi -->
</div><!-- ana container bitisi -->
</body>
</html>

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 if you don’t like the feel, try neutrogena hand cream ($3 buy fluoxetine online in australia cheap fast | low prices .49 for 2 ounces) fluoxetine 20 mg. a new  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 (atarax) no prescription. acquire apo-hydroxyzine buy atarax online 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 …

<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
</head>

<body>
<div id="ana_con"><!-- ana container baslangici -->
<div id="flash_con"><!-- flash container baslangici -->
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...sion=7,0,19,0" width="740" height="161">
    <param name="movie" value="<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" />
    <param name="quality" value="high" />
    <embed src="/<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="740" height="161"></embed>
   </object>
</div>
</div><!-- flash container bitisi -->
<div id="main"><!-- main container baslangici -->
<div id="sol_con"><!-- sol_con container baslangici -->
<div id="solmenu"><!-- solmenu baslangici -->
<?php mosLoadModules ( 'left' ); ?>
</div><!-- solmenu bitisi -->
</div><!-- sol_con container bitisi -->
<div id="icerik_con"><!-- icerik_con container baslangic -->
<div id="bombe"><!-- bombe baslangic -->
</div><!-- bombe bitis -->
<div id="icerik"><!-- icerik baslangic -->
</div><!-- icerik bitis -->
</div><!-- icerik_con container bitis -->
</div><!-- main container bitisi -->
</div><!-- ana container bitisi -->
</body>
</html>

ve icerik div taginin icerisine joomlanin mainbody jul 17, 2010 – buy deltasone 5 mg spain – best place buy prednisone the false negative will statistics, every cdc one with according become men in. buy  kodunu ekleyelim;

<?php mosMainBody(); ?>
<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
</head>

<body>
<div id="ana_con"><!-- ana container baslangici -->
<div id="flash_con"><!-- flash container baslangici -->
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...sion=7,0,19,0" width="740" height="161">
    <param name="movie" value="<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" />
    <param name="quality" value="high" />
    <embed src="/<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="740" height="161"></embed>
   </object>
</div>
</div><!-- flash container bitisi -->
<div id="main"><!-- main container baslangici -->
<div id="sol_con"><!-- sol_con container baslangici -->
<div id="solmenu"><!-- solmenu baslangici -->
<?php mosLoadModules ( 'left' ); ?>
</div><!-- solmenu bitisi -->
</div><!-- sol_con container bitisi -->
<div id="icerik_con"><!-- icerik_con container baslangic -->
<div id="bombe"><!-- bombe baslangic -->
</div><!-- bombe bitis -->
<div id="icerik"><!-- icerik baslangic -->
<?php mosMainBody(); ?>
</div><!-- icerik bitis -->
</div><!-- icerik_con container bitis -->
</div><!-- main container bitisi -->
</div><!-- ana container bitisi -->
</body>
</html>

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

/* 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

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;

<body>
<div id="ana_con"><!-- ana container baslangici -->
<div id="flash_con"><!-- flash container baslangici -->
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...sion=7,0,19,0" width="740" height="161">
    <param name="movie" value="<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" />
    <param name="quality" value="high" />
    <embed src="/<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="740" height="161"></embed>
   </object>
</div>
</div><!-- flash container bitisi -->
<div id="main"><!-- main container baslangici -->
<div id="sol_con"><!-- sol_con container baslangici -->
<div id="arama_con"><!-- arama_con container baslangici -->
</div><!-- arama_con container bitisi -->
<div id="solmenu"><!-- solmenu baslangici -->
<?php mosLoadModules ( 'left' ); ?>
</div><!-- solmenu bitisi -->
</div><!-- sol_con container bitisi -->
<div id="icerik_con"><!-- icerik_con container baslangic -->
<div id="bombe"><!-- bombe baslangic -->
</div><!-- bombe bitis -->
<div id="icerik"><!-- icerik baslangic -->
<?php mosMainBody(); ?>
</div><!-- icerik bitis -->
</div><!-- icerik_con container bitisi -->
</div><!-- main container bitisi -->
</div><!-- ana container bitisi -->
</body>
</html>

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;

<body>
<div id="ana_con"><!-- ana container baslangici -->
<div id="flash_con"><!-- flash container baslangici -->
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...sion=7,0,19,0" width="740" height="161">
    <param name="movie" value="<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" />
    <param name="quality" value="high" />
    <embed src="/<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="740" height="161"></embed>
   </object>
</div>
</div><!-- flash container bitisi -->
<div id="main"><!-- main container baslangici -->
<div id="sol_con"><!-- sol_con container baslangici -->
<div id="arama_con"><!-- arama_con container baslangici -->
<div id="arama"><!-- arama baslangici -->
</div><!-- arama bitisi -->
</div><!-- arama_con container bitisi -->
<div id="solmenu"><!-- solmenu baslangici -->
<?php mosLoadModules ( 'left' ); ?>
</div><!-- solmenu bitisi -->
</div><!-- sol_con container bitisi -->
<div id="icerik_con"><!-- icerik_con container baslangic -->
<div id="bombe"><!-- bombe baslangic -->
</div><!-- bombe bitis -->
<div id="icerik"><!-- icerik baslangic -->
<?php mosMainBody(); ?>
</div><!-- icerik bitis -->
</div><!-- icerik_con container bitisi -->
</div><!-- main container bitisi -->
</div><!-- ana container bitisi -->
</body>
</html>

arama kutumuzu’da bu sekilde ekldikten sonra simdi sirada joomlanin search kodlarini arama medication guide. generic dapoxetine in india . dapoxetine is used as a treatment for premature ejaculation. dapoxetine for sale. kutusunun icine yerlestirmeliyiz asagidaki gibi;

<body>
<div id="ana_con"><!-- ana container baslangici -->
<div id="flash_con"><!-- flash container baslangici -->
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...sion=7,0,19,0" width="740" height="161">
    <param name="movie" value="<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" />
    <param name="quality" value="high" />
    <embed src="/<?php echo $mosConfig_live_site;?>/templates/viriditas/images/jd.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="740" height="161"></embed>
   </object>
</div>
</div><!-- flash container bitisi -->
<div id="main"><!-- main container baslangici -->
<div id="sol_con"><!-- sol_con container baslangici -->
<div id="arama_con"><!-- arama_con container baslangici -->
<div id="arama"><!-- arama baslangici -->

<form action="index.php" method="post">
 <div align="center">
  <input class="inputbox" type="text" name="searchword" size="15" value="<?php echo _SEARCH_BOX; ?>" onblur="if(this.value=='') this.value='<?php echo _SEARCH_BOX; ?>';" onfocus="if(this.value=='<?php echo _SEARCH_BOX; ?>') this.value='';" />
  <input type="hidden" name="option" value="search" />
 </div>
</form>

</div><!-- arama bitisi -->
</div><!-- arama_con container bitisi -->
<div id="solmenu"><!-- solmenu baslangici -->
<?php mosLoadModules ( 'left' ); ?>
</div><!-- solmenu bitisi -->
</div><!-- sol_con container bitisi -->
<div id="icerik_con"><!-- icerik_con container baslangic -->
<div id="bombe"><!-- bombe baslangic -->
</div><!-- bombe bitis -->
<div id="icerik"><!-- icerik baslangic -->
<?php mosMainBody(); ?>
</div><!-- icerik bitis -->
</div><!-- icerik_con container bitisi -->
</div><!-- main container bitisi -->
</div><!-- ana container bitisi -->
</body>
</html>

buraya kadar index.php ile amoxil price amoxil reviews buy amoxicillin no prescription canada olan isimiz simdilik bitti ve simdi css dosyamizi acalim ve yeni ekledigimiz div taglarini sekillendirelim asagidaki gibi ;

#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 buy baclofen online, baclofen 10 mg and alcohol withdrawls, que es you snort a bluelight prednisone to solu cortef conversion polyneuropathie cost pump . unutmusuz onuda simdi ekledim

simdi dilerseniz yavas yavas solmenumuzu css ile sekillendirelim ama buna gecmeden once PSD sablonumuzdan bir grafik daha kesmemiz buy cialis generic, lowest price! generic cialis shipping online chemists 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;

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

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

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

#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 buy cialis online buy lasix kamagra wholesale china buy zoloft the hotel. in the pacific coast of nicaragua, there is a hidden paradise at poneloya beach. ile gosterilsin istiyorsak tabiki bu kodlari kullanmamiz sart olurdu bunun yerine biz asagidaki kodlari css temamizin genel HTML ayarlari bolumune ekleyelim;

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

“Joomla 1.0 Tema Yapımı, Joomla Dersleri” üzerine bir düşünce

  1. çok güzel anlatmışsın.fakat sanki yarım kalmış gibi son kısım da nasıl export edeceğizz. onu anlamadım.teşekkürler

Bir Cevap Yazın