[Code] Chatbox cho invision

  • Giựt
    1. [Code] Chatbox cho invision
    avatar MOD

    Demo






    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 03.10.16 19:56; sửa lần 1.

  • ngao382_cover
    2. Re: [Code] Chatbox cho invision
    avatar MEM LV1
    like, nhìn cũng đẹp

  • Giựt
    3. Re: [Code] Chatbox cho invision
    avatar MOD
    @ngao382_cover đã viết:like, nhìn cũng đẹp  

    Like miệng :3 à

  • bucnong
    4. Re: [Code] Chatbox cho invision
    avatar MEM LV1
    Smile ko có nick test onl , phải đăng kí vcc

  • the_dav
    5. Re: [Code] Chatbox cho invision
    avatar MEM LV3
    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
    6. Re: [Code] Chatbox cho invision
    avatar MOD
    @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
    7. Re: [Code] Chatbox cho invision
    avatar ACP
    muốn làm trên pun lại css lại đó e hi


    --Chữ ký--
    www.danganhviet.com


    • - Tránh đặt tiêu đề các dạng như: Giúp em với, Code này hay nè, Vào xem nè anh em,...
      - Đăng bài phải có ảnh demo hoặc viết mô tả rõ ràng, code phải bỏ vào khung code
      - Không comment vô nghĩa, không spam, không chữi tục, không post link độc hại, không hide bài viết
      - Hạn chế viết tắt, viết chữ màu, chữ to, chữ in đậm
  • Giựt
    8. Re: [Code] Chatbox cho invision
    avatar MOD
    @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

Thông tin tác giả
avatar
MOD
Bài viết :
273
Points :
440
Like :
89
Punbb
Cẩn thận
Status :
Giựt đẹp trai
Xem lý lịch thành viên
Thông tin tác giả
avatar
MEM LV1
Bài viết :
38
Points :
55
Like :
5
Punbb
An toàn
Xem lý lịch thành viên
Thông tin tác giả
avatar
MOD
Bài viết :
273
Points :
440
Like :
89
Punbb
Cẩn thận
Status :
Giựt đẹp trai
Xem lý lịch thành viên
Thông tin tác giả
avatar
MEM LV1
Bài viết :
11
Points :
17
Like :
2
Punbb
An toàn
Status :
:v Lểu lểu
Xem lý lịch thành viên
Thông tin tác giả
avatar
MEM LV3
Bài viết :
222
Points :
319
Like :
47
Punbb
Quản trị
Xem lý lịch thành viên
Thông tin tác giả
avatar
MOD
Bài viết :
273
Points :
440
Like :
89
Punbb
Cẩn thận
Status :
Giựt đẹp trai
Xem lý lịch thành viên
Thông tin tác giả
avatar
ACP
Bài viết :
329
Points :
636
Like :
106
Punbb
Quản trị
Status :
test
Xem lý lịch thành viên http://hotrofm.forumvi.com
Thông tin tác giả
avatar
MOD
Bài viết :
273
Points :
440
Like :
89
Punbb
Cẩn thận
Status :
Giựt đẹp trai
Xem lý lịch thành viên
Thông tin tác giả
Sponsored content
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết