Staff en línea
Últimos temas
[Ocio] Contemos hasta el 5000
por Chalo Lun Oct 15, 2018 8:24 am

[Revisado] [Segunda Revisión] Errores Yoshi Fans Club
por YoshiGM Dom Oct 14, 2018 9:08 am

[Revisado] Errores Yoshi Fans club
por YoshiGM Sáb Oct 13, 2018 12:36 pm

[CSS] Decora añadir a amigos - añadir a ignorados en el perfil
por Dosh Sáb Oct 13, 2018 7:59 am

[Duda] Estoy sorprendida ¿El Doc se sentirá bien?
por Dosh Sáb Oct 13, 2018 7:44 am

[CSS] Dar estilo a los rangos
por Eslam Love Miér Oct 03, 2018 11:15 pm

 :: Modifica tu foro :: CSS

Página 1 de 2. • 1, 2  Siguiente

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

#1
[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
[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? :

ayudando como debe ser [table class=fecha_up][td]Se modifico:2/010/18 - 20:40 hrs. [/td][/table]


Banner en temas :

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


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6839


Puntos :

8934


Me gusta :

1030


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


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

Volver arriba Ir abajo

Responder Mensaje privado
#2
Re: [CSS] Chat igual que el de Facebook 
el Miér Jun 17, 2015 3:31 pm
Que tal esta este codigo, podria pulir esta css. ;)
mrsrz
avatar

¿Que estoy pensando? :

... [table class=fecha_up][td]Se modifico:25/11/16 - 19:20 hrs.[/td][/table]


Banner en temas :

http://profilerehab.com/facebook_covers/musical/cool_guitar_cover_9.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

424


Puntos :

597


Me gusta :

63


ingreso :

23/12/2014


Sexo :

Masculino

Plataforma :

PunBB


Navegador :

Chrome


Ver perfil de usuario http://musicinstant.forumotion.com/

Volver arriba Ir abajo

Responder Mensaje privado
#3
Re: [CSS] Chat igual que el de Facebook 
el Miér Jun 17, 2015 3:49 pm
a responder de nuevo a ver el codigo...
mrsrz
avatar

¿Que estoy pensando? :

... [table class=fecha_up][td]Se modifico:25/11/16 - 19:20 hrs.[/td][/table]


Banner en temas :

http://profilerehab.com/facebook_covers/musical/cool_guitar_cover_9.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

424


Puntos :

597


Me gusta :

63


ingreso :

23/12/2014


Sexo :

Masculino

Plataforma :

PunBB


Navegador :

Chrome


Ver perfil de usuario http://musicinstant.forumotion.com/

Volver arriba Ir abajo

Responder Mensaje privado
#4
Re: [CSS] Chat igual que el de Facebook 
el Miér Jul 15, 2015 1:03 pm
Me interesa, lo pruebo para ver que tal va.
XyriuSbLaZ
avatar

¿Que estoy pensando? :

En nada [table class=fecha_up][td]Se modifico:22/7/15 - 22:44 hrs.[/td][/table]


Banner en temas :

http://tweeting.com/wp-content/uploads/2012/04/Cute-Kitten-Facebook-Cover.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

84


Puntos :

106


Me gusta :

18


ingreso :

10/07/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario http://megauniverso.superforo.net/

Volver arriba Ir abajo

Responder Mensaje privado
#5
Re: [CSS] Chat igual que el de Facebook 
el Miér Jul 29, 2015 10:18 pm
Posteo para ver que tal
Dragoneitors
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://doublemesh.com/wp-content/uploads/2015/12/star-wars-7-cover-photo.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

41


Puntos :

50


Me gusta :

7


ingreso :

26/06/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Responder Mensaje privado
#6
Re: [CSS] Chat igual que el de Facebook 
el Jue Ago 27, 2015 1:56 pm
Muy interesante, tal vez en algun momento pueda usarlo
angiemg
avatar

¿Que estoy pensando? :

Con mucho frio [table class=fecha_up][td]Se modifico:21/01/16 - 11:58 hrs.[/td][/table]


Banner en temas :

https://i.imgur.com/p6GfH0S.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

70


Puntos :

100


Me gusta :

14


ingreso :

26/08/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Responder Mensaje privado
#7
Re: [CSS] Chat igual que el de Facebook 
el Miér Dic 16, 2015 6:54 pm
Creo que este es el tipo de chat que andaba buscando. Mil gracias!
ShirVaFerSa

¿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://www.addcovers.com/covers/04l0p249m1hqkqk.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

9


Puntos :

17


Me gusta :

8


ingreso :

16/12/2015


Sexo :

Femenino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario

Volver arriba Ir abajo

Responder Mensaje privado
#8
Re: [CSS] Chat igual que el de Facebook 
el Miér Ene 13, 2016 6:33 pm
Me gustaría ver este tutorial para ponerlo en practica. Gracias.
Lola_R
avatar

¿Que estoy pensando? :

No tengo idea de como ver los recursos aquí u_u [table class=fecha_up][td]Se modifico:13/01/16 - 18:29 hrs.[/td][/table]


Banner en temas :

http://doublemesh.com/wp-content/uploads/2015/12/star-wars-7-cover-photo.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

9


Puntos :

12


Me gusta :

3


ingreso :

13/01/2016


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

FireFox


Ver perfil de usuario

Volver arriba Ir abajo

Responder Mensaje privado
#9
Re: [CSS] Chat igual que el de Facebook 
el Lun Feb 29, 2016 7:38 pm
Buen tutorial a ver que tal
cadillacisgod
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://profilerehab.com/facebook_covers/cars/pink_cadillac_cover_1.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

15


Puntos :

17


Me gusta :

2


ingreso :

29/02/2016


Sexo :

Masculino

Plataforma :

phpbb2


Navegador :

chrome


Ver perfil de usuario

Volver arriba Ir abajo

Responder Mensaje privado
#10
Re: [CSS] Chat igual que el de Facebook 
el Vie Mar 04, 2016 6:33 pm
Quiero ver que tal
Ivy Laufeyson
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 :

8


Puntos :

11


Me gusta :

3


ingreso :

04/03/2016


Sexo :

Femenino

Plataforma :

PhpBB2


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Responder Mensaje privado

 En la misma categoria

 Temas relacionados

 :: Modifica tu foro :: CSS

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