Merhaba, sitemizden daha iyi yararlanabilmek için kayıt olunuz. Kayıt olmak için tıklayınız.. Şifrenizi Unuttuysanız yeni şifre istemek için tıklayınız..

Forumu daha iyi görüntüleyebilmek için firefox, safari, IE8 kullanınız. Foruma başlarken lütfen kuralları okuyunuz. Dersler ve arama size daha çabuk yardımcı olacaktır.

 

Joomla 1.5 Tema Tasarımı b3

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
Cevapla
 
LinkBack Seçenekler Stil
Alt 06-07-2009, 07:13   #1
Kullanıcı Adı:

xuma

Avatar

xuma - ait Kullanıcı Resmi (Avatar)

Ünvanı: Hakan ERSU

Kayıt Tarihi: Mar 2008

Bulunduğu yer: Denizli

Mesajlar: 421

Durum: Offline

Tecrübe Puanı: 10


Standart Joomla 1.5 Tema Tasarımı b3

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.
Resimin orjinal boyutu için tıklayın.
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.
Resimin orjinal boyutu için tıklayın.
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.
Resimin orjinal boyutu için tıklayın.
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:
{
    
color:#0C6B97;
    
text-decoration:none;
    
font-size:12px;

Resimin orjinal boyutu için tıklayın.
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.
__________________
Forum Kuralları! | Dead Dreams

Konu emre tarafından (11-15-2009 Saat 16:02 ) değiştirilmiştir..
  Alıntı ile Cevapla
Sponsor
Alt 06-08-2009, 11:44   #2
Kullanıcı Adı:

Er-ŞAH

Avatar

Er-ŞAH - ait Kullanıcı Resmi (Avatar)

Ünvanı: Yeni Joomlacı

Kayıt Tarihi: May 2009

Bulunduğu yer: ufak tefek işler kaldı

Mesajlar: 26

Durum: Offline

Tecrübe Puanı: 0


Standart Cevap: Joomla 1.5 Tema Tasarımı b3

çook eline sağlık b10 b20 leri beraber görürüz inş.:]
  Alıntı ile Cevapla
Alt 06-08-2009, 11:51   #3
Kullanıcı Adı:

KLAMP

Avatar

KLAMP - ait Kullanıcı Resmi (Avatar)

Ünvanı: Üyeliği Durduruldu

Kayıt Tarihi: Feb 2009

Mesajlar: 38

Durum: Offline

Tecrübe Puanı: 0


Standart Cevap: Joomla 1.5 Tema Tasarımı b3

Teşekkürler Güzel Paylaşım Olmuş
  Alıntı ile Cevapla
Alt 06-09-2009, 20:40   #4
Kullanıcı Adı:

tyurs

Avatar

tyurs - ait Kullanıcı Resmi (Avatar)

Ünvanı: Yeni Joomlacı

Kayıt Tarihi: Aug 2008

Mesajlar: 22

Durum: Offline

Tecrübe Puanı: 0


Standart Cevap: Joomla 1.5 Tema Tasarımı b3

Süper anlatım biraz karışık gibi duruyor ama devamını heyecanla bekleyeceğiz
  Alıntı ile Cevapla
Alt 07-01-2009, 21:32   #5
Kullanıcı Adı:

Tamer Okuşluk

Avatar

Tamer Okuşluk - ait Kullanıcı Resmi (Avatar)

Ünvanı: JoomlaTR

Kayıt Tarihi: Mar 2009

Mesajlar: 1.422

Durum: Offline

Tecrübe Puanı: 10


Standart Cevap: Joomla 1.5 Tema Tasarımı b3

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
__________________
Forum Kurallarını Okuyunuz.Derslerimizi İnceleyiniz SSS Temel Bilgileri İnceleyiniz
  Alıntı ile Cevapla
Alt 07-15-2009, 14:44   #6
Kullanıcı Adı:

majesty33

Avatar

majesty33 - ait Kullanıcı Resmi (Avatar)

Ünvanı: Amatör Joomlacı

Kayıt Tarihi: Oct 2008

Bulunduğu yer: Silifke / Mersin

Mesajlar: 59

Durum: Offline

Tecrübe Puanı: 2


Standart Cevap: Joomla 1.5 Tema Tasarımı b3

acaba derslerin devamı gelecek mi?
  Alıntı ile Cevapla
Alt 07-15-2009, 15:11   #7
Kullanıcı Adı:

Tamer Okuşluk

Avatar

Tamer Okuşluk - ait Kullanıcı Resmi (Avatar)

Ünvanı: JoomlaTR

Kayıt Tarihi: Mar 2009

Mesajlar: 1.422

Durum: Offline

Tecrübe Puanı: 10


Standart Cevap: Joomla 1.5 Tema Tasarımı b3

Alıntı:
majesty33 Nickli Üyeden Alıntı Mesajı göster
acaba derslerin devamı gelecek mi?
İnşallah sabırla bekliyoruz xuma şu sıralar yoğun sanırım ama devamı gelecektir.
__________________
Forum Kurallarını Okuyunuz.Derslerimizi İnceleyiniz SSS Temel Bilgileri İnceleyiniz
  Alıntı ile Cevapla
Alt 08-04-2009, 02:09   #8
Kullanıcı Adı:

xuma

Avatar

xuma - ait Kullanıcı Resmi (Avatar)

Ünvanı: Hakan ERSU

Kayıt Tarihi: Mar 2008

Bulunduğu yer: Denizli

Mesajlar: 421

Durum: Offline

Tecrübe Puanı: 10


Standart Cevap: Joomla 1.5 Tema Tasarımı b3

Alıntı:
Tamer Okuşluk Nickli Üyeden Alıntı Mesajı göster
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.
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; ?>
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.
__________________
Forum Kuralları! | Dead Dreams
  Alıntı ile Cevapla
Alt 08-04-2009, 03:17   #9
Kullanıcı Adı:

Tamer Okuşluk

Avatar

Tamer Okuşluk - ait Kullanıcı Resmi (Avatar)

Ünvanı: JoomlaTR

Kayıt Tarihi: Mar 2009

Mesajlar: 1.422

Durum: Offline

Tecrübe Puanı: 10


Standart Cevap: Joomla 1.5 Tema Tasarımı b3

Çok teşekkür ederim hocam ellerinize sağlık
__________________
Forum Kurallarını Okuyunuz.Derslerimizi İnceleyiniz SSS Temel Bilgileri İnceleyiniz
  Alıntı ile Cevapla
Alt 08-25-2009, 20:49   #10
Kullanıcı Adı:

By_cLeaN

Avatar

By_cLeaN - ait Kullanıcı Resmi (Avatar)

Ünvanı: Yeni Joomlacı

Kayıt Tarihi: Aug 2009

Bulunduğu yer: Kayseri

Mesajlar: 2

Durum: Offline

Tecrübe Puanı: 0


Standart Cevap: Joomla 1.5 Tema Tasarımı b3

Teşekkürler...
  Alıntı ile Cevapla
Cevapla

Bookmarks

Etiketler
joomla 1.5 tema tasarımı

Seçenekler
Stil

Yetkileriniz
Konu Acma Yetkiniz Yok
Cevap Yazma Yetkiniz Yok
Eklenti Yükleme Yetkiniz Yok
Mesajınızı Değiştirme Yetkiniz Yok

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodu Kapalı
Trackbacks are Açık
Pingbacks are Açık
Refbacks are Açık


Benzer Konular
Konu Konuyu Başlatan Forum Cevaplar Son Mesaj
Joomla Tema Tasarımı b3-2 xuma Yazılı Dersler 4 11-20-2009 14:51
Joomla 1.5 Tema Tasarımı b1-b2 xuma Yazılı Dersler 19 10-21-2009 21:29
Her "bölüme,kategoriye" ayrı ayrı tasarımı nasıl yapabilirim? kadel Tema Sorunları 7 07-24-2009 19:20
joomla tema pc-uzmani Çöp Tenekesi 1 06-09-2009 00:20
Mizah Sitesi Tasarımı Acil Lazım leon21 Çöp Tenekesi 2 04-30-2009 21:12