Drupal İpucu : Resimli Form Butonları Oluşturmak

Drupal ile geliştirdiğiniz sitenizde bir form butonunu (arama formu butonu, anket'e oy verme butonu vs.) , standart görüntüsünden çıkartıp bir resim ile değiştirmek istiyorsanız yapabileceğiniz en kısa ve kolay yol bir kaç küçük css hilesidir. Örnek olarak bir butonun üzerindeki yazıyı kaldırıp , onu bir görsel ile değiştirmek istiyorsanız kullanmanız gereken kod yaklaşık aşağıdaki gibidir:

#search-block-form .form-submit {
width:50px; /* butonun genişliği */
height:30px; /* butonun yüksekliği */
background:url(images/submit-back.jpg) no-repeat; /* buton yerine kullanmak istediğin resim */
border:none;
padding-top: 40px;
overflow: hidden;
}

Burada yapılan işlem istenilen resmi butonun arkaplan resmi yapmak ve üzerindeki normal buton yazısını butonun boyutundan daha aşağı bir alana kaydırmak. Overflow ile de bu kaydırma işlemi gizlenilince de işlem tamamlanmış oluyor.

Yorumlar

Facebook Yorumları
Tekno Dergi Yorumları

Yeni yorum ekle

İlgili Yazılar

Drupal development and the button in a form on your site (search form button, the buttons to vote on polls, etc..), Then removed from the standard image with an image do you want to change the way you can quickly and easily is a few little css tricks. As an example, remove the text on a button and want to replace it with the need to use a visual code is approximately as follows:

JQuery ile hayatımızı kolaylaştıran uygulamalardan bahsetmeye devam ediyoruz. Bu sefer web sitelerimizin artık her alanında bulunan formları, nasıl istediğimiz kriterlere göre doldurtabileceğimizi göreceğiz.

JQuery form seçicilerini kullanarak, form elemanları üzerinde çeşitli işlemleri yapmak çok kolay. Eğer Multiple özelliği aktif olan bir Select Box'daki tüm öğeleri bir olay sonucu (bir butonun tıklanması vs.) seçmek istiyorsanız aşağıdaki kodu kullanabilirsiniz:

Eski sürümlerinden beri Drupal kullananlar IMCE modülünü bilirler. TinyMce,BuEditor gibi wyswig modülleri ile entegre olarak , yazı yazma esnasında server'a bir resim upload edip o resmi kullanmamızı sağlar ve bizi mutlu ederdi :) Tabii IMCE'nin özelliği bununla sınırlı değil ama benim en çok işime yarayan buydu.Çünkü TinyMce ve BUEditor'de dahili bir dosya yükleyicisi yok. Şu günlerde Drupal 6.x içinde Head olarak çıkmış olsa da en azından şimdilik kullanmayı düşünmüyorum.Çünkü Fck 'da küçük bir optimizasyon ile dahili bir resim yükleyicisine sahip olabiliyorsunuz.Yani bilgisayarınızda bulunan resmi kolayca server'a aktarıp kullanabilirsiniz.

Facebook, Like butonunun yıl dönümünde yeni bir buton daha devreye aldı : Facebook Send.