çook eline sağlık b10 b20 leri beraber görürüz inş.:]
Joomla! 1.5.x Dersleri Kategorisinde ve Yazılı Dersler Forumunda Bulunan Joomla 1.5 Tema Tasarımı b3 Konusunu Görüntülemektesiniz, Konu İçerigi Kısaca ->> 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 ...
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
Ve sitemizi tekrar yenileyelim.Gördüğünüz gibi işe yaradı.İlk ve sonraki hallerine aşağıdaki resimden göz atabilirsiniz.PHP- Kodu:.contentheading {
font-family:comic sans MS;
font-size:18px;
font-weight:bold;
}
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
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.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>
Artık joomla temamıza hükmetmeye başlayalım.Yazı başlığı katmanımızı şu şekilde değiştirelim.
HRML ESKİ
HTML YENİPHP- Kodu:<div class="yazi-basligi">
<h2></h2>
</div>
Gördüğünüz gibiPHP- Kodu:<div class="yazi-basligi">
<h2><?php echo $this->escape($this->item->title); ?></h2>
</div>
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ı ;PHP- Kodu:<?php echo $this->escape($this->item->title); ?>
Tarih:
Yazar:PHP- Kodu:<?php echo JHTML::_('date', $this->item->created,
JText::_('DATE_FORMAT_LC2')); ?>
Yazı İçeriği:PHP- Kodu:<?php JText::printf( $this->item->author); ?>
Devamı:PHP- Kodu:<?php echo $this->item->text; ?>
Şimdi bu bilgileri gerekli katmanlarımıza yerleştirelim yaklaşık aşağıdaki gibi bir kod elde etmemiz gerekir.PHP- Kodu:<?php echo $this->item->readmore_link; ?>
default_item.php
Şimdi artık temamızı stilize etmeye başlayalım.İlk olarak yazi-basligi katmanımızı ele alalım.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;
?>
CSS
Ve bu kodları genel.css dosyama ekliyorum.Sonrasında benzer şekilde yazi-bilgisi katmanına ait css kodlarını ekliyorum.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;
}
CSS
Ve bu katmanda ufak bir html değişiklik yapıyorum.PHP- Kodu:.yazi-bilgisi {
font-family:verdana;
font-size:9px;
color:#ACA9A9;
padding:5px 0 0 10px;
margin:-5px 0 0 0;
}
HTML
Sadece tarihinde ve tarafindan kısımlarını ekledim .Sıra geldi yazı-icerigi katmanımıza burası içindePHP- 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>
CSS
Artık sitemiz biraz daha hoş görünmeye başladı şimdi sırayı bozmadan devami linkini biraz stilize edelim.PHP- Kodu:.yazi-icerigi {
font-family:"Lucida Grande",Helvetica;
font-size:12px;
color:#333333;
padding:5px 0 0 10px;
}
CSS
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.PHP- Kodu:.devami {
font-family:"Lucida Grande",Helvetica;
font-size:12px;
color:#333333;
padding:5px 15px 0 0;
float:right;
position:relative;
}
CSS
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.PHP- Kodu:.ayirici {
background:#ecece2;
clear:both;
width:100%;
height:1px;
display:block;
}
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.
Konu emre tarafından (11-15-2009 Saat 16:02 ) değiştirilmiştir.
çook eline sağlık b10 b20 leri beraber görürüz inş.:]
Teşekkürler Güzel Paylaşım Olmuş
Süper anlatım biraz karışık gibi duruyor ama devamını heyecanla bekleyeceğiz![]()
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
acaba derslerin devamı gelecek mi?
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.
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.Kod:<?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; ?>
Çok teşekkür ederim hocam ellerinize sağlık
Teşekkürler...
Paylaş