Web Tasarım ve Programlama Sitesi

Joomla temalarda index.php sayfası template_css dosyasındaki sitilleri kullanarak temayı oluşturur. index.php sayasında tema bileşenlerinin konumlarını belirlemek için tablo, div veya tablo ve divler kullanılır. Tablo daha kolaydır fakat divler daha kullanışlıdır. div css biçimlendirilmelerinin uygulanabildiği alanlardır. Mesela bir div oluşturup içerisine sol menü yerleştirilir. template_css dosyasında sol menü için oluşturulan sitiller de bu dive uygulanır.

Burada sol menü biçimlendirmesi için joomla rhuk_solarflare_ii teması örnek olarak kullanılacak. Bu temada index.php sayfasında tablo ve divler kullanılmış. Sol menü için div kullanılmış.  

Aşağıda index.php sayfasında sol menünün oluşturulduğu kodlar ve açıklamaları verilmiştir. 

<div id=”left_outer”>
     <div id=”left_inner”>
          <?php mosLoadModules ( ‘left’, -2 ); ?>
     </div>
</div> 

Kodlar incelendiği zaman içiçe iki tane div kullanıldığı görülmektedir. Dıştaki div left_outer ile biçimlendirilmiş. İçteki div ise left_inner ile biçimlendirilmiş. left_outer ile menünün dışardaki nesneler ile olan biçimlendirmesi, left_inner ile menü içindeki biçimlendirmeler yapılmıştır. Aşağıda template_css.css sayfasında bulunan bu iki biçimlendirme gösterilmektedir.

#left_outer { 
    float: left;                  /*Menünün solda olacağı belirtiliyor. right değeri verilirse menü ekranın sağ tarafında görünecektir. */
    margin-top: 2px;    /*Sol menü gurubunun bulunduğu sütunun üst tarafı (logo) ile arasındaki mesafe buradan ayarlanır.*/
    width: 165px;    /*Menünün bulunduğu çerçevenin genişliği*/
}

#left_inner {
    border: 1px solid #cccccc;      /*Sol menünün içinde bulunduğu çerçevenin kalınlığı*/
    padding: 2px;               /*Sol menü elemanları ile sol menü çerçevesi arasındaki boşluk*/
    float: none !important;     /*important kullanımı yazının en altında açıklanmıştır.*/
    float: left;     /*Menünün içinde bulunduğu çerçevenin solunda olması*/
}

Seçicilerin başında # bulunmasının nedeni bu seçicilerin ID seçici olmasıdır. Div biçimlendirmelerinde genelde ID seçici kullanılır ve ID seçici oluşturulurken başında # işareti bulunmalıdır. Tablo biçimlendirmlerinde ise genelde sınıf seçiciler kullanılır ve onların başında # işareti yoktur.

important kullanımı : important kelime anlamı olarak önemli demektir. important değimini Internet Explorer 6.0 ve önceki sürümü tarayıcılar görmez. Diğer tarayıcılar görür ve important (önemli) satırında kullanılan biçimlendirmeyi uygularlar. Sonuç olarak : ie 6.0 ve önceki tarayıcılar için float değeri left, ie 6.0 üstü ve diğer tarayıcılar için ise float değeri none olacaktır.