Đây là chatbox dạng trượt tổng hợp Demo lúc đã [You must be registered and logged in to see this image.] xong [You must be registered and logged in to see this image.] Giao diện khung dạng trượt [You must be registered and logged in to see this image.] Tính năng : ♦Bỏ phần thông tin thành viên online và away ♦Hiển thị số tin nhắn ♦Chế độ tự đăng nhập ♦Hiển thị số người online ♦Nút Buzz làm rung toàn bộ ♦Bỏ ký tự @ ♦Và một số tính năng khác của chatbox Alexandru....... Nội dung : {Trả lời để thấy nội dung} Bước 1 : Vào ACP - Modules - Chatbox - Configuration: ChatBox configuration Activate the ChatBox: Yes ChatBox display: Do not display
Bước 2 : Tạo 1 hình vui ACP - Display - Avatars - Smilies :
Smilies Configuration Smilie Code : [You must be registered and logged in to see this image.] Smilie Emotion : [You must be registered and logged in to see this image.] Cho smile mớí bạn chọn một hình ảnh từ máy tính bạn hoặc dùng hình này : [You must be registered and logged in to see this image.] Bước 3
Do hình vui BUZZ của chatbox có mã giống với hotrofm nên nếu mình đưa code trực tiếp sẽ bị lỗi câc bạn download file này về , mở bằng notepad
- Code:
http://code.google.com/p/doannamthai-hotrofm/downloads/detail?name=Chatbox%20ver%202.0.txt&can=2&q= Sau đó tìm - Code:
Tin nh?n và - Code:
T? dang nh?p Và sửa lần lượt thành - Code:
Tin nhắn - Code:
Tự đăng nhập * chú ý nếu không có thì thôi
Cuối cùng KHÔNG lưu file đó lại Copy toàn bộ code sau khi sửa vào index_body hoặc overall_header thì tùy bạn.
Bước 4 : Cho code này vô CSS - Code:
/*----------------CHATBOX Ver 2.0----------------*/ #chatbox_header{ margin: 0px !important; background: url(http://i25.servimg.com/u/f25/14/45/99/41/untitl20.jpg) repeat-x !important; border-bottom: 1px solid #c9c9c9; border-top: 0px; border-left: 0px; border-right: 0px; } h2.chatbox-title { margin-top: 4px; } #chatbox_header .chat-title{ margin-bottom: -20px; margin-left: -20px; background: url(http://i25.servimg.com/u/f25/14/45/99/41/112_co11.png) no-repeat; font-size: 14px; cursor: default; letter-spacing: -0.4em; color: transparent; } #chatbox_header .chat-title:hover{ background: url(http://i25.servimg.com/u/f25/14/45/99/41/112.png) no-repeat; letter-spacing: 2.1em; } #chatbox_main_options, #chatbox_main_options a, #chatbox_main_options span{ color: #9a9a9a !importat; text-shadow: 1px 1px 1px #ffffff; text-decoration:none; font-family: Arial Black; text-transform: uppercase; } #chatbox_main_options a:hover{ color: grey; text-shadow: 1px 1px 1px #b8b8b8; text-decoration:none !important; font-family: Arial Black; text-transform: uppercase; }
#chatbox_main_options{ background: url(http://i25.servimg.com/u/f25/14/45/99/41/untitl21.jpg) repeat-x; float: right; border: 1px solid #c9c9c9; margin-right: 50px; margin-top: -10px; padding: 2px 3px 1px 5px; border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; -webkit-box-shadow: 0px 0px 4px #c6c6c6; box-shadow: 0px 0px 4px #c6c6c6; -moz-box-shadow: 0px 0px 4px #c6c6c6; } #chatbox_main_options:hover { margin-top: -1px; }
ul#chatbox_main_options li, ul#chatbox_main_options li label, ul#chatbox_main_options li, ul#chatbox_main_options li a { color: #9a9a9a !important; text-shadow: 1px 1px 1px #ffffff; } /*----------------Members----------------*/ #chatbox_members { background: url(http://i25.servimg.com/u/f25/14/45/99/41/50347510.png); margin-bottom: -30px; border-right: 1px solid #c9c9c9; background-color: #ffffff; } #chatbox_members:hover { border-right: 1px solid #b7b7b7; background-color: #fcfcfc; } h4.member-title{ background: url(http://i25.servimg.com/u/f25/14/45/99/41/untitl23.jpg) repeat-x !important; font-family: Arial Black; text-transform: uppercase; color: #ffffff !important; text-shadow: 0px 0px 3px black; margin-top: 0px; cursor: default; letter-spacing: 0.5em; }
#chatbox_members ul { list-style: none; margin: 0px; } #chatbox_members ul li { background: url(http://i25.servimg.com/u/f25/14/45/99/41/115.png); font-family: Arial Black; font-weight: bold; font-size: 14px; color: #393939; padding-left: 10px; border-bottom: 1px solid #e2e2e2; margin: 0px; }
#chatbox_members ul li:hover { background-color: #f4f4f4; background-image:url('http://i25.servimg.com/u/f25/14/45/99/41/114.png'); background-repeat: no-repeat; background-position: center left; } #chatbox_members ul li:active { background-image:url('http://i25.servimg.com/u/f25/14/45/99/41/213.png'); } #chatbox_members ul li a { text-shadow: 1px 1px 1px #ffffff; font-size: 12px; color: #909090; text-decoration: none; } #chatbox_members ul li a:hover { color: #393939; text-decoration: none !important; } /*----------------ChatBox Con----------------*/
.chatbox_row_1, .chatbox_row_2 { background-color: transparent !important; } .chatbox_row_1:hover, .chatbox_row_2:hover { background-color: #ffffff !important; border: 1px solid #c9c9c9; border-radius: 5px; -moz-border-radius: 5px; margin: 5px; -webkit-box-shadow: 0px 0px 4px #dcdcdc; box-shadow: 0px 0px 3px #dcdcdc; -moz-box-shadow: 0px 0px 3px #dcdcdc; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f9f9f9)); background: -moz-linear-gradient(top, #ffffff, #f9f9f9); } .date-and-time { color: #c3c3c3 !important; font-style: italic !important; font-size: 9px !important; letter-spacing: -0.1em !important; } .user-msg { font-family: Georgia !important; color: #8c8c8c !important; }
.user-msg a:hover { color: #000000 !important; text-decoration: none !important; }
/*----------------Footer----------------*/
#chatbox_messenger_form { width: 650px; float: none !important; bottom: 0px ; position: fixed; z-index: 999; margin-left: auto; margin-right: auto; left: 0; right: 0; -webkit-box-shadow: 0px 0px 4px #d4d4d4; box-shadow: 0px -0px 4px #d4d4d4; -moz-box-shadow: 0px 0px 4px #d4d4d4; box-shadow: 0px 0px 4px #c6c6c6; -moz-box-shadow: 0px 0px 4px #c6c6c6; border-top: 1px solid #c9c9c9; border-left: 1px solid #c9c9c9; border-right: 1px solid #c9c9c9; border-bottom: 0px; height: 30px; border-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; background-color: #ffffff; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f9f9f9)) !important; background: -moz-linear-gradient(top, #ffffff, #e2e2e2) !important; } #chatbox_messenger_form:hover { border-top: 1px solid #a7a7a7; border-left: 1px solid #a7a7a7; border-right: 1px solid #a7a7a7; }
#divbold, #divitalic, #divunderline, #divstrike, #divcolor, #divsmilies { background: url(http://i25.servimg.com/u/f25/14/45/99/41/110.jpg) repeat-x; border: 1px solid #c9c9c9; background-color: #ffffff; border-radius: 3px; -moz-border-radius: 3px; } #divbold:hover, #divitalic:hover, #divunderline:hover, #divstrike:hover, #divcolor:hover, #divsmilies:hover { background: url(http://i25.servimg.com/u/f25/14/45/99/41/hover10.jpg) repeat-x; border: 1px solid #a2a2a2; } #divbold:active, #divitalic:active, #divunderline:active, #divstrike:active, #divcolor:active, #divsmilies:active { background: url(http://i25.servimg.com/u/f25/14/45/99/41/active10.jpg) repeat-x; } label input#message { height: 17px; font-size: 12px; border: 1px solid #c9c9c9; background-color: #ffffff; border-radius: 3px; -moz-border-radius: 3px; } label input#message:hover { border: 1px solid #b2b2b2; background-color: #f5f5f5; } label input#message:focus { border: 1px solid #a4a4a4; background-color: #e0fdff; } input#submit_button { cursor: pointer; color: #929292; font-family: Arial Black; text-transform: uppercase; font-size: 12px; padding-left: 2px; padding-right: 2px; background: url(http://i25.servimg.com/u/f25/14/45/99/41/110.jpg) repeat-x; border: 1px solid #c9c9c9; background-color: #ffffff; border-radius: 3px; -moz-border-radius: 3px; } input#submit_button:hover { color: #2c2c2c; background: url(http://i25.servimg.com/u/f25/14/45/99/41/hover10.jpg) repeat-x; border: 1px solid #a2a2a2; } input#submit_button:active { background: url(http://i25.servimg.com/u/f25/14/45/99/41/active10.jpg) repeat-x; } .right { padding-top: 4px !important; } #chatbox_footer { border: 0px !important; } #chatbox .user > span{display: none} #chatbox{left:0} #chatbox_members{display:none}
|
| |