Web, işletme ve inovasyon hakkında bir takım yazılar İletişim için Form

Defocuyu takip etmek isteyenlere, RSS - FeedBurnerSanal Alemde Ben, Friendfeed - Flickr - Twitter - Vimeo


Joomla 1.5.x Tema Yapımı-2

Herkese merhaba. İşlerimin yoğunluğu ve yükseklisans sınavlarının başlaması nedeniyle, şu sıralar pek bir şey yazamıyorum. Neyse ki bugün bir fırsatını bulup, geçen haftalarda yayınlayacağımı duyurduğum "Joomla 1.5.x Tema Yapımı-1" adlı dersin devamını yazabildim.

Geçen derste bir Joomla tema klasörünün içinde bulunması gereken dosyalardan ve bu dosyaların ne işe yaradıklarından bahsetmiştik. Bugünse kolları sıvayıp bir Joomla teması yapacağız.

Temamızı yaparken ilk önce ona bir iskelet oluşturmalıyız. Ben bunun için aşağıdaki "template.css" dosyasını yazdım.

CSS:
  1. body{
  2. font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  3. font-size: 14px;
  4. background: #EDE9DD;
  5. }
  6.  
  7. div#main_body{
  8. margin: 0 auto;
  9. width: 900px;
  10. height:auto;
  11. padding-top: 40px;
  12. }
  13.  
  14. div#top{
  15. width: 900px;
  16. height: auto;
  17. float:left;
  18. text-align:left;
  19. }
  20.  
  21. div#top_left{
  22. width:230px;
  23. height:auto;
  24. float:left;
  25. text-align:left;
  26. }
  27.  
  28. div#top_right{
  29. width: 670px;
  30. height: 72px;
  31. float:left;
  32. text-align:right;
  33. }
  34.  
  35. div#middle{
  36. width:900px;
  37. height:auto;
  38. float:left;
  39. text-align:left;
  40. padding-top: 40px;
  41. }
  42.  
  43. div#middle_left{
  44. width:650px;
  45. height:auto;
  46. float:left;
  47. text-align:left;
  48. padding-right: 20px;
  49. }
  50.  
  51. div#middle_right{
  52. width: 230px;
  53. height: auto;
  54. float:left;
  55. text-align:left;
  56. }
  57.  
  58. div#footer{
  59. width: 900px;
  60. height:auto;
  61. text-align:center;
  62. }

Daha sonra bu kodlar ışığında "index.php" sayfamın tasarımını yaptım. Ve ortaya aşağıdaki gibi iki sütundan oluşan bir yapı çıktı.

Geriye tasarımımıza gerekli Joomla kodlarını yerleştirmek kaldı. Bunu da aşağıdaki gibi yapıyoruz.

HTML:
  1. <div id="main_body">
  2.  
  3. <div id="top"><!-- Şablona Herhangi Bir Resim Eklerken Kullanılacak Kod -->
  4.  
  5. <div id="top_left"><img src="templates/<?php echo $this->template ?>/images/defocu.png" border="0" alt="" width="230" height="72" /></div>
  6.  
  7. <div id="top_right"><!-- Arama Modülünü Sayfaya Ekleyen Kod -->
  8. <jdoc:include type="module" name="search" />
  9. <!-- Arama Modülünü Sayfaya Ekleyen Kod Sonu--></div>
  10.  
  11. </div>
  12.  
  13. <div id="middle">
  14.  
  15. <div id="middle_left"><!-- Sitemizdeki Konuların Görüntülenmesini Sağlayan Kod -->
  16. <?php if($this->params->get("menuName", "mainmenu")) : ?>
  17.     <jdoc:include type="component" />
  18. <?php endif; ?>
  19. <!-- Sitemizdeki Konuların Görüntülenmesini Sağlayan Kod Sonu --></div>
  20.  
  21. <div id="middle_right"><!-- Modüllerin Görüntülenmesini İstediğimiz Pozisyonu Oluşturan Kod -->
  22. <?php if($this->countModules('right')) : ?>
  23.     <jdoc:include type="modules" name="right" style="" />
  24. <?php endif; ?>
  25. <!-- Modüllerin Görüntülenmesini İstediğimiz Pozisyonu Oluşturan Kod Sonu --></div>
  26.  
  27. </div>
  28.  
  29. <div id="footer"><!-- Modüllerin Görüntülenmesini İstediğimiz Pozisyonu Oluşturan Kod -->
  30. <?php if($this->countModules('footer')) : ?>
  31.     <jdoc:include type="modules" name="footer" style="" />
  32. <?php endif; ?>
  33. <!-- Modüllerin Görüntülenmesini İstediğimiz Pozisyonu Oluşturan Kod Sonu --></div>
  34. </div>

Yukarıda yaptığımız temanın dökümanı burada, buyrun indirin. Umarım faydalı olmuştur.

EkleBunu Sosyal Paylasim Butonu
Kasım 5th, 2008 Etiketler: , , ,
| Kategori: İçerik Yönetim Sistemleri 5 Yorum » Yazar: abdullah

    Yorumlar

  1. Kasım 5th, 2008 | Yorumcu : Gürkan

    Çok güzel bir çalışma olmuş, teşekkür ederim. Daha çok kişi faydalanabilsin diye joomladersleri forumunda
    http://forum.joomladersleri.com/joomla-1-5-tema-yapimi-t2053.html?p=17591&posted=1#post17591
    adresinde linkini verdim. Bu güzel çalışmalarınızın devamını dilerim.

  2. Kasım 5th, 2008 | Yorumcu : abdullah

    Teşekkürler. Umarım arızadaki makinem gelince joomla ile ilgili daha güzel paylaşımlarda da bulunacağım.

  3. Kasım 5th, 2008 | Yorumcu : mht

    teşekkürler ancak dosyaya ulaşılamıyor

  4. Kasım 5th, 2008 | Yorumcu : abdullah

    Yukarıdaki buyrun indirin yazısının üzerine tıklaman yeterli, dosya inecektir.

  5. Kasım 5th, 2008 | Yorumcu : alcipan

    Saolun gercekten Mantıklı



Yorum Paneli





  • 1
  • ...
  • ...
  • 0