El ícono de chat de Shopify se interpone en el camino de una gran cantidad de contenido (una pregunta común en sus foros), pero las antiguas soluciones de CSS no funcionan porque el nuevo ícono de bandeja de entrada/chat ahora está dentro de un iframe, y mi JS es poco convincente.
He leído muchas respuestas de Stackoverflow, así como publicaciones de blog, pero no puedo hacerlo funcionar, lo siento. Y combinado con la antigüedad de algunas de las respuestas, no está claro si las respuestas que probé son la forma "correcta" de hacer las cosas.
Sin embargo, aquí hay una versión simplificada de dónde estoy...
<iframe id="dummy-chat-button-iframe" name="dummy-chat-button-iframe" src="about:blank"></iframe> <script> var iframe = document.getElementById("dummy-chat-button-iframe"); var element = iframe.contentWindow.document.getElementById("dummy-chat-button")[0]; element.style.height = "40px"; element.style.width = "40px"; </script>Lo anterior fue una prueba para ver si podía afectar los elementos dentro del iframe, los selectores/estilos reales a los que necesito apuntar serían...
button#dummy-chat-button.chat-toggle { margin-top: 3px; height: 40px; width: 40px; padding: 0; } button.chat-toggle svg { width: auto; height: 20px; margin: auto; }NOTA: No tengo control sobre el HTML del iframe, los estilos o la llamada del iframe en sí, por lo que solo puedo usar CSS y JS desde fuera del iframe.
<style> al encabezado del iframe y es esto posible usando JS?Lo siento, mi JS es tan limitado, cualquier ayuda o sugerencia en la dirección correcta sería muy apreciada.
Saludos, ben
El uso de transform en el iframe escala varias propiedades CSS a la vez sin necesidad de JS...
/* Shopify inbox chat icon */ #dummy-chat-button-iframe { transform: scale(0.75); bottom: -5px !important; right: -5px !important; }Después de cambiar el tamaño, las otras reglas mueven el icono más cerca del borde inferior/derecho.
Un problema : después de que alguien chatea y cierra la ventana de chat, el ícono vuelve a su tamaño/ubicación original.
Supongo que aquí es donde JS funcionaría mejor.