• ¡Bienvenido a XenFácil!

    Estás viendo el sitio como Invitado. Para poder participar en este sitio

    y obtendrás privilegios adicionales, acceso a otras áreas y mucho mas.

    ¡Es gratis!


    ¿Ya eres miembro? Inicia sesión

Solucionado Flecha en contenido de mensaje.

Estado
Cerrado para nuevas respuestas
Lummox

Lummox

Miembro
Mensajes
76
Puntuación de reacciones
2
Puntos
8
País
España
Página web
Web
Hola, estoy tratando de conseguir el efecto de flecha que apunta hacia el avatar del usuario cuando escribe un mensaje, como se ve en esta imagen:

c3C5QaD.png


Este seria mi foro, y aqui donde quiero que se vea (igual que en la imagen de arriba). Por alguna razon, no muestra ninguna flecha por defecto (la que sale del recuadro del usuario).

qxzM1TX.png


Le estoy dando mil vueltas y no se como poner esta flechita :(

Si alguien me puede ayudar, se lo agradeceria.

Un saludo.
 
luis

luis

Administrador
Mensajes
1.636
Puntuación de reacciones
727
Puntos
613
Sitio web
xenfacil.com
País
España
Versión de XenForo
1.5.12
PayPal
Donar dinero a este usuario
Página web
Web
Acabo de tomarle esto prestado a Shelley, de este tema http://xenforo.com/community/threads/need-to-put-an-arrow-on-messagecontent.64031/#post-676681 juega con con él y adáptalo.
Insertar CODE, HTML o PHP: 
 .message .messageUserBlock .arrow {
 transform: rotate(180deg);
 right: -17px;
 -moz-border-left-colors: #b2b2b2;
}
 .message .messageUserBlock .arrow span { left: -11px; -moz-border-left-colors: #cecece;}
.message .messageContent {border: 1px solid #b2b2b2; border-radius: 5px; background-color: #cecece;}
 
Lummox

Lummox

Miembro
Mensajes
76
Puntuación de reacciones
2
Puntos
8
País
España
Página web
Web
Hola Luis, esta mañana probe ese mismo codigo, lo he introducido en mi extra.css, pero no parece que funcione ya que sigo sin ver la flecha.
 
luis

luis

Administrador
Mensajes
1.636
Puntuación de reacciones
727
Puntos
613
Sitio web
xenfacil.com
País
España
Versión de XenForo
1.5.12
PayPal
Donar dinero a este usuario
Página web
Web
Tu estilo tiene una plantilla CSS propia, prueba ahí
 
Lummox

Lummox

Miembro
Mensajes
76
Puntuación de reacciones
2
Puntos
8
País
España
Página web
Web
Si, en esa plantilla propia tambien habia probado, pero tampoco funciona :(
 
lms

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
Luis dijo:
Insertar CODE, HTML o PHP: 
 .message .messageUserBlock .arrow {
transform: rotate(180deg);
right: -17px;
-moz-border-left-colors: #b2b2b2;
}
.message .messageUserBlock .arrow span { left: -11px; -moz-border-left-colors: #cecece;}
.message .messageContent {border: 1px solid #b2b2b2; border-radius: 5px; background-color: #cecece;}
Hacer clic para expandir...
El código no puede funcionar ya que está encaminado a que la flecha esté en la info de usuario del mensaje y no en el mensaje en sí.

Creo que en las propiedades del estilo, en mensjes, puedes estilar el borde que lleva, su color de fondo, el del texto y en la zona misceláneo añadir el código. Te miro cual debiera ser.

Salud2
 
luis

luis

Administrador
Mensajes
1.636
Puntuación de reacciones
727
Puntos
613
Sitio web
xenfacil.com
País
España
Versión de XenForo
1.5.12
PayPal
Donar dinero a este usuario
Página web
Web
El código facilitado y colocado en la plantilla extra.css del estilo de xenforo muestra esto:

Imagen3.png
 
Lummox

Lummox

Miembro
Mensajes
76
Puntuación de reacciones
2
Puntos
8
País
España
Página web
Web
Vale, lo he solucionado de la siguiente manera:

En la plantilla "extra" propia del tema, he añadido esto:

Insertar CODE, HTML o PHP: 
/* Flecha contenido mensaje */
 .message .messageUserBlock .arrow {
 transform: rotate(180deg);
 right: -17px;
 -moz-border-left-colors: #b2b2b2;
}
/* Fin flecha contenido mensaje */

En la plantilla "message_user_info":

Insertar CODE, HTML o PHP: 
.messageUserBlock .arrow
{
position: absolute;
top: 10px;
right: -10px;
 
display: block;
width: 0px;
height: 0px;
line-height: 0px;
 
border: 10px solid transparent;
border-left-color: rgb(65, 54, 34);
-moz-border-left-colors: rgb(235, 235, 235);
border-right: none;
 
/* Hide from IE6 */
_display: none;
}
 
.messageUserBlock .arrow span
{
position: absolute;
top: -10px;
left: -11px;
 
display: block;
width: 0px;
height: 0px;
line-height: 0px;
 
border: 9px solid transparent;
border-left-color: rgb(31, 28, 22);
-moz-border-left-colors: rgb(245, 245, 245);
border-right: none;
}

Resultado:

7PXG2K4.png
 
Estado
Cerrado para nuevas respuestas
Arriba