Trucos CSS para Joinchat

Personaliza el plugin con estilos CSS

Cambia la apariencia de Joinchat añadiendo algunos estilos en la hoja de estilos de tu tema o desde Apariencia > Personalizar > CSS adicional

Puedes combinar varios estilos:

.joinchat {
 --bottom: 80px;
 --s: 52px;
}

Para aplicar los cambios solo en dispositivos móviles utiliza «media queries»:

@media (max-width: 480px), (orientation: landscape) and (max-width: 767px) {
 .joinchat {
 --bottom: 80px;
 --s: 52px;
 }
}

👆 Subir el botón flotante

/* defaults: desk 20px, mobile 6px */
.joinchat {
 --bottom: 80px;
}

🤏 Cambiar el tamaño el botón flotante

/* default: 60px */
.joinchat {
 --s: 50px;
}

☝️ Poner por encima de otros objetos Joinchat

/* default: before v4.4 1000, after v4.4 9999, after v4.5.10 9000 */
.joinchat {
 z-index: 99999; 
}

📏 Cambiar la altura de la cabecera de chat

/* defaults: desk 70px, mobile 55px */
.joinchat {
 --header: 60px;
}

🎨 Cambiar el color del botón flotante

/* default: #25d366; */
.joinchat__button {
 background-color: #999;
}

🍪 Utilizamos cookies para mejorar tu experiencia. Visita nuestra Política de Privacidad para saber más.

AL UTILIZAR NUESTRA WEB, ACEPTAS EL USO DE COOKIES.