Joomla Dersleri

Joomla sitelerin çoğunda anket bileşeni sayfası aynıdır. Çoğumuz bu anket sayfasını değiştirebileceğimizi bilmeyiz. Neden her siteyle aynı olsun sizin anketiniz? İşte şimdi size anket sonuçları sayfasının nasıl değiştirildiğini anlatacağım.

Dikkat: Bu anlatım Joomla 1.5 sürümünü içerir.

components\com_poll\views\poll\tmpl içerisinde bulunan default_graph.php dosyasını düzenlemek üzere açalım.

/components/com_poll/assets/poll.png adresi ile dosyada belirtilmiş resmin başlık yanında yer almasını sağlayan bu resimden başlıyorum ve bu adresleme işlemini kendi istediğim resme yönlendirmek üzere değiştiriyorum. (Resmin boyutlarının poll.png ile aynı ya da yaklaşık boyutlarda olmasına dikkat ederek...)

Yapacağım ikinci değişiklik php dosyasında belirtilen tablo sütun sayısını değiştirmek olacak. Yazı veya başka birşey eklemek istiyorum ve

<td width="100%" colspan="4">

bölümünde 4 değerini tablomda kaç sütunumun olmasını istiyorsam ona göre ayarlıyorum. Oy sayısı, yüzde değeri ve yüzde değerini ifade eden grafik çizgisi default sütunları işgal eder. Ben bunlara ek olarak yeni bir sütun daha ekleyeceğim.

Herbir seçenek ismini kalın veya italic vs göstermek istiyorum:

 echo $vote->text; ?>

kodunu

<strong>strong>

kodları arasına yerleştirirseniz kalın seçenek yazısı belirlemiş olursunuz. diğer yazı tipleri için de küçük bazı html kodları gerekiyor.

Sonrasında sütunlarımın kodları geliyor. Yeni bir sütun eklemek istiyordum, bunu şu şekilde yapıyorum:

<tr class="sectiontableentryodd; ?>">
  
  <td align="right" width="2">
   <strong>Oy:strong>
  td>
  
  <td align="right" width="10">
    echo $vote->hits; ?>&nbsp;
  td>

bu kodlar arasına şuanda kalın karakterde görünen kodu yerleştirdim, dolayısıyla daha sonrasında gelen oy sayısının neyi ifade ettiğini açıkladım. Bu bölümde herbir bölümü sütunları işaret ediyor. Bunların sıralarını değiştirerek grafik çizgisini başa, yüzdeyi e sağa yerleştirmek gibi sıra değişimleri yapabilirsiniz.

Herhangi bir sütunu kaldırmak istiyorsanız bir kod işinizi görecektir. Mesela benim gibi yüzde olarak görüntülemeyi engellemek istiyorsanız (95% şeklinde) yapmanız gereken:

kodu içine yerleştirmelisiniz yani şu şekilde:

<td width="30" >
    echo $vote->percent; ?>%td>

Bu bölümde sütunların birbirlerine daha yakın ya da daha uzak olmalarını dilerseniz de herbirinin width değerini arttırıp azaltabilirsiniz.

Son olarak bahsedebileceğim şey de sonuç sayfasının alt kısmında ankete katılan sayısı, ilk ve son oylama tarihleri bölümünde yazıların ingilizce oluşudur. Yine aynı dosya içinde:

 echo JText::_( 'First Vote' ); ?>

kodu içinde kalın ve italik yazıyı dilediğinizce değiştirebilirsiniz.


DİKKAT!: Eğer kod bilgisine sahip değilseniz dersi yerel yani localhost üzerinde denemeniz tavsiye edilir.

Öncelikle CSS kodlarına bir göz atalım. (Örnek olarak Joomla 1.0.12 versiyonu kullanıldı)

"templates" klasörü içerisinde üzerinde değişiklik yapacağımız temayı buluyor ve klasör içinde "css" klasörü içerisinde "template_css.css" dosyasını açıyoruz. Bu pencerede birçok farklı kod görüntülenir. Biz hepsinden bahsetmeyeceğiz, birkaçını örnek maksadıyla inceleyeceğiz.

#buttons_outer {

ile başlayan bölüm sayfanın üst bölgesindeki menü için hazırlanmış kodları içerir.

width: 635px;
 margin-bottom: 2px;
 margin-right: 2px;
 float: left;

kısmında width tablo genişliğini gösterir. 635 değeri ile değişiklik yapabilirsiniz. margin değerleri de dipten (margin-bottom) ve sağdan (margin-right) bırakılacak boşluk değerleridir.

#search_outer {
 float: left;
 width: 165px;
 
}

kısmı arama formunuzun özelliklerini içerir. width değeri genişlik değeridir.

#search_inner .inputbox {
 border: 0px;
 padding: 3px 3px 3px 5px;
 font-family: arial, helvetica, sans-serif;
 font-size: 11px;
 color: #0066ff;

kodu ile arama formu içerisine yazılacak yazının özelliklerini belirtirsiniz. color değeri renk kodu font size ve font şekli üzerinde de değişiklik yapılabilir.

#header {
 float: left;
 padding: 0px;
 margin-right: 2px;
 width: 550px;
 height: 150px;
 background: url(../images/header_short.jpg) no-repeat;

bölümü logonuzun bulunduğu tabloyu içerir. genişlik (width) ve yükseklik (height) değerleri değiştirilebilir. background kodu logonuzun yerini belirttiğiniz koddur. Bu adresi değiştirebilirsiniz. no-repeat kodu logonun, sayfalar arası geçişte tekraren yüklenmesini engeller.

#footer {
 text-align: center;
 padding: 3px;

kısmı sitenizin en alt kısmında bulunan Copyright yazılarının olduğu bölümü içerir. Burada bu kısma yazacağınız yazının merkez (center) , sağa dayalı (right), sola dayalı (left) olup olmamasına karar verirsiniz.

a:link, a:visited {
 color: #0066ff; text-decoration: none;
 font-weight: bold;
}

kısmı sitedeki linklendirdiğiniz yazıların alacağı rengi ve yazı tipini belirtir. color değeri renk değişimini ve font-weight kısmı da kalın mı, italic mi yazılacak bunun karar verildiği koddur.

a:hover {
 color: #000000; text-decoration: none;
 font-weight: bold;

kısmı fare imlecini üzerine getirdiğinizi linklendirdiğiniz yazıların alacağı durumu gösterir. Yukarıda anlatıldığı gibi renk ve font özellikleri içerir.