Skip to Content
onur serkan kullanıcısının resmi
onur serkan, Sal, 18/11/2008 - 21:02 tarihinde.

Bu anlatımda flag metinlerine ikon ekleme ve flag metinlerini ikon ile değiştirme konularını ele alacağız. Bu yöntemleri kullanarak sitenizde tanımlamış olduğunuz her değişik flag için ayrı ikonlar kullanabilmeniz mümkün.

#1 Flag metinlerine ikon ekleme

Bu işlemi CSS kullanımıyla gerçekleştirmek mümkün. Yapmamız gereken şey metinlere biraz padding uygulayıp sağa kaydırmak ve böylece açılan yere de ikonları bir arkaplan resmi olarak eklemek. Bunun için aşağıda verilen örnek css kodunu kullanabilirsiniz.

Not: Kodda flagadi yazan yerlere oluşturduğunuz flag'in makine adını (ing: machine-name) yazınız.

.flag-flagadi a {
  padding-left: 20px;
}

.flag-flagadi a.flag-action {
  background: url(images/sevdim.png) no-repeat left center;
}

.flag-flagadi a.unflag-action {
  background: url(images/sevmedim.png) no-repeat left center;
}

#2 Flag metinlerini ikon ile değiştirme

Önceki uygulamada flag metninin yanına CSS kullanarak bir ikon eklemiştik. Şimdi ise metni tamamen kaldırmaya ve yerine bir ikon koymaya çalışacağız. Bunun için biraz elimizi drupal koduna bulaştırmak gerekiyor.

Flag eklentisi, işlevlerini beraberinde gelen tema üzerinden sunuyor. Bu temada çeşitli değişkenler kullanılıyor; bunlardan biri de flag metnini içeren $link_text değişkeni. Drupal'in bize sunduğu değişkenlerin içeriklerini temada kullanılmadan önce değiştirebilme esnekliğinden yararlanarak, bu değişkende yer alan flag metnini bir <img> etiketi ile değiştirebilmemiz mümkün. Bu yöntem şöyle çalışıyor:

  1. Aşağıdaki kodu temanızın template.php dosyasına ekliyorsunuz.
    function phptemplate_preprocess_flag(&$vars) {
      $image_file = path_to_theme() . '/flag-' . $vars['flag_name_css'] . '-' . ($vars['action'] == 'flag' ? 'off' : 'on') . '.png';
      if (file_exists($image_file)) {
        $vars['link_text'] = "<img src='$image_file' />";
      }
    }
  2. Her flag için "imleme (işaretleme)" ve "iptal etme" ikonlarını sırasıyla flag-flagadi-on.png ve flag-flagadi-off.png olarak adlandırarak tema ana klasörüne atıyorsunuz. İkon adlarının yapısını değiştirirseniz yukarıdaki kodu da buna uygun olarak değiştirmeniz gerektiğini unutmayın.
    Not: Dosya isimlerinde flagadi yazan yerlere oluşturduğunuz flag'in makine adını (ing: machine-name) yazınız.
  3. flag/theme klasöründe yer alan flag.tpl.php dosyasının bir kopyasını alıp tema dizininize koyuyorsunuz.
  4. Son olarak Drupal'in önbelleğini siliyorsunuz (Yönet » Site Ayarları » Performans).
4 strings kullanıcısının resmi
4 strings, Sal, 18/11/2008 - 21:31 tarihinde.

en son kod'da flagadı yazan yer yok.

onur serkan kullanıcısının resmi
onur serkan, Çrş, 19/11/2008 - 03:26 tarihinde.

Notu 2. madde yerine yanlışlıkla 1. maddeye yazmışım. "flagadi" kodda değil dosya isimlerinde var ve bunların değiştirilmesi gerekiyor. Anlatımı bu şekilde düzelttim. Uyarı için teşekkürler.

dainty kullanıcısının resmi
dainty, Pzt, 16/02/2009 - 18:16 tarihinde.

//editör notu: İlgili mesaj buraya taşınmıştır.

muhibbi kullanıcısının resmi
muhibbi, Cmt, 02/01/2010 - 20:11 tarihinde.

birinci maddedeki kodları nereye ekleyeceğiz?

muhibbi kullanıcısının resmi
muhibbi, Cuma, 08/01/2010 - 17:42 tarihinde.

ceaplayabilecek biri yok mu, ilk kodları flag modülündeki hangi css dosyasına ve nereden ekleyeceğiz?

etcetera9 kullanıcısının resmi
etcetera9, Cuma, 08/01/2010 - 18:00 tarihinde.

sayfaya etki eden herhangi bir CSS dosyasına yazılacak. Kullanılan temanın ana CSS'i (style.css gibi) olabilir...

Mikuru kullanıcısının resmi
Mikuru, Pzt, 26/04/2010 - 14:33 tarihinde.

Her şeyi adım adım tekrar tekrar kontrol ederek yaptım ancak ilk aşamayı başarıyla tamamlamama rağmen ikinci aşamayı bir türlü yapamadım. Yani şu an resmin yanında bir de yazı mevcut. Acaba nerede hata yapıyorum

olajawun kullanıcısının resmi
olajawun, Çrş, 28/04/2010 - 01:05 tarihinde.

Eğer yazıyı silip yerine ikon koymak istiyorsanız css de bu değişikliği yapmanız yeterli.

text-indent:-9999px;
background: url(resim.png) no-repeat;

Mikuru kullanıcısının resmi
Mikuru, Sal, 04/05/2010 - 13:59 tarihinde.

OLAJAWUN sizin dediğiniz yöntemi biliyorum ancak o şekilde de olmadı. Herşeyi tek tek yaptığım halde hata nerde anlayamadım. Uuzn zamandır hata arıyorum. Ben bu işi neden beceremedim yaa :(

Mikuru kullanıcısının resmi
Mikuru, Sal, 04/05/2010 - 14:23 tarihinde.

evet hatanın ne olduğunu buldum. :)

sadece flag.tpl.php dosyasını taşımak işe yaramıyor. Aynı zamanda flag.css ve flag.js dosyalarını da tema klasörüne atmak gerekiyor.

Geliştirmede şimdiki aşama ise flagı node başlığının yanına taşımak. Aynı bildirgeçte olduğu gibi. Bunu nasıl yapacağım hakkında bilgisi olan var mı?

olajawun kullanıcısının resmi
olajawun, Çrş, 05/05/2010 - 00:43 tarihinde.

Doğru kodu uyguladığınıza emin misiniz, en basit ve kesin çözüm text-indent tir çünkü.

cihan, Çrş, 05/05/2010 - 11:55 tarihinde.

mikuru-> eklediğin kodların yerini değiştirerek bana yazdırabilirsin gibi geliyor. Uğraşmadım bu konuda ama node title ın yanına aldığında flag yazdırma komutlarını olacak gibi geldi.