View Görüntüsünü Değiştirmek
Drupalde yaptığımzı sitelerde çoğunlukla views eklentisine başvururuz. Görüntüleme işlemini yaptığımız bu eklentinin görsel açıdan güzelleşmesini sağlayan bir kaç eklenti olsada istediğimiz görüntüyü elde edebilmek için css sınıflarını ve değişkenlerini bilmemize ihtiyaç var.
Viewsin kullandığı değişkenleri burada belirterek css yardımı ile görüntüyü nasıl değiştireneceğinize yol göstereceğim. Css bilmiyorsanız üzgünüm bu yazıyı okumadan önce css öğrenmelisiniz. Bu yazımda bir css kodu olmayacak. Yorum olarak sorularınızı eklerseniz başka bir konuda değinebilirim.
View modülünün başlıca css sınıfları şunlardır:
* .view-header
* .view-filters
* .view-content
* .view-empty (İçerik bulunamazsa kullanılır)
* .view-footer
* .feed-icon
* .attachment-before
* .attachment-after
Tabi bu sınıflar geneldir ve kullandığınızda tüm views ile gösterilen bölümlere uygulanır. Sadece özel bir views bloğuna veya sayfasına uygulamak istersek ona ait ön sınıfı veya id değerini bilmemiz gerekir. Bunun için firefoxun firebug eklentisini kullanabilirsiniz.
Varsayalım id değerimiz view-arat-class olsun ve içersindeki başlıklara css ile müdehale edelim, o zaman css kodumuzda şu kalıpta olmalıdır:
/*Css tanımlama kodlarınız*/
...
}
Şimdi gelelim view ile göstereceğimiz bilgilerin tema dosyasını oluşturmaya;
Öncelikle views yönetim sayfasına gidelim ve buadan görüntülemesini düzenleyeceğimiz view parçasına ulaşalım. Ayarlarda bulunan Theme: İnformation tıklıyoruz. Açılan bölüm aşağıdaki gibidir:
Burada;
- Display output: views-view.tpl.php, views-view--anasayfa.tpl.php, views-view--.tpl.php, views-view--default.tpl.php, views-view--anasayfa--default.tpl.php
- Style output: views-view-unformatted.tpl.php, views-view-unformatted--anasayfa.tpl.php, views-view-unformatted--.tpl.php, views-view-unformatted--default.tpl.php, views-view-unformatted--anasayfa--default.tpl.php
- Row style output: views-view-row-node.tpl.php, views-view-row-node--anasayfa.tpl.php, views-view-row-node--.tpl.php, views-view-row-node--default.tpl.php, views-view-row-node--anasayfa--default.tpl.php
Sadece genel blok görünümünü değiştirmek için "Display output" a tıklıyoruz.
// $Id: views-view.tpl.php,v 1.13 2009/06/02 19:30:44 merlinofchaos Exp $
/**
* @file views-view.tpl.php
* Main view template
*
* Variables available:
* - $css_name: A css-safe version of the view name.
* - $header: The view header
* - $footer: The view footer
* - $rows: The results of the view query, if any
* - $empty: The empty text to display if the view is empty
* - $pager: The pager next/prev links to display, if any
* - $exposed: Exposed widget form/info to display
* - $feed_icon: Feed icon to display, if any
* - $more: A link to view more, if any
* - $admin_links: A rendered list of administrative links
* - $admin_links_raw: A list of administrative links suitable for theme('links')
*
* @ingroup views_templates
*/
?>
<div class="view view-<?php print $css_name; ?> view-id-<?php print $name; ?> view-display-id-<?php print $display_id; ?> view-dom-id-<?php print $dom_id; ?>">
<?php if ($admin_links): ?>
<div class="views-admin-links views-hide">
<?php print $admin_links; ?>
</div>
<?php endif; ?>
<?php if ($header): ?>
<div class="view-header">
<?php print $header; ?>
</div>
<?php endif; ?>
<?php if ($exposed): ?>
<div class="view-filters">
<?php print $exposed; ?>
</div>
<?php endif; ?>
<?php if ($attachment_before): ?>
<div class="attachment attachment-before">
<?php print $attachment_before; ?>
</div>
<?php endif; ?>
<?php if ($rows): ?>
<div class="view-content">
<?php print $rows; ?>
</div>
<?php elseif ($empty): ?>
<div class="view-empty">
<?php print $empty; ?>
</div>
<?php endif; ?>
<?php if ($pager): ?>
<?php print $pager; ?>
<?php endif; ?>
<?php if ($attachment_after): ?>
<div class="attachment attachment-after">
<?php print $attachment_after; ?>
</div>
<?php endif; ?>
<?php if ($more): ?>
<?php print $more; ?>
<?php endif; ?>
<?php if ($footer): ?>
<div class="view-footer">
<?php print $footer; ?>
</div>
<?php endif; ?>
<?php if ($feed_icon): ?>
<div class="feed-icon">
<?php print $feed_icon; ?>
</div>
<?php endif; ?>
</div> <?php /* class view */ ?>
Açılan kodlar aynen buna benzer olacaktır. Sadece ben bu view görünümünü değiştirmek istiyorum o nedenle benim viewsimin adı "anasayfa" olduğundan "Display output" a bize hangi tema dosyalarını kullanabileceğimizi gösteren kısımdaki sayfalardan views-view--anasayfa.tpl.php sayfasını içersine yukarıdaki kodları yapıştırarak kullandığım tema dizinine kaydediyoruz. Genel olarak tüm viewlere hitap etmek daha mantıklıdır bunun için dosyanın adını views-view.tpl.php olarak kaydedin.
Aynı işlemi "Style output" ve "Row style output" seçenekleri içinde gerçekleştiriyoruz.
Şimdi ilk olarak oluşturduğumuz "views-view--anasayfa.tpl.php" dosyasını yeniden açalım.
Buradaki ilk kodlar bize css sınıfımızı belirtiyor.
<div class="view view-<?php print $css_name; ?> view-id-<?php print $name; ?> view-display-id-<?php print $display_id; ?> view-dom-id-<?php print $dom_id; ?>">
Biraz kod bilen birisinin anlayacağı gibi burada class="view view- print $css_name; ile tüm viewler için genel bir css sınıf tanımlaması yapılmıştır. Peki sınıfımızın adı ne olacak diye düşünmeye gerek yok. Benim view parçamın adını anasayfa olarak girmiştim, bu nedenle benim sınıfım class="view view-anasayfa şeklinde tanımlanacaktır.
Şimdi temamızın style.css veya herhangi bir still dosyasıda olabilir açalım. İçersine;
.view-anasayfa {
Css kodlarımız...
}
Şeklinde viewimizin görüntüsünü tanımlayalım.
Satırların görünümünü değiştirmek için daha önceden tema dosyamıza kaydettiğimiz "views-view-row-node.tpl.php" dosyasındaki css sınıf tanımlama bilgilerine bakarak ilgili sınıfları oluşturabiliriz.
Css bilgilerine hazır ulaşmak için Google amcamıza "css ile tablosuz blok arkaplanı belirlemek" ve benzeri aramalar yapıp kendi stilinizde kullanabilirsiniz. Aynı şekilde tabloların satır görüntülerini değiştirmek için google da "css tablo görünümleri" ve benzeri aramalar yaparak hazır kodları stillerinizde kullanabilirsiniz.
Kolay gelsin...
Kaynak: logrus
Yorumlar
Ben cevabımı aldım:) teşekkür ediyorum arkadaşım..
Bir dene olmadı kodları verirsin daha ayrıntılı bakılabilir.
Eline emeğine sağlık dersler gayet güzel. Ben bir resim galerisi oluşturmak istiyorum. Yani resim galerisi ayrı bir sayfada olacak sanırım bunuda bu şekilde halledeceğiz. Herşeyi yaptım ne gerekiyorsa ekledim. ornegin resim.tpl dosyası oluşturdum bu dosyayı nasıl okutacağım? Giriş yapabilmek için ne gibi ayarlar yapmam lazım? Sayfaya
Teşekkürler..
Ajan... :)
resim.tpl.php dosyasını views görmez. Eğer oluşturduğun viewsin adı resim ise views-view--resim.tpl.php şeklinde oluşturmalısın.
Oluşturduktan sonra viewse geri dön resim views sorgusunda sol tarafta bulunan "Theme" seçeneğine yeniden tıkla ve açılan sayfada oluşturduğun temayı tanıması için butona tıklamalısın.
Resim galerisini ayrı sayfada yapmak için resim viewsinin içinde görünüm olarak sayfayı eklemelisin. Tabi sonrasında senin sayfanın adresinin ne olacağını ve bir menü istersen onu girebileceğin yerler sunulacak. Bunlara views ayarlarını görüntülediğin 3 bloktan soldakinin altındaki bölümden ulaşabilirsin. Biraz tarzanca anlatım oldu :)
Kolay gelsin.
Yeni yorum veya soru gönder