[CSS] Chat igual que el de Facebook
Tema iniciado por y Añadir a favoritosResuelto

17/04/2014

[ok]Corregido[/ok]
[codebox]Dale un aspecto de facebook al chatbox[/codebox]
[hidecode]

Código:: .user a span::before { content: url(http://i.imm.io/TesQ.png); padding-right: 2px; height: 15px; width: 15px; padding: 2px; border: px solid #; padding-top: 10px; margin-right: 5px; } /*---CHATBOX---*/ #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; } .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_members { background-color: #000000; color:#; font-family:Tahoma; font-size:12px; text-align:center; background-color:#; padding:.5em .25em; }

[/hidecode][likepost][time="2/03/18 - 14:52 hrs."][avatar="https://imgfast.net/users/3214/29/54/58/avatars/6-65.png" user_id="http://www.opensourcephpbb3.com/u6"][userlike="http://www.opensourcephpbb3.com/u6"] YoshiGM[/userlike][/likepost]