Diễn Đàn Hỗ Trợ FM
Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.


[Code] Chatbox cho invision

Tác giả: - vào lúc:
Giựt
Bài viết : 272
Points : 440
Like : 89
Punbb
Cẩn thận
Status : Giựt đẹp trai
GiựtMOD
9/5/2016, 19:06
#1

Demo


[Code] Chatbox cho invision BW5wqKs

[Code] Chatbox cho invision ZVNjDUI

Mô tả chatbox


- Chatbox được design lại chatbox mặc định có sẵn của fm bằng css

- Khi hover vào 1 tin nhắn nào đó , lập tức nó sẽ hiện thời gian gửi bài ở góc bên phải của tin nhắn

- Đã xóa đi button emoji và button color cho nhẹ nhàng và tinh tế

- Bố cục gọn gàng

- Giao diện sáng

- Thế thôi hết rồi , còn muốn khám phá nhiều thì tự's túc's là's hạnh's phúc's

Code:

http://testduat.forumvi.com/?tt=1


Vào css thêm


Code:

/*CHat*/
#chatbox{bottom:30px;left:211px!Important;line-height:10px;overflow:auto;position:absolute;right:0;top:30px}
#chatbox .msg>span[style="color:green"],#chatbox .msg>span[style="color:red"],#chatbox .msg>span[style="color:undefined"]{display:block;color:#fff!important;text-align:left;margin:-8px -4px!Important;padding:8px 16px!important;font-size:12px}
#chatbox .msg>span[style="color:undefined"]{background:rgba(231,119,0,0.51);text-align:center;color:rgb(238,16,16)!important;font-weight:bold;line-height:15px;text-shadow:0 0 1px rgba(255,255,255,0.54),0 0 18px rgba(255,255,255,0.54);border:2px dashed #DB360D;font-size:15px;margin-bottom:-5.5px!important}
#chatbox .msg>span[style="color:undefined"]:before{content:url(https://cdn2.iconfinder.com/data/icons/designer-tools/512/ERASER-2-24.png);position:absolute;top:2px;margin-top:0;margin-left:-34px;border:2px solid;border-radius:100px}
#chatbox .cb-avatar{background:none repeat scroll 0 0 #fff;border:1px solid #d5d5d5!important;box-shadow:0 2px 2px rgba(0,0,0,0.1);float:left;height:35px!Important;margin-right:4px;padding:1px;vertical-align:middle;width:35px!Important;border-radius:100%}
#chatbox .cb-avatar > img{border-radius:100px;height:35px!important;width:35px!important}
#chatbox .chatbox-message-username{font-size:11px}
#chatbox .user{color:#9c9b9b!important;font-size:0;position:relative;top:3px}
div#chatbox_members{width:200px;border-right:1px solid #e7e7e7;padding:0 5px;background:#fff;z-index:2;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
#chatbox_header{position:absolute;height:50px;left:0;top:0;right:0;line-height:20px;padding:0 5px;background:rgba(255,255,255,0.26);color:transparent;margin-top:-2px}
#chatbox_option_co,#chatbox_option_disco,#chatbox_option_with_archives a,#chatbox_option_without_archives a,.chat-title{display:inline-block;text-indent:-9999px;margin:-5px 0;width:30px;height:30px;background:url(//i68.servimg.com/u/f68/19/38/83/61/chat6110.png) center center no-repeat #e7e7e7;border-radius:3px}
#chatbox_option_with_archives a{background-image:url(//i68.servimg.com/u/f68/19/38/83/61/archiv10.png);line-height:49px}
#chatbox_option_without_archives a{background-image:url(//i68.servimg.com/u/f68/19/38/83/61/three110.png);line-height:49px}
#chatbox_option_co{background-image:url(//i68.servimg.com/u/f68/19/38/83/61/power110.png);line-height:41px}
#chatbox_option_disco{background-image:url(//i68.servimg.com/u/f68/19/38/83/61/out10.png);line-height:41px}
#chatbox .msg>span[style="color:green"]{background:#33CC47;text-align:center}
#chatbox .msg>span[style="color:red"]{background:#39c;text-align:center}
span#chatbox_option_without_archives,span#chatbox_option_with_archives{font-size:0}
#chatbox .date-and-time{background:rgb(242,242,242);padding:3px 4px;border-radius:2px;color:#979ba0;font-size:11px;border:1px solid #c4c4c4;box-shadow:0 0 1px #DDD;opacity:0;transition:.2s}
#chatbox>p:hover .date-and-time{opacity:1}
#chatbox{background:white}
#chatbox > p{background:white;border:none!Important;margin:0}
div#chatbox_footer{background:white;border-top:1px solid #DDD;box-shadow:0 0 2px #ddd;z-index:9999999999999}
.chatbox::-webkit-scrollbar{display:none}
#divcolor,#divsmilies,#help-button,.format-message + label{transition:.2s;position:relative;right:360px;font-size:15px;padding:3px 4px;width:19px!important;line-height:22px!Important;border:1px solid #DDD!Important;height:20px!important;top:-2px;color:#333!important;background:white!Important}
.format-message:checked + label:hover{box-shadow:inset 0 2px 4px #2C789D,0 1px 2px rgba(67,166,223,0)!Important}
.format-message:checked + label{background:#39c!Important;color:white!Important;box-shadow:inset 0 2px 4px #2C789D,0 1px 2px rgba(67,166,223,0)!important;border:1px solid #39c!Important}
#divcolor:hover,#help-button:hover,.format-message + label:hover{background:#43A6DF!important;color:white!important;border-color:#43a6df!important;box-shadow:none!important}
#submit_button{display:inline-block!important;text-indent:-9999px;margin:5px 0!important;width:26px!important;height:26px!important;background:url(//i68.servimg.com/u/f68/19/38/83/61/upper110.png) center center no-repeat #2196f3!important;color:#fff!important;border:0!important;box-shadow:none!important;position:relative;top:-7px;margin-top:7px!Important}
input#submit_button:hover{opacity:.8;cursor:pointer}
input#message{position:relative;top:-7px;border-radius:4px;height:26px!important;background:white;box-sizing:border-box!important;border:1px solid #e7e7e7;box-shadow:0 1px 1px rgba(0,0,0,.075) inset;margin-right:10px}
div#divcolor,div#divsmilies{display:none}
h4.member-title.online,#chatbox_members .member-title{text-align:center;background:#f5f5f5!important;padding:5px;border-radius:3px;font-size:14px!Important;font-weight:bold;text-transform:uppercase;margin:5px 0;color:grey!important}
#chatbox .msg span[style="color:#000000"]{-webkit-font-smoothing:antialiased;font:300 13.5px/1.42857em Roboto,arial,sans-serif;padding-right:10px}


Vào index tìm {BOARD_INDEX} thêm vào trước nó :

Code:

<iframe frameborder="0" width="99.8%" height="300px" onerror="firstchatfmvi()" src="/chatbox/index.forum?archives" onload="firstchatfmvi()" id="chatfmvi"></iframe>


CHỉnh height và width phù hợp với forum bạn
Tags: #invision #chatbox

Được sửa bởi Giựt ngày 10/3/2016, 19:56; sửa lần 1.
ngao382_cover
Bài viết : 38
Points : 55
Like : 5
Punbb
An toàn
ngao382_coverMEM LV1
9/5/2016, 21:22
#2
like, nhìn cũng đẹp [Code] Chatbox cho invision 1f60e
Giựt
Bài viết : 272
Points : 440
Like : 89
Punbb
Cẩn thận
Status : Giựt đẹp trai
GiựtMOD
9/5/2016, 21:46
#3
ngao382_cover đã viết:
like, nhìn cũng đẹp  [Code] Chatbox cho invision 1f60e


Like miệng :3 à
bucnong
Bài viết : 11
Points : 17
Like : 2
Punbb
An toàn
Status : :v Lểu lểu
bucnongMEM LV1
9/5/2016, 22:17
#4
Smile ko có nick test onl , phải đăng kí vcc
the_dav
Bài viết : 226
Points : 323
Like : 47
Punbb
Quản trị
the_davMEM LV3
9/5/2016, 22:19
#5
ver này a nhìn khác gì mặc dịnh đâu nhỉ Sad thế thì dùng ver nào chẳng dc đâu phải chỉ invision
Giựt
Bài viết : 272
Points : 440
Like : 89
Punbb
Cẩn thận
Status : Giựt đẹp trai
GiựtMOD
9/6/2016, 05:50
#6
the_dav đã viết:
ver này a nhìn khác gì mặc dịnh đâu nhỉ Sad thế thì dùng ver nào chẳng dc đâu phải chỉ invision


Ver mặc định mà a nhưng mà em đã thử trên punbb thì nó bị vỡ khung , lệch hàng , ko có chỗ viết , ......
Admin
Bài viết : 431
Points : 820
Like : 120
Punbb
Quản trị
Status : test
AdminACP
9/6/2016, 07:07
#7
muốn làm trên pun lại css lại đó e hi
Giựt
Bài viết : 272
Points : 440
Like : 89
Punbb
Cẩn thận
Status : Giựt đẹp trai
GiựtMOD
9/6/2016, 11:01
#8
Admin đã viết:
muốn làm trên pun lại css lại đó e hi


Mệt lắm ạ Very Happy em còn phải ôn để sắp thi :3
Sponsored content
#9