Merhaba sevgili arkadaşlar.
Bu dersimizde sanırım birçok joomlacı arkadaşın kafasına takılan ve bazen içinden çıkılmaacak bir hal alan joomla temaların görselliğine paralel bir sorunu ele almaya çalışacağım . Hemen hemen her joomlacı arkadaşın başına gelmiştir diye düşünüyorum diyelimki bir ücretsiz tema buldunuz ve kendi zevkinize göre bu temayı editlediniz fakat web 2.0 özelliklerinin’de sitenizde bulunmasını istiyorsunuz web 2.0 deyince benim aklıma ilk etap’da Ajax geliyor. Peki nedir bu Ajax , Ajax = Asynchronous JavaScript and XML yani
Asynchronous(yani ayni anda) çeşidindeki server ile browser arasındaki bilgi alışverişini sağlayan bir özellik’dir , Ajax’in en büyük özelligi HTML sayfa içerisinde sorulan sorulara sayfayı tekrar aktüalize etmeden cevap verebilmesidir buda sayfanızda ki ziyaretçilerin sorunsuz , sıkıntısız ve en önemlisi beklemeden istedikleri verilere ulaşması anlamına gelir.
Buraya kadar azda olsa sizlere Ajax’i anlatmaya çalıştım şimdi dilerseniz Ajax’i joomla sayfamıza nasıl entegre edebileceğimizi inceleyelim .
Bunun için bize gerekli olanlar:
- HTML editör
- Localserver yada webserver
- Grafik düzenleme programı
- Beğendimiz bir tema
- Beğendimiz bir ajax script
Bu derste yapmaya çalışacağımız sitemize gelen ziyaretçilerimize açılır kapanır bir panel yardımı ile sitemizden son haberleri iletmek olacak.
Tema olarak siteground’in 74 no’lu temasını seçtim nedeni ise bu tema’da web 2.0 özelliklerinin kullanılmamış olması .
Image template thumb
Temamızı editlemek için dilerseniz yerel sunucuya kuralım bu işlem bittikten sonra index.php ve template_css.css’i açarak kullanmak istediğimiz tema hakkında biraz inceleme yapmak pek de fena bir fikir olmaz .
Sizlerin de kullanmak istediğiniz temayı incelediğinizden yola çıkarak devam etmek istiyorum.
Su anda bize gerekli olan panelimize web 2.0 özelliğini verecek olan script ben bu iş için mootools sayfasında http://demos.mootools.net/Fx.Slide fx.slide scriptini uygun görüyorum siz aramaya devam edip daha ilginç uygulamalar bulabilirsiniz .
Mootools.svn.js (kütüphanemiz)
Şimdi bize gerekli olan bir fikir, panelimizi nereye koyabiliriz ben içerik bölümünün hemen üstünü uygun görüyorum alttaki resime bakarak nereyi kastettiğimi daha iyi anlayabilirsiniz.
Şimdi dilerseniz yavaş yavaş script entegremize başlayalım .
Normal HTML çalışmalarında scriptlerimizi sayfalarımıza eklerken alttaki kodu <head> ile </head> taglari arasına ekliyoruz.
|
1 |
<strong></strong><strong><script type="text/javascript" src="/js/scriptimiz.js"></script></strong> |
|
1 |
bu sistem joomlada biraz değişiyor çünkü joomla bir içerik yönetim sistemi ve karmaşık bir dizin sistemi var aslında prensip aynı fakat dizin adresleri değişik aşağıdaki gibi.
|
1 |
<strong></strong><strong><script type="text/javascript" src="/<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/scriptimiz.js"></script></strong> |
|
1 |
dikkat ederseniz script’e giden yol üzerinde js/ adlı bir klasör olusturduk bu klasör’ü joomla dizininde temamızın klasörünün içinede aynı şekilde olusturmalıyız (örnek: joomla => templates => tema klasörü => js.) ve oluşturduğumuz bu klasör içine mootools kütüphanemizi atmamız gerekli (mootools.svn.js) .
Bütün bu yaptıklarımızdan sonra , şimdi index.php içinde scriptimize giden yolu yukarıdaki örnekteki gibi belirtelim .
Index.php’de 19.satıra şu kodları ekliyoruz.
|
1 |
<strong style="color: #000000;"><script type="text/javascript" src="/<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/mootools.svn.js"></script></strong> |
Şimdi yapmamız gereken temamızın içerisinde bir panel oluşturmak ve bu panelin içerisine son haberlerimizi gösteren modülü yerleştirmek .
Panelimizin adı panel olsun yani <div id=”panel”> </div>
Panelimizi content taginin hemen altina 43. satira yerleştirelim aşagıdaki gibi,
ve template_css.css dosyamızı açarak panel tagimizin emirlerini verelim.
|
1 2 3 4 5 |
<strong style="color: #000000;">#panel{ width:100%; background-color:#CCCCCC; text-align:left; }</strong> |
genişlik bir üst div tagi ile (#content) aynı olsun dedik ve arka plan rengi #cccccc olsun daha sonra bu renk istedigimiz şekilde değiştirile biliriz.(önemsiz bir öğe)
Şimdi sıra geldi panelimizin içine koyacağımız module bu modulun adı’da son_haber olsun
Yani <div id=”son_haber></div>
Şimdi görünüm olarak önümüzde şöyle bir kodlama var
|
1 2 3 4 |
<strong></strong><strong style="color: #000000;"><div id="panel"> <div id="son_haber"> </div> </div></strong> |
ve son olarak’da joomlanın latest news modülünün kodlarını son_haber taginin içine yerleştirelim
|
1 2 3 4 5 |
<strong style="color: #000000;"><div id="panel"> <div id="son_haber"> <?php mosLoadModules ( 'user1' , '-3'); ?> </div> </div></strong> |
şimdi sayfadaki görünüm söyle olmalı ;
user1 ‚den sonra -3 yazdık çünkü sayfanın kendi modul yapısını kullanmak istiyoruz.
şimdi rahatsızlık veren tek durum sanırım modülün başlıgı sona kadar vertikal bir şekilde devam etmiyor biz bunu aşağidaki gibi değiştirebiliriz,
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<strong></strong><strong style="color: #000000;">#son_haber .module div div div h3 { color: #666; font-family: Tahoma, Verdana, sans-serif; font-size: 12px; text-align: left; text-decoration: none; background: url(../images/h3.jpg) top left repeat-x; font-weight: normal; line-height: 26px; padding: 0 10px; margin: 0 auto; }</strong> |
background grafiği olan h3.jpg’yi repeat-x olarak vertikal tekrarlattık.
ama siz bunun yerine kendi grafiğinizi kullanabilirsiniz.
Şimdi sıra geldi paneli saklamaya ve bir button yardımı ile çağırmaya.
İlk önce butonumuzu herhangi bir grafik programı ile oluşturalım ben bu iş için macromedia fireworks kullandım ve şoyle bir button oluşturdum;
şimdi bu oluşturduğumuz butonuda index.php içine yerleştirelim.
Yalnız yerleştirmeden önce tema içinde bir küçük düzeltme yapalım ve devam edelim temayı yapan kişi wrapper kısmını yani header’i içerikten 8px ayırmıs biz bunu istemiyoruz cünkü butonumuzun header ile birleşik olması için aşağıdaki kodları template_css.css içinde bulalım ve padding kısmındaki 8px’lik ayırımı 0px yapalım …
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<strong></strong><strong></strong><strong></strong><strong style="color: #000000;">#son_haber .module div div div h3 { color: #666; font-family: Tahoma, Verdana, sans-serif; font-size: 12px; text-align: left; text-decoration: none; background: url(../images/h3.jpg) top left repeat-x; font-weight: normal; line-height: 26px; padding: 0 10px; margin: 0 auto; }</strong> |
şimdi butonumuzu index.php içine yerleştirebiliriz butonumuzun ismi <div id=”buton”> </div> olsun .
ve bu kodu hemen panelimizin altına ;
|
1 2 3 4 5 |
<strong></strong><strong style="color: #000000;"><div id="panel"> <div id="son_haber"> <?php mosLoadModules ( 'user1' , '-3'); ?> </div> </div></strong> |
şu şekilde <div align=”center”>ortalayarak</div> yerleştirelim aşağıdaki gibi;
|
1 2 3 4 5 6 7 8 |
<strong></strong><strong style="color: #000000;"><div id="panel"> <div id="son_haber"> <?php mosLoadModules ( 'user1','-3' ); ?> </div> </div> <div align="center"> <div id="buton"></div> </div></strong> |
ve sonrasında hemen css kodlarımız’a donelim,
|
1 2 3 4 5 |
<strong></strong><strong style="color: #000000;">#buton{ width:139px; height:35px; background-image:url(../images/panel_button.jpg); background-repeat:no-repeat;}</strong> |
css ile alakalı kodlarımızı’da template_css.css dosyamıza ekledikten sonra elimizdeki görüntü şu şekilde olmalı.
şimdi önceden eklediğimiz scriptimizi artık calıştıralım bunun için mootools sayfasındaki fx.slide kodlarından yararlanacagiz. http://demos.mootools.net/Fx.Slide
eklememiz gereken kodumuz aşağıdaki gibi; bu kodu <head> ile </head> taglari arasına yerleştirmemiz gerekiyor.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<strong style="color: #000000;"><script type="text/javascript"> window.addEvent('domready', function(){ var mySlide = new Fx.Slide('panel'); mySlide.hide(); $('toggle').addEvent('click', function(e){ e = new Event(e); mySlide.toggle(); e.stop(); }); }); </script></strong> |
|
1 |
var mySlide = new Fx.Slide(‘panel’); bu kısma panel dedik çünkü açılır kapanır elementimiz panel olacak.
mySlide.hide(); buraya “hide” dedik çünkü panel sayfa ilk yüklendiğinde görünmesin istiyoruz.
Ve bu kodu’da ekledikten sonra panelimizin ortadan kaybolması gerekli aşağıdaki gibi;
şimdi sırada paneli açmamızı sağlayan kod gerekli aşağıdaki gibi;
|
1 |
<strong></strong><strong style="color: #000000;"><a href="#" id="toggle"></a></strong> |
bu kodu butonumuza entegre edecegiz,
|
1 2 3 4 5 |
<strong></strong><strong style="color: #000000;"><div align="center"> <a href="#" id="toggle"> <div id="buton"></div> </a> </div></strong> |
evet hepsi bu kadar arkadaşlar umarım sizler de evlerinizde pc başında bu anlattıklarımı tekrarlar ve başarılı bir şekilde sayfalarınıza web 2.0 nin getirdiği güzellikleri katarsınız.
Saglik mutluluk ve esenlikle kalin.