• ¡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
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
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
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.
 
lms

lms

Administrador
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
 
Lummox

Lummox

Miembro
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