Tuesday, November 25, 2008

Cara Merubah Warna Link-Text pada Comment/Reply-Box

dangdut koplo
Setelah beberapa kali terbit Notes tentang bagaimana merubah warna (color) dari link-text : edit delete reply
yang berada di comment box (reply box comment) yang juga telah direspon oleh rekan-rekan Member maupun para Admin, ternyata masih belum ketemu cara yang pasti. Walau demikian saya pribadi mengucapkan terima kasih atas perhatian dan usaha yang telah diberikan.

Link-text "edit" "delete" dan "reply" serasa sulit untuk dirubah warnanya.
Hal ini disebabkan kita selalu berkonsentrasi pada "pembungkus" class ketiga link-text tersebut.
Ini tidak aneh, karena ketiga link-text tersebut memang telah di encapsulated kedalam class yang bernama : actionlinks dan replyboxstamp.
Kita sering berexperimen dengan properti "hover" dan ... berhasil merubah warna maupun atribute pada text saat pointer melewati link-text tersebut.

a.actionlinks:hover {
    color: black;
    text-decoration: blink;
}

Akan mengakibatkan tampilan link-text "edit" "delete" dan "reply" berubah warna menjadi hitam dan berkedip disaat pointer berada di atas text tsb.
Akan tetapi ... ini yg sering bikin kita frustasi :

a.actionlinks:link {
    color: blue;
    text-decoration: none;
}

Tidak membuat ketiga link-text "edit" "delete" dan "reply" berubah warna !

Jawabannya adalah, penentuan warna ketiga link-text tersebut berada jauh di dalam class
Pembungkus pertama adalah replyboxstamp
Pembungkus kedua adalah actionlinks
Pembungkus ketiga (alamat paling tepat untuk menentukan property) adalah ...
Celakanya lagi, tiga sekawan ini mempunyai class yang berbeda.

"edit" dan "delete" berada di-class mine dan "reply" berada di-class reply_link.
Jadi, apabila akan merubah property dari ketiga link-text tsb, Anda harus mendeklarasikan selektor berikut ini.

Link-text "edit" dan "delete" :
a.mine, a.mine:link, a.mine:visited {
    color: blue;
}


Link-text "reply" :
a.reply_link, a.reply_link:link, a.reply_link:visited {
    color: blue;
}

Hover untuk ketiga link-text tersebut, cukup di pembungkus luarnya saja (karena hover tidak ditentukan di dalam masing-masing class)

.actionlinks a:hover {
color: red;
}

Contoh di atas, hanya merubah warna yang biasanya merah menjadi biru. Dan jika pointer hover pada text, text akan menjadi berwarna merah.
Jika menginginkan efek lainnya, silahkan Anda tambah property beserta value-nya dengan selera Anda.

Selamat bereksperimen.
Enjoy.