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.

48 comments:

  1. Apa iki ?
    Komen kok ngirit.... met malem Pit.

    ReplyDelete
  2. gak..
    ngantuk banget ki..
    malem Mas..

    ReplyDelete
  3. ya, saya berusaha untuk memberikan pemahaman kepada rekan-rekan ... agar lebih "ngeh".

    ReplyDelete
  4. utung theme css-ku gak bermasalh dengan kayak gini ^^

    ReplyDelete
  5. thanks banget, Mas Lilok! berhasil.. hehe

    ReplyDelete
  6. betul.
    hanya saja, rekan-rekan banyak yg menginginkan theme mereka bernuansa sesuai keinginan mereka.

    kalau saya ?
    cukup AVLACK standart saja hehehehe....

    ReplyDelete
  7. makanya gak sia2 saya jungkir balik selama seminggu untuk buat theme ^^

    ReplyDelete
  8. same same (sama2), eh comeback (kembali)

    ReplyDelete
  9. kalau warna ID dalam quote box?

    comment by Flippy

    ReplyDelete
  10. bisa ditambahkan di akhir Custom CSS Anda :

    div.quotea a, div.quotea a:link, div.quotea a:visited {
    color: blue;
    }

    Ganti blue dengan color pilihan Anda.

    ReplyDelete
  11. kalo mo ngilangin delete dan edit gmana?
    hehehe

    ReplyDelete
  12. tombol edit dan delete sebenarnya hanya untuk anda.
    tapi jika mau diilangin ... bisa.
    kodenya :

    a.mine.editbutton {
    display: none;
    }

    a.mine.deletebutton {
    display: none;
    }

    ada-ada aja ... hehehehe ...

    ReplyDelete
  13. gi mana nehh carannya bang...........ga bs babar blas,,maklum pendatang baru di mp...ajariin dongg bang...."??

    ReplyDelete
  14. wah ... jangan merendah gitu.
    site anda heboh banget ... cool page!

    ReplyDelete
  15. kode tersebut untuk menghilangkan link "edit" dan "delete" content (Journal).
    bukan untuk yang berada di comment-box reply.

    ReplyDelete
  16. edit dan delete di comment-box reply :

    div.actionlinks a.mine {
    display: none;
    }

    yang comment ... tidak bisa lagi edit maupun delete ... hehehehe ... sadis.

    ReplyDelete
  17. Maaf, pertanyaan agak menyimpang nich, bagaimana yach caranya meng-quote/kutip tulisan dari reply , hanya sebagian tulisan or hanya beberapa kata aja, coz selama ini ngutip hanya bisa seluruh kalimat jadi terkesan panjang.

    ReplyDelete
  18. klik reply (seperti biasanya).
    block / sorot text yang akan dikutip (valid hanya untuk text saja).
    setelanjutnya klik check-box Quote original message
    isikan reply seperti biasanya.

    ReplyDelete
  19. block / sorot text yang akan dikutip (valid hanya untuk text saja).

    ReplyDelete
  20. bang... merubah warna teks pada comment box gimana ya ?
    pas utak atik css.. jadi berubah ...tulungin ya bang

    ReplyDelete
  21. edit CSS anda, cari block selector berikut ini :

    /*gambar kotak komentar*/
    textarea#body {
    background:#fff url() no-repeat bottom center;
    color: #F8F2E4;
    font-size: 14px;
    }

    Ganti dengan ( background putih, tulisan hitam ) :

    /*gambar kotak komentar*/
    textarea#body {
    background: white;
    color: black;
    font-size: 14px;
    }

    white dan black bisa diganti sesuai keinginan asalkan kontras.
    Jika tidak, akan sedikit sulit dibaca.

    ReplyDelete
  22. bgmn merubah warna teks link ( customised my site..dan lainnnya ) biar sm dng link yg lain ?
    please reply ya bang ? thanks

    ReplyDelete
  23. menu / link tersebut disebut sidelist, untuk seting warnanya :

    .railbody a, .railbody a:link, .railbody a:visited {
    color: #FFFFFF;
    }

    ganti #FFFFFF dengan nilai warna anda.

    ReplyDelete
  24. oke bang...da beres...tengkyu..moga bnyk rjeki yaaa..

    ReplyDelete
  25. ??????????????????????? pucink dech tp thx yach

    ReplyDelete
  26. aturan CSS-nya di jadiin satu aja..biyar bisa ng-opy semuanya langsung....
    hehehe

    saran aja

    ReplyDelete
  27. Akan lebih baik jika anda yang melakukan penggabungan. Disamping sesuai keinginan juga akan lebih paham. Itu yang disebut sebagai belajar.

    ReplyDelete
  28. om kalo mau tulisan aku kliatan di comment box/guessbox gimana ya..
    soalnya kok putih aja gitu kluarnya. ajarin om linknya biar kliatan/kebaca. tulisannya item / abu2 ya om. makasii :D

    ReplyDelete
  29. Tulisan abu2 :
    Ganti kode warna yang semula #FFFFFF menjadi #BBBBBB

    div.replybox, div.replyboxread {
    color: #BBBBBB;
    }

    link akan tetap, putih terang ... yang penetapannya ada di :

    a:link {
    color: #FFFFFF;
    font-family: arial;
    }

    ReplyDelete
  30. makasi om :)
    satu lagi ya. aku pengen ngilangin jejak delete disetiap comment. jd gak ada tulisan "Comment deleted at the request of the author" atau "Comment deleted at the request of the thread owner" == jadi bener2 bersih tak bersisa. caranya ya om >_

    ReplyDelete
  31. Tambahkan di akhir CSS Anda.

    .replydeleted {
    display:none;
    }

    Trick lama ... mungkin sudah ada bahasannya di group ini.
    Belajar berbagi : Get more dangdut!

    ReplyDelete