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.

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

Joomla 1.5.x Tema Yapımı-1

Önümüzdeki haftalarda, bir içerik yönetim sistemi olan Joomla için nasıl bir tema geliştireceğimizden bahsedeceğim. Bu konu son derece basit olmasına rağmen, internette yaptığım araştırmalardan gördüğüm kadarılığıyla türkçe kaynaklarda bu konu pek iyi anlatılamamış. Umarım anlatması düşündüğüm kadar zor değildir.

Bugün basit bir giriş yapmayı, deyim yerindeyse "ısınma turu" atmayı düşünüyorum. İlk önce bir Joomla tema klasörü ve bu klasörde olması gerekenlerden bahsedelim. Daha sonrasında temayı nasıl yapacağımızı anlatan kodlamayı video ders olarak işlemeyi düşünüyorum.

Şimdi bir klasör oluşturuyor ve buna "Defocu" adını veriyoruz. Bu klasör bizim temamızı barındıran klasör olacak ve işimiz bittiğinde bu klasörü Joomla'yı kurduğumuz alandaki "templates" klasörünün içerisine atacağız.

Temamızda bulunması gereken temel elemanlar soldaki resimde gösteriliyor. Şimdi bunların ne işe yaradıklarından biraz bahsedelim.

CSS Klasörü: Bu klasörün içinde temamızda kullanacağımız .css dosyaları barındırılacak.

Images Klasörü: Bu klasörde ise temamızda kullanacağımız resimler barındırılacak.

Favicon : Bu ikon sitemiz tarayıcıda açıldığında tarayıcımızın üzerinde otomatik olarak görüntülenecektir. Sizin yapmanız gereken logonuzu favicon ismiyle ve .ico formatında buraya kaydetmek.

Index.php : Tasarımını yapacağımız sayfanın ta kendisi. İlk önce oluştururken boş olabilir, sonrasında biz kendilerinin  içeriğini dolduracağız.

template_thumbnail: Bu resim yönetim panelinden sitenizin temasını seçmek için üzerinize geldiğinizde size gösterilen önizleme resmidir. Bunu da siz kendi sitenizin önsayfa görüntüsü olarak kaydetmelisiniz.

templatedetails.xml: Temamızın Joomla tarafindan tanınmasını sağlayan dosyanın içeriği, yapım tarihi, tema adı, tasarımcının adı, temamızın içinde barındırılan sayfa, resim gibi elemanların bilgilerinden oluşur.

Bugünlük bu kadar en kısa zamanda görüşmek üzere...

Ekim 29th, 2008 Etiketler: , , ,
| Kategori: İçerik Yönetim Sistemleri | 1 Yorum » Yazar: abdullah

Defocu.com Yayın Hayatına Başladı!

Selamlar,

Bugün itibariyle yazmaya başladığım blogum hakkında genel bir bilgi vererek açılışı yapalım.

Blogumun içeriği gereksiz veya bir gün sonra unutacağınız bilgilerden tamamen arınmış, uzun vadede kullanabileceğiniz bilgileri içerecek.Yazılarım ağırlıklı web 2.0, tasarım ve programlama üzerine olacak, bunların yanında sizlere faydalı olacağını düşündüğüm konularıda sizlerle paylaşmaya çalışacağım.

Son olarak blogumun altyapısı Wordpress olmakla beraber tema tasarımı tamamen bana aittir.

Bugünlük bu kadar en kısa zamanda görüşmek üzere...

Eylül 28th, 2008 Etiketler: , , , ,
| Kategori: Defocu | 3 Yorum » Yazar: abdullah