Trick Customize Textarea-Handle (Dimples)

Yang dimaksud dengan Customize Textarea Handle adalah memberikan gambar atau image lain pada Dimples, yaitu icon untuk resizing tinggi comment box reply.
Icon ini dapat kita ganti dengan gambar sesuai keinginan kita, dan besar kecilnya juga bisa kita atur sesuai dengan nilai yang kita inginkan.
Batasannya adalah estetika saja.
Maksudnya, kita tidak mungkin memasukkan gambar dengan dimensi 100px x 200px hanya untuk sebuah button / icon.
Berikut adalah screenshot dari box reply standart Multiply.



Masalah utama di sini adalah, Multiply hanya memberikan kesempatan tinggi sebesar 5px saja untuk icon dimples ini. Yaitu nilai yang sesuai dengan tinggi icon mereka. Dan celakanya, seting 5px ini dimasukkan lewat Style di HTML pada tag span :

<span class="textarea-handle" style="height: 5px;"/>

Hal inilah yang menyebabkan kita sedikit kesulit mencari kode CSS nya, dimana Multiply meletakkan seting untuk tinggi icon ini ?
Jika anda cari di CSS Multilpy, anda akan mendapati di 64.CSS ( site ) pada baris 1.182 dengan bunyi sbb.

.textarea-handle {
background:transparent url(http://images.multiply.com/common/misc/dimples2.gif) no-repeat scroll right top;
bottom: -8px;
cursor: n-resize;
display: block;
height: 5px;
position: absolute;
right: 5px;
width: 10%;
}
Dan di manakah pengaturan height nya ?
Jawabannya adalah seperti saya sampaikan beberapa baris di atas, yaitu diatur di HTML, dan bukan di CSS.
Langkah ini diambil oleh Multiply agar estetika penampilan icon Dimples tidak terlalu "norak", cukup dengan 5px saja.

Mari kita mulai.

Pertama, siapkan image yang sesuai dan telah pula ada alamat URL nya.
Berikutnya, masukkan block ID declaration di bawah ini

.td#cell_submit {
padding-top: 18px;
}
Penjelasan : Seting padding di atas untuk memberi kesempatan icon textarea-handle (dimples baru) dapat ditampung di antara box textarea (box tempat menuliskan reply) dan tombol submit.
Default adalah 8px. Ganti nilai 8px ke nilai lain sesuai tinggi icon baru dan juga agar dapat terlihat serasi.

Langkah berikutnya adalah menambahkan class textarea-handle yang berfungsi untuk memasukkan image kita serta mengatur lebar, tinggi dan posisi di bawah box reply.

.textarea-handle {
background:transparent url(http://img259.imageshack.us/img259/8334/arrowblade.gif) no-repeat scroll right top;
bottom: -45px;
display: block;
height: 62px !important;
position: absolute;
right: 5px;
width: 11%;
}
Class tersebuat akan menempatkan gambar yang diatur tingginya sebesar 62px pada posisi 45px di bawah box reply.
Ganti alamat gambar dengan alamat URL gambar anda.

Jika tidak ada halangan atau salah ketik, maka box reply akan tampak seperti gambar berikut ini.



Semoga bermanfaat.
Enjoy.

© 2009 Lilok. http://dangdutkoplo.multiply.com