[xuma]

Joomla Tema Tasarımı Bölüm-3

Bölüm 3’den tekrar merhaba arkadaşlar. Bu bölümde geçen bölümlerde bahsettiğim gibi joomla’nın stilize edilmesinden bahsedeceğim.Ancak ilk iki bölümdür bahsettiğim kolay yoldan burada uzaklaşacağız.Çünkü bu bölümde joomla’nın klasik html çıktılarından kurtulup kendi html çıktılarımızı joomla’ya ekleyeceğiz.Şimdi konuyu biraz daha açalım;

Joomla içeriğini sizlere sunarken sabit bir yapı kullanır bunu standart tema ile kaynağı görüntüleyerek ulaşabilirsiniz.Yada firefox-firebug ikilisini kullanarak aşağıdaki gibi bu yapıyı yakından inceleyebilirsiniz.

Gördüğünüz gibi bu yapıda tablolar,bu tablolara ait css class’lar ve yine yukarıdaki resimde görünmeyen birçok eleman daha mevcut ve bunları sadece css bilgilerini değiştirerek istediğimiz stili elde edebiliriz.

Şimdi buna bir örnekle bakalım ; joomla yazılarımızın başlıklarını tuttuğu tablo satırına contentheading (Türkçeside İçerik Başlığı demek) class’ını atamış.Bizde elimizdeki temaya contentheading classını tanımlayalım.Sadece css klasörü içerisinde genel.css’i açıp içerisine aşağıdaki kısmı ekleyelim.

CSS

PHP- Kodu:

.contentheading {
    font-family:comic sans MS;
    font-size:18px;
    font-weight:bold;
} 


Ve sitemizi tekrar yenileyelim.Gördüğünüz gibi işe yaradı.İlk ve sonraki hallerine aşağıdaki resimden göz atabilirsiniz.

Gördüğünüz gibi başlığımız gerçektende tanımladığımız gibi comic sans ms yazıtipine ve 18px boyuta sahip oldu.Ve bunun gibi birçok css class’ı joomla içinde tanımlanmakta.Bu class’lar ile ilgili geniş bilgiye Kesh’in Joomla 1.5 css bu başlıktaki verdiği sitelerden ulaşabilirsiniz ve bunları tek tek düzenlemek kısa ve kolay yolu.

İkinci yolumuz ise html çıktılarını tema dosyamızda tanımlamak.(Klasik joomla çıktıları components\com_content\views adresinde bulunmakta.)Bunun yararı ise klasik joomla görünmünden bizi kurtarır ve dilediğimiz bilgiyi dilediğimiz yere yerleştirmemizi ,stilize etmemizi sağlar.

İlk olarak temamız içerisinde gerekli dizini oluşturalım.Temamız içerisindeki html klasörü içerisine com_content adlı bir klasör oluşturalım bunun içerisinede Frontpage adlı bir klasör oluşturalım.Son olarak Frontpage klasörü içerisine default_item.php adlı bir dosya oluşturalım.Böylelikle joomlanın components\com_content\views\frontpage\tmpl\defaul t_item.php adresi içerisinde tanımlanan yapısının üzerine yeni bir yapı inşa ettik.

Not:Bu yazı boyunca bu işle yeni ilgilenen arkadaşları düşünerek birçok ekstra bilgiden kaçınacağım.Örneğin yazı başlığı yazdırılırken yaklaşık 3-4 kontrol işleminden geçer.(başlık gösterme açıkmı ? , devamını oku linki varmı ? başlık link halindemi ? vs vs)

Default_item.php dosyamızı açalım ve şu şekilde bir yapı oluşturalım.

HTML

PHP- Kodu:

<div class="yazi-tasiyici">
    <div class="yazi-basligi">
        <h2></h2>
    </div>
    <div class="yazi-bilgisi">
        <span class="tarih"></span>
        <span class="yazar"></span>
    </div>
    <div class="yazi-icerigi"></div>
    <div class="alt-bilgiler">
        <span class="devami"></span>
    </div>
    <span class="ayirici"></span>
</div> 


Görüldüğü gibi temamıza başlarken yaptığımızdan çokda farklı bir yapı ortaya çıkmadı.Ancak şunuda unutmamak lazım bu bir örnek olduğu için pdf,yazdirma ikonu veya son güncelleme tarihi gibi birçok ögeyi kullanmadım.Dilerseniz bunları siz ekleyebilirsiniz.
Artık joomla temamıza hükmetmeye başlayalım.Yazı başlığı katmanımızı şu şekilde değiştirelim.



HRML ESKİ

PHP- Kodu:

<div class="yazi-basligi">
        <h2></h2>
    </div> 


HTML YENİ

PHP- Kodu:

<div class="yazi-basligi">
    <h2><?php echo $this->escape($this->item->title); ?></h2>
</div>

Gördüğünüz gibi

PHP- Kodu:

<?php echo $this->escape($this->item->title); ?>

ifadesi yazımızın başlığını gösteren php fonksiyionu ve diğer tüm bilgiler için benzer fonksiyonlar mevcut.Bunlardan bazıları ;

Tarih:

PHP- Kodu:

<?php echo JHTML::_('date', $this->item->created, 
JText::_('DATE_FORMAT_LC2')); ?>

Yazar:

PHP- Kodu:

<?php JText::printf( $this->item->author); ?>

Yazı İçeriği:

PHP- Kodu:

<?php echo $this->item->text; ?>

Devamı:

PHP- Kodu:

<?php echo $this->item->readmore_link; ?>

Şimdi bu bilgileri gerekli katmanlarımıza yerleştirelim yaklaşık aşağıdaki gibi bir kod elde etmemiz gerekir.

default_item.php

PHP- Kodu:

<div class="yazi-tasiyici">
<div class="yazi-basligi">
    <h2>
    <?php 
    echo $this->escape($this->item->title); 
    ?>
    </h2>
</div>
<div class="yazi-bilgisi">
    <span class="tarih">
        <?php echo JHTML::_('date', 
        $this->item->created, 
        JText::_('DATE_FORMAT_LC2')); ?>
    </span>
    <span class="yazar">
        <?php 
        JText::printf( $this->item->author); 
        ?>
    </span>
</div>
<div class="yazi-icerigi">
    <?php echo $this->item->text; ?>
</div>
<div class="alt-bilgiler">
    <span class="devami">
    <a rel="nofollow" href="<?php 
    echo $this->item->readmore_link; 
    ?>">
    Devamı</a>
    </span>
</div>
<span class="ayirici"></span>
</div>
<?php 
echo $this->item->event->afterDisplayContent; 
?>

Şimdi artık temamızı stilize etmeye başlayalım.İlk olarak yazi-basligi katmanımızı ele alalım.

CSS

PHP- Kodu:

.yazi-basligi{
    width:100%;
}
.yazi-basligi h2 {
    color:#0C6B97;
    font-family:Arial,Thoma;
    font-size:14px;
    padding:5px 0 0 10px;
    text-transform:uppercase;
} 


Ve bu kodları genel.css dosyama ekliyorum.Sonrasında benzer şekilde yazi-bilgisi katmanına ait css kodlarını ekliyorum.

CSS

PHP- Kodu:

.yazi-bilgisi {
    font-family:verdana;
    font-size:9px;
    color:#ACA9A9;
    padding:5px 0 0 10px;
    margin:-5px 0 0 0;
} 


Ve bu katmanda ufak bir html değişiklik yapıyorum.

HTML

PHP- Kodu:

<span class="tarih">
    <?php 
    echo JHTML::_('date', $this->item->created, 
    JText::_('DATE_FORMAT_LC2')); ?> tarihinde
</span>
<span class="yazar">
    <b><?php JText::printf( 
    $this->item->author); ?></b> tarafından yazılmış.
</span>

Sadece tarihinde ve tarafindan kısımlarını ekledim .Sıra geldi yazı-icerigi katmanımıza burası içinde

CSS

PHP- Kodu:

.yazi-icerigi {
    font-family:"Lucida Grande",Helvetica;
    font-size:12px;
    color:#333333;
    padding:5px 0 0 10px;
} 


Artık sitemiz biraz daha hoş görünmeye başladı şimdi sırayı bozmadan devami linkini biraz stilize edelim.

CSS

PHP- Kodu:

.devami {
    font-family:"Lucida Grande",Helvetica;
    font-size:12px;
    color:#333333;
    padding:5px 15px 0 0;
    float:right;
    position:relative;
} 


Sanırım sağda daha güzel görünecektir.Çoğu katmanımızı hallettik şimdi ayirici katmanımızı biraz değiştirelim.

CSS

PHP- Kodu:

.ayirici {
    background:#ecece2;
    clear:both;
    width:100%;
    height:1px;
    display:block;
    
} 


Artık temamız yavaş yavaş şekil almaya başladı ancak linklerimiz oldukça berbat görünüyor.Katmanlara özel link stilleri ayarlamadan önce genel bir link stili tanımlayarak işleri biraz kolaylaştıralım.

CSS

PHP- Kodu:

a {
    color:#0C6B97;
    text-decoration:none;
    font-size:12px;
} 


Bölüm 3 burda bitmiyor ama bölüm 3’ün ilk bölümünün sonu burası gelecek bölümde stilize etme işlemlerine devam edeceğim.

[Er-ŞAH]

çook eline sağlık b10 b20 leri beraber görürüz inş.:]

[KLAMP]

Teşekkürler Güzel Paylaşım Olmuş

[tyurs]

Süper anlatım biraz karışık gibi duruyor ama devamını heyecanla bekleyeceğiz

[Tamer Okuşluk]

Hakan Bey benzeri olmayan bu anlatımlarından dolayı çok teşekkür ederim. Devamını oku class devamını oku şeklinde verilmeyen makalelerdede kendiliğinden oluşuyor. Bu problemin üstesinden gelemediğim için hazır html klasoru kullandım. . Yinede hocam classlar konusunu biraz daha açarsanız seviniriz. Devamını oku class ında karşılaştığım problem genelmi bendenmi kaynaklanıyor bilemiyorum.

Dersleriniz sayesinde önceki çalışmalarımdanda eklemeler yaparak ben yaptım diyebileceğim bir taslak oluşturdum

xuma ders destekli tema çalışması

Demo

[majesty33]

acaba derslerin devamı gelecek mi?

[Tamer Okuşluk]

majesty33 Nickli Üyeden Alıntı

acaba derslerin devamı gelecek mi?

İnşallah sabırla bekliyoruz xuma şu sıralar yoğun sanırım ama devamı gelecektir.

[xuma]

Tamer Okuşluk Nickli Üyeden Alıntı

Hakan Bey benzeri olmayan bu anlatımlarından dolayı çok teşekkür ederim. Devamını oku class devamını oku şeklinde verilmeyen makalelerdede kendiliğinden oluşuyor. Bu problemin üstesinden gelemediğim için hazır html klasoru kullandım. . Yinede hocam classlar konusunu biraz daha açarsanız seviniriz. Devamını oku class ında karşılaştığım problem genelmi bendenmi kaynaklanıyor bilemiyorum.

Dersleriniz sayesinde önceki çalışmalarımdanda eklemeler yaparak ben yaptım diyebileceğim bir taslak oluşturdum

xuma ders destekli tema çalışması

Demo

Merhaba cevapların biraz geç gelmesinden dolayı kusura bakmayın.Gerçektende biraz yoğunum.Derslerin devamı gelecek ancak biraz daha fazla soru gelmesini bekliyorum böylece konu daha anlaşılabilir olacaktır.
@Tamer gösterdiğim yöntem kısa bir gösterimden ibaret bunu şu şekilde yaparak sorununu çözebilirsin.

<?php if ($this->item->params->get('show_readmore') && $this->item->readmore) : ?>
<span class="devami">
		<a href="<?php echo $this->item->readmore_link; ?>" title="<?php echo $this->escape($this->item->title); ?>">
	
			<?php if ($this->item->readmore_register) : ?>
				<?php echo JText::_('Register to read more...'); ?>
			<?php else : ?>
				<?php echo JText::_('Read more...'); ?>
			<?php endif; ?>
	</a>
	</span>
<?php endif; ?>

Mantığı aslında çok basit eğer readmore varsa gösterir yoksa göstermez ve buna ek olarak Eğer kayıtlı kullanıcı gerekiyorsa uyarı verir.

[Tamer Okuşluk]

Çok teşekkür ederim hocam ellerinize sağlık

[By_cLeaN]

Teşekkürler...