Trucos CSS para Joinchat

Variables CSS de Joinchat

Joinchat utiliza algunas variables para modificar sus estilos de forma global por lo que, generalmente, es mejor cambiar estas variables en lugar de la propiedad CSS concreta.

Variable	Valor por defecto	Qué hace
`--sep`	20px (6px mobile)	Separación a los lados del widget
`--bottom`	var(–sep)	Separación inferior del widget
`--s`	60px	Tamaño del botón flotante
`--header`	Calculado (–s * 1.6)	Alto de la cabecera de ventana de chat

Variables CSS de tamaño

Los colores se calculan automáticamente desde el selector de colores en los ajustes de Joinchat. La forma más sencilla de cambiarlos es desde ahí. Pero para cambios más especifícos (por ejemplo, definir otro color de hover) éstas son las variables:

Variable	Valor por defecto	Qué hace
`--ch`	Color definido en los ajustes	Hue (matiz)
`--cs`	Color definido en los ajustes	Saturación del color
`--cl`	Color definido en los ajustes	Luminosidad del color
`--hsl`	Calculado	Paquete HSL para reutilizar
`--color`	Calculado	Color principal
`--hover`	Calculado (–color 20% más claro)	Variante más claro para hover
`--dark`	Calculado (–color 10% más oscuro)	Variante más oscura para modo oscuro
`--bg`	Calculado (–color con 4% de opacidad)	Fondo de la ventana de chat
`--msg`	Calculado (igual que –color)	Color de links, botones, etc.
`--bw`	Color definido en los ajustes	Texto blanco (1) o negro (0)
`--text`	Calculado (–bw)	Color del texto en botones y cabecera

Variables CSS de colores/texto

Personaliza el plugin con estilos CSS

La mejor forma de de cambiar la apariencia de Joinchat es añadiendo algunos estilos desde los ajustes de Joinchat / Avanzado en el campo CSS adicional. Así estos estilos sólo se cargarán si el botón flotante de Joinchat se muestra en la página.

Puedes combinar varios estilos:

.joinchat {
  --bottom: 80px;
  --s: 52px;
}Lenguaje del código: CSS (css)

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;
  }
}Lenguaje del código: CSS (css)

👆 Subir el botón flotante

/* defaults: desk 20px, mobile 6px */
.joinchat {
  --bottom: 80px;
}Lenguaje del código: CSS (css)

🤏 Cambiar el tamaño el botón flotante

/* default: 60px */
.joinchat {
  --s: 50px;
}Lenguaje del código: CSS (css)

☝️ Poner por encima de otros objetos Joinchat

/* default: 9000 */
.joinchat {
  z-index: 99999; 
}Lenguaje del código: CSS (css)

📏 Cambiar la altura de la cabecera de chat

/* defaults: desk 70px, mobile 55px */
.joinchat {
  --header: 60px;
}Lenguaje del código: CSS (css)

🎨 Cambiar el color del botón flotante

/* default: #25d366; */
.joinchat__button {
  background-color: #999;
}Lenguaje del código: CSS (css)

🌅 Dejar la imagen alternativa fija

A partir de Joinchat 6 se puede hacer desde los ajustes de Joinchat.

.joinchat--show .joinchat__button__image {
  animation: none !important;
  opacity: 1 !important;
}Lenguaje del código: CSS (css)

Docs