Flag eklentisinde bağlantılarda ikon kullanımı
Drupal sisteminde flag eklentisi ile favorilerime ekle, şikayet et gibi sosyal platformların vazgeçilmez işlemlerini yaptırmamız mümkün. Genel olarak bu eklenti ile içeriklerin altında metün şeklinde eklediğimiz özelliğin bağlantısı bulunur. Biz bu bağlantı ile birlikte bir ikon veya sadece ikon kullanımını gerçekleştirelim.
Flag metinlerine ikon eklemek için aşağıdaki işlemleri yapabiliriz:
Bu işlemi gerçekleştirmek için temanızın css dosyası içersine aşağıdaki kodu uyarlayarak eklememiz yeterlidir.
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;
}
Kod satırlarında flagadi yazan yerlere oluşturduğunuz flag'in makine adını yazmanız gerekmektedir.
Flag metinlerini ikon ile değiştirmek istersek aşağıdaki adımları takip etmeliyiz:
Flag eklentisi işlemlerde tema dosyasının stil özellikleri yanında bazı yapılarınıda kullanmaktadır. Bu sayede tema dosyalarımız içersinde çeşitli değişkenler aracılığı ile flag metinlerini kaldırıp ikon ekleyebileceğiz.
Sırası ile aşağıdaki işlemleri yaparak flag metnini kaldırıp ikonlarımızı gösterelim:
1. Aşağıdaki kodu temanızın template.php dosyasına ekliyorsunuz.
$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 isimlendirip tema ana dizini içersine atalım. Dosya isimlerinde flagadi yazan yerlere oluşturduğunuz flag'in makine adını yazmayı unutmayınız.
3. flag/theme klasöründe yer alan flag.tpl.php dosyasının bir kopyasını alıp tema dizinine kopyalıyoruz.
4. Son olarak Drupal'in önbelleğini siliyoruz.
Bu işlemleri tamamladıktan sonra flag eklediğimiz içeriğin sayfasına bakmamız ve yaptığımız değişikliği görmemiz mutlu olmamız için yeterlidir.
eğer genede ikonlarla beraber yazı gözüküyorsa css dosyanızın içersine ilgili flag css sınıfını kullanarak bu kodları ekleyiniz:
text-indent:-9999px;
background: url(resim.png) no-repeat;
Yorumlar
Yeni yorum veya soru gönder