Joomla 1.5 Tema Tasarımı b3

[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

.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

<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İ

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

HTML YENİ

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

Gördüğünüz gibi

<?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 echo JHTML::_('date', $this->item->created, 
JText::_('DATE_FORMAT_LC2')); ?>

Yazar:

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

Yazı İçeriği:

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

Devamı:

<?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

<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

.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

.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

<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

.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

.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

.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

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]

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]

acaba derslerin devamı gelecek mi?

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

[xuma]

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]

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

[By_cLeaN]

Teşekkürler...