Hiệu ứng cho đường viền và nick ở phần comment




Trước khi bắt đầu bài viết thì olympia xin nhắc trước là hiệu ứng viền trong bài viết này hiển thị tốt nhất khi bạn đã trong suốt phần comment. Tất nhiên là nếu bạn không trong suốt phần comment thì vẫn có thể sử dụng code trong bài viết này những nói chung nó sẽ không đẹp như khi trong suốt


Đây là khung comment sau khi trong suốt





Để thay đường viền bao quanh comment thì sử dụng code sau


Quote:
.mod_all .cmt-mod-alist .alist-comment ul li{border-top:1px dashed #fff;border-right:1px dashed #fff;border-left:1px dashed #fff;border-bottom-style:dashed;border-bottom-color:#fff; border-bottom-width:1px;}/*olympia41124*/

Để thay đường viền ngăn cách giữa phần comment của khách và comment trả lời của chủ blog dùng code sau

Quote:
.cmt-mod-alist .alist-comment .responding{border-top:1px dashed #fff;}/*olympia41124*/




Khi đó ở dưới cùng tất cả comment vẫn còn 1 đường viền "lạc loài" nữa





Sử dụng code sau để thay đổi

Quote:
.cmt-mod-alist .add-comment{border-top:1px dashed #fff;}/*olympia41124*/




Ngoài ra phần toolbar comment và soạn thảo comment có những đường viền có thể thay đổi





Sử dụng code sau thay viền toolbar comment

Quote:
#bd .rte_container{border-style:none;}/*olympia41124*/
#bd .rte_toolbar{border-top:1px dashed #fff;border-right:1px dashed #fff;border-left:1px dashed #fff;}/*vietnam360plus.com*/

Sử dụng code sau để thay viền phần soạn thảo comment

Quote:
.rte_editor, .rte_src_editor{border-top:1px dashed #fff;border-right:1px dashed #fff;border-left:1px dashed #fff;border-bottom-style:dashed;border-bottom-color:#fff;border-bottom-width:1px;}/*olympia41124*/

Ngoài ra nếu muốn xóa các đường gạch dọc phân cách ở toolbar comment thì dùng code sau

Quote:
.rte_btn .rte_btn_sep{border-style:none;}/*olympia41124*/




Lưu ý là tất cả code viền trên là mẫu tham khảo. Các bạn có thể thay đổi code tùy biến theo ý thích. Trong đó

dashed là kiểu viền, có thể thay dashed bằng dotted, solid, double, groove, ridge, inset, outset, inherit
#fff là mã màu của viền, có thể thay bằng màu khác
1px là độ "dày" của viền, có thể thay bằng số khác


Ngoài đường viền ở phần comment thì ta còn có thể trang trí cho các nick hiệu ứng bắt mắt





Quote:
.cmt-mod-alist .alist-comment h4 a{background:transparent url(Link hình) top center;}/*olympia41124*/

Hoặc có thể áp dụng cho toàn phần đầu của nick





Quote:
.cmt-mod-alist .alist-comment h4{background:transparent url(Link hình) top center;}/*olympia41124*/


Trong các code trên thay Link hình mà bạn muốn. Có thể tham khảo các hình ở đây >>> http://s118.photobucket.com/albums/o93/olympia41124/Yahoo_360plus/Hover/



Written by olympia41124

No comments:

Post a Comment

để lại nhận xét của bạn để chúng tôi phục vụ bạn tốt hơn
=))