fbpixel

Como modificar la posición del logo de facebook Messenger

Hola!

Tengo: WordPress 5.0.3 funciona con el tema [i-amaze]
(https://ciudadmascotera.com.ar/).
Descargue el plugin: FB Messenger for wordpress

FB Messenger for wordpress pone el logo a la izquierda (la aplicación) a la mitad de la página aproximadamente, con el inspector de Chrome logre poner la posición que deseo que tenga, ya el logo te lo pone por defecto a la mitad de pagina (200px), yo lo modifique a (800 px) para que queda mas abajo. La cuestión es que no se donde esta la pagina para que pueda ponerle el codigo que esta en azul en la imagen.

Hola, tenés que conectarte por FTP y agregar el código al archivo style.css.

Vas a tener que poner un selector antes de las propiedades. Fíjate si el plugin te deja agregarle una clase al logo de menssenger.

1 me gusta

El selector del que hablaba… Podés usar el id del div que contiene a la etiqueta img.

1 me gusta

Hola Máximo! Ante todo muchísimas gracias por responder y brindarme tu ayuda. Te quería preguntar la ruta para encontrar el archivo style.css si sabes cuál es.

Entro al FTP por medio de Dreamweaver CS6 y recuerdo (si no me equivoco) que había más de un archivo con ese nombre pero en distintas ubicaciones por lo que entiendo que cada hoja de estilo con ese nombre al tener una ubicación diferente son para modificar otras páginas. Si sabes en qué carpeta encuentro esa hoja de estilo que me decís te lo súper agradecería.

Debería estar en wp-content/themes/nombre-de-tu-theme/style.css

Nombre-de-tu-theme debería ser el child theme para que no tengas problemas más adelante.

1 me gusta

Hola Maxi! Encontre el style.css y lo modifique:

#fbMsg-leftside img {
position: fixed;
z-index: 9999; /* Sit on top /
left: 0;
float:left;
top: 85%;
margin-top: -25px;
margin-left: 18px; /
-(image_height/2) */
cursor: pointer;
width: 55px;
height: 55px;
}

El tema es el siguiente… En mozilla se reflejan los cambios, pero en chrome no :frowning: Sabes a que se puede deber y como modificarlo ?

Nuevamente muchas gracias!!!

CiudadMascotera.com.ar

1 me gusta

Yo en Chrome lo veo bien. Seguramente tenes es por la caché del navegador.

Los 3 puntos de arriba a la derecha -> mas herramientas -> borrar datos de navegación

Ahí podés borrar la caché del navegador y seguramente lo veas bien.

1 me gusta

TE AMOOOO!!! <3
Jajajajaja Gracias Maximo!!! Un groso!!

Ahora voy a alinear el whatsapp y el messenger. Muchas gracias!!!

Por si alguno le sirve el dato, el archivo style.css , en mi caso, estaba en wp-content/plugins/nombre-de-tu-plugins/css/style.css

En mi caso, el /nombre-de-tu-plugins/ es “fb-messenger”

1 me gusta

Cuidado con modificar plugins. Cuando lo actualices se va a perder lo que hiciste.

Por eso te decía que lo agregues al Athletic.css del chile themes. O si no al css personalizado que está en el personalizados de WordPress.

1 me gusta

Uyy… Que buen dato!
Pensé que ya lo teníamos listo :confused: No entendí… ¿“del chile themes”?

En el themes tengo la carpeta que es i-amaze (Apariencia) y después en letras y en ingles 26 - 27 - 28 - 29 y el index.php (En total 6 carpetas y un index.php)

Cuales serian los pasos para llegar al css personalizado que está en el personalizados de WordPress.

¿Voy a mi panel de admin y luego le doy click al boton personalizar sitio? Si es asi… despues como sigo ?

1 me gusta

Chile = child. Fue el corrector del celular jajaja
Para no complicarte pone el CSS acá:

Dashboard de WordPress -> apariencia -> personalizar -> CSS adicional.

Te va a aparecer una caja de texto donde poner el css.

1 me gusta

Jajajaja Pense… Chile ??? No entendia nada jajajaja

Genial! Llegue al css adicional, ahora pego este codigo ahi ?

#fbMsg-leftside img {
position: fixed;
z-index: 9999; /* Sit on top /
left: 0;
float:left;
top: 85%;
margin-top: -25px;
margin-left: 18px; /
-(image_height/2) */
cursor: pointer;
width: 55px;
height: 55px;
}

1 me gusta

Claro, lo pegas ahí, vas a tener el mismo resultado y cuando actualices el plugin no vas a tener ningún problema

1 me gusta

Listo! Muchisimas gracias!!!

Me queda una duda, ahora que estoy por modificar el de Whatsapp, tengo duda, si el div que tengo que modificar es todo este nombre completo div class=“whatsappme whatsappme–left whatsappme–show whatsappme–dialog” como se ve en la imagen de Chrome que deje, porque en la hoja de estilo, no encontre un estilo con esta linea completa “whatsappme whatsappme–left whatsappme–show whatsappme–dialog” pero si encontraba partes en el estilo:

whatsappme whatsappme, left whatsappme, show whatsappme, dialog! Me da la impresion que no tengo que ir modificando las partes de a una, sino el div que tiene todo junto y no lo estaria encontrando a donde podria estar. Como hago ?

Posicion%20Messenger%20Whatsapp|690x388

Esta es la posicion deseada:

1 me gusta

Lo que pasa es que cada espacio separa una clase, es decir, whatsappme, whatsappme-left, whatsappme-show, etc son todas clases distintas.

Para hacer tus cambios podrías usar la clase whatsappme.

.whatsappme{
Propiedad: valor;
}

Buenas tardes a todos!!

Maximo, te queria contar que hoy cuando voy a entrar a mi “Personalizar” se veia todo mal, asi:

pienso que lo habra producido el error fue el Style.css cuando lo modifique. Asi que agarre una copia que tengo y subi nuevamente toda la carpeta Theme ya que no se si modifique alguno mas ni cual podrian ser. Cuestion que, ahora el logo se ve estatico abajo y pegado al de whatsapp y por mas que cambie el Top desde el “Personalizar”, no se mueve para ningun lado.

Modifico el atributo top: 80%, !5%, 40%, 35px, 80px y limpio la cache y no se mueve.

#fbMsg-leftside img {
position: fixed;
z-index: 9999; /* Sit on top /
left: 0;
float:left;
top: 80%;
margin-top: -25px;
margin-left: 18px; / -(image_height/2) */
cursor: pointer;
width: 55px;
height: 55px;
}

Tenes idea que puede ser que este haciendo que no se mueva ?
Puede ser que la position: fixed sea que no deja que se mueva? Aunque me parece raro porque antes se movio

Pense que lo habia arrelado, pero no! Se ve mal el panel personalizado. Por suerte la web me parece que anda bien.

Pero la parte de admin se desconfiguro.

Hola @CiudadMascotera,

No sé si lograste solucionar el incidente con el .css, pero viendo tu código, a partir de la línea 4 hasta la línea 8, parecen estár comentadas: /Sit on top /…/ -(image_height/2)/

Saludos.