Staff en línea
Últimos temas
[Ocio] Contemos hasta el 5000
por YoshiGM Vie Dic 14, 2018 1:48 pm

[html] Pagina de Login en 2 pasos
por House M. D. Mar Dic 04, 2018 3:11 pm

Un saludo y Felices fiestas
por Chalo Mar Dic 04, 2018 1:34 pm

Página 2 de 2. Precedente  1, 2

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

[CSS] Chat igual que el de Facebook 
el Jue Oct 23, 2014 10:11 am
staff


Última edición por Chalo el Jue Sep 01, 2016 1:19 pm, editado 3 veces
Recuerdo del primer mensaje :

[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]
Chalo
avatar

¿Que estoy pensando? :

Soy leyenda 3.0 [table class=fecha_up][td]Se modifico:20/11/18 - 12:05 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6863


Puntos :

8959


Me gusta :

1031


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Re: [CSS] Chat igual que el de Facebook 
el Dom Jun 26, 2016 12:42 am
A ver que tal es este *-*
SoldaditaPelirroja
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

https://scontent-lax3-2.xx.fbcdn.net/v/t1.0-9/15267810_110553979436377_5167792489482327959_n.jpg?oh=b4fd560f72c232df67f67550b4d33d77&oe=58F17311


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

22


Puntos :

31


Me gusta :

7


ingreso :

24/07/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [CSS] Chat igual que el de Facebook 
el Jue Ago 25, 2016 12:05 am
Me interesa ver que tal el código, gracias por el aporte.
brixtondavery
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://i64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

7


Puntos :

10


Me gusta :

3


ingreso :

24/08/2016


Sexo :

Femenino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [CSS] Chat igual que el de Facebook 
el Jue Sep 01, 2016 1:15 pm
gracias por el code
Roger
avatar

¿Que estoy pensando? :

Probando el status del foro [table class=fecha_up][td]Se modifico:9/03/17 - 9:13 hrs.[/td][/table]


Banner en temas :

http://thedesigninspiration.com/wp-content/uploads/2012/06/Facebook-Covers-029.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

305


Puntos :

343


Me gusta :

30


ingreso :

30/03/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [CSS] Chat igual que el de Facebook 
el Sáb Oct 08, 2016 9:33 am
Posteo para ver que tal


Enviado desde mi UnknownPhone
roseila
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://fbcoversking.com/wp-content/uploads/2012/01/waves-of-colour-facebook-cover.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

9


Puntos :

11


Me gusta :

2


ingreso :

07/10/2016


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [CSS] Chat igual que el de Facebook 
el Vie Ene 20, 2017 4:21 pm
excelente aporte me lo llevo
Tecnogsm
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://i64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

31


Puntos :

39


Me gusta :

2


ingreso :

06/06/2016


Sexo :

Masculino

Plataforma :

punbb


Navegador :

chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [CSS] Chat igual que el de Facebook 
el Miér Ago 02, 2017 12:19 am
viendo el codigo gracias
Junior Ñuflo Talaverano

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://static.comicvine.com/uploads/original/11112/111120351/3111627-563583_10150711503988485_11648563484_9583859_396787402_n.jpg


Color de titulos :

#fff


Sombra titulo :

0 -1px #333


Mensajes :

32


Puntos :

41


Me gusta :

5


ingreso :

01/01/2016


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.