Chatbox với style mới

[Lùn Lì Lợm]

Demo :

Code:
chèn vào css nhé

Code:

#chatbox p {
float: left;
width: 98%;
line-height: 1.2em;
background: none;
position: relative;
padding-left: 10px;
}
.chatbox_row_1 .date-and-time {
right: 10px;
font-size: 10px;
font-family: Arial,Helvetica,sans-serif;
position: absolute;
top: 15px;
background: #ddd;
padding: 2px;
display: inline-block;
border: 1px solid #aaa;
border-radius: 2px;
visibility: hidden;
}
.chatbox_row_2 .date-and-time {
left: 20px;
font-size: 10px;
font-family: Arial,Helvetica,sans-serif;
position: absolute;
top: 15px;
background: #ddd;
padding: 2px;
display: inline-block;
border: 1px solid #aaa;
border-radius: 2px;
visibility: hidden;
}
p:hover .date-and-time {
visibility: visible;
}
#chatbox .user {
display: table-cell;
font-size: 0px !important;
}
.chatbox_row_1 .user {
margin-right: 20px;
float: left;
}
#chatbox .user a {
font-size: 12px;
text-decoration: none;
}
.msg {
padding: 5px;
border: 1px solid #D8DEC2;
display: table-cell;
border-radius: 3px;
max-width: 500px;
background: #F7FFD4;
font: 12px/1.5 Arial,Helvetica,sans-serif;
  position: relative;
}
.msg span {
color: #555 !important;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
}
.chatbox_row_1 .msg::before {
position: absolute;
content: '';
left: -12px;
width: 16px;
height: 16px;
background: transparent url("http://mail.yimg.com/ok/u/assets/sprite/default/16x16/opis-mode-ltr-26061.png") no-repeat 0 -326px;
top: 0;
}
.chatbox_row_2 .msg::after {
right: -11px;
position: absolute;
content: '';
width: 16px;
height: 16px;
background: transparent url("http://mail.yimg.com/ok/u/assets/sprite/default/16x16/opis-mode-ltr-26061.png") no-repeat 0 -295px;
top: 0;
}
.chatbox_row_1 .user-msg {
float: left;
}
.chatbox_row_2 .user-msg {
float: right;
}
.chatbox_row_2 .user, .chatbox_row_2 .msg {
float: right;
}
.chatbox_row_2 .msg {
background: #fff;
margin-right: 15px;
margin-left: 0;
}
.chatbox_row_1 > span.genmed > span:first-of-type, .chatbox_row_2 > span.genmed > span:first-of-type {
display: none;
}



.chatbox-title, .chatbox-title a.chat-title {
color: #454545;
text-decoration: none;
}

.chatbox-options li, .chatbox-options li a, .chatbox-options li label {
color: #454545;
}



input.button1, input.button2, button.button2, #main-content a.cgu-buttons {
border: 1px solid #afafaf;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
  -moz-box-shadow: 1px 3px 0px #afafaf;
  -webkit-box-shadow: 1px 3px 0px #afafaf;
}




.chatbox_row_2 .msg img{
max-width: 50px;
max-height: 50px;
}

.chatbox_row_1 .msg img{
max-width: 50px;
max-height: 50px;
}
.chatbox_row_2 .msg img{
max-width: 50px;
max-height: 50px;
}
.chatbox_row_2 .msg img{
max-width: 50px;
max-height: 50px;
}



.chatbox_row_1:hover,.chatbox_row_2:hover {
-webkit-box-shadow:#DCDCDC 0 0 4px;
border:1px solid #C9C9C9;
border-image:initial;
border-radius:5px;
box-shadow:#DCDCDC 0 0 3px;
background-color:#FFF;
margin:5px;
}

a:link,a:visited {
text-decoration:none;
}

#active_starters,#most_active,#pun-visit,#users_month,#users_week,#tooltip .header {
display:none;
}


#chatbox_messenger_form {
-webkit-box-shadow:#D4D4D4 0 0 4px;
background-color:#FFF;
border-bottom:0;
border-left:1px solid #C9C9C9;
border-radius:5px 5px 0 0;
border-right:1px solid #C9C9C9;
border-top:1px solid #C9C9C9;
bottom:0;
box-shadow:#C6C6C6 0 0 4px;
height:30px;
left:0;
margin-left:auto;
margin-right:auto;
position:fixed;
right:0;
width:100%;
z-index:999;
float:none;
background:rgba(250,250,250,0.79);
}

label input#message {
background-color:#FFF;
border:1px solid #C9C9C9;
border-image:initial;
border-radius:3px;
font-size:12px;
width: 625px;
padding: 6px;
}
#divbold,#divcolor,#divitalic,#divsmilies,#divstrike,#divunderline {
background:url(http://i25.servimg.com/u/f25/14/45/99/41/110.jpg) repeat-x #FFF;
border:1px solid #C9C9C9;
border-image:initial;
border-radius:3px;
}

.fontbutton {
border:0;
}

.fontbutton_normal {
background:#E1E1E2;
}

input#submit_button:hover {
background:url(http://i25.servimg.com/u/f25/14/45/99/41/hover10.jpg) repeat-x;
border:1px solid #A2A2A2;
border-image:initial;
color:#2C2C2C;
}

input#submit_button {
background:url(http://i25.servimg.com/u/f25/14/45/99/41/110.jpg) repeat-x #000000;
border:1px solid #C9C9C9;
border-image:initial;
border-radius:3px;
color:#929292;
cursor:pointer;
font-size:12px;
padding-left:2px;
padding-right:2px;
text-transform:uppercase;
}

#chatbox_header.main-head {
background-color: #FFFFFF;
color:#DEDFDF;
padding:0 1.3em;
}

#chatbox_members {
background-color: #615E5E;
color:#FFF;
font-family:Tahoma;
font-size:12px;
text-align:center;
background-color:#FFF;
padding:.5em .25em;

}



rip bên hotrofm
mình đặt tạm tên v thôi nhé

[Draudrey]

Èo, thế vô phần css rinh hết là có ngay chatbox full của hotrofm

[Lùn Lì Lợm]

Èo, thế vô phần css rinh hết là có ngay chatbox full của hotrofm

chuẩn .chuẩn
like đê

[Kid Knight]

vote

chatbox của hotrofm nhìn hơi khó chịu

m thích cái chatbox của cubim rip bên cntt kìa

[Lùn Lì Lợm]

cb bim share ở topic nào nhỉ ?

[K.-Kun]

Chatbox này không thích lắm vì nhìn hơi khó chịu

[Lùn Lì Lợm]

chia sẻ cho ai muốn dùng thôi

[ligerv]

@@

[HoàngTửNaivip5p]

Cb rê chuột vô mes cứ giật giật kiểu gì ấy @@

[nightWalker]

không có gì đặc sắc

[Lùn Lì Lợm]

thì bảo là chia sẻ cho ai thích thì dùng mà

[Draudrey]

Thớt thì share, còn khách thì dìm  

[Lùn Lì Lợm]

khổ ghê gớm

[Sponsored content]