Cambiar el diseño configurando el CSS

(1) Haga clic en el botón de configuración a la derecha de la página de administración.

(2) Haga clic en [Chat]> [Diseño]> [CSS original].

(3) En el espacio vacío [Introduzca el CSS original], introduzca los códigos de modificación del diseño y haga clic en [Actualizar].

Al agregar un código, agréguelo sin eliminar el que ya está escrito.

Código de modificación del diseño

Cambiar la altura de la ventana de chat

※ Al cambiar los números a rojo, podrá cambiar la altura de la ventana de chat.

■ Tema Mini

#chatplusview.chatplusview-mini #outline #chatpluscontent #body #messages{height:330px;}

■Tema Básico

#chatplusview.chatplusview-basic #outline #chatpluscontent #body #messages{height:330px;}

■ Tema Aplicación

#chatplusview.chatplusview-app #outline #chatpluscontent #body #messages, #chatplusview.chatplusview-app #outline #chatpluscontent #body.frame #messages {height:330px;}

■ Tema Moderno

#chatplusview.chatplusview-modern{height:500px;}

Cambiar el ancho del chat (en espera)

※ Al cambiar los números rojos, puede cambiar el ancho del chat.

#chatplusview.chatplusview-basic.closed #outline,

#chatplusview.chatplusview-app.closed #outline,

#chatplusview.chatplusview-mini.closed #outline{

  position:absolute;

  right:0;

  bottom:0;

  width:200px;

}

Cambiar la posición de la ventana de chat

※ Si introduce lo siguiente, puede mostrar el chat en el lado izquierdo.

#chatplusview{

  left:0px;

}

Cambiar la altura del cuadro de texto

※ Esto cambia la altura del cuadro de texto en el que los visitantes pueden escribir mensajes.
Puede cambiar la altura del marco del chat cambiando el número en la parte roja.

#chatplusview.chatplusview-basic #outline #chatpluscontent #textarea #message-wrapper textarea,

#chatplusview.chatplusview-basic #outline #chatpluscontent #textarea #message-wrapper.has-operate textarea,

#chatplusview.chatplusview-app #outline #chatpluscontent #textarea #message-wrapper textarea,

#chatplusview.chatplusview-app #outline #chatpluscontent #textarea #message-wrapper.has-operate textarea,

#chatplusview.chatplusview-mini #outline #chatpluscontent #textarea #message-wrapper textarea,

#chatplusview.chatplusview-modern #outline #chatpluscontent #textarea #message-wrapper textarea {

  height: 150px;

  max-height: 150px;

}

Si desea cambiar la altura del cuadro de texto con un tema que no sea el tema moderno, deje el cuadro [una sola frase en el cuadro de texto] en blanco, desde [Chat]> [Menú].

Cambiar el icono de la ventana de chat

※ Puede cambiar el icono de la ventana de chat cambiando el Unicode a rojo.

Página de referencia Unicode para los iconos:
https://fontawesome.com/icons
(Vaya a la página de los iconos que desee utilizar y copie el Unicode).

■ Botón para minimizar la ventana

#chatplusheader .operate .button-close i::before {content: "\f146";}

■ Botón para finalizar el chat

#chatplusheader .operate .button-remove i::before {content: "\f00d";}

■ Sobre el smartphone: botón de visualización de todas las ventanas

#chatplusheader .operate .button-expand i::before {content: "\f424";}

■ Sobre el smartphone: botón para minimizar la ventana

#chatplusheader .operate .button-compress i::before {content: "\f422";}

Haz que el eye-catcher sea transparente

#eye_catcher:hover {

opacity: 0.6;

}

Cambiar la fuente

※ Como ejemplo, puede introducir este código para cambiar la fuente a [Yu Mincho].

#chatplusview div, #chatplusview span, #chatplusview applet,

#chatplusview object, #chatplusview iframe, #chatplusview h1,

#chatplusview h2, #chatplusview h3, #chatplusview h4, #chatplusview h5,

#chatplusview h6, #chatplusview p, #chatplusview blockquote,

#chatplusview pre, #chatplusview a, #chatplusview abbr, #chatplusview

acronym, #chatplusview address, #chatplusview big, #chatplusview cite,

#chatplusview code, #chatplusview del, #chatplusview dfn, #chatplusview

em, #chatplusview font, #chatplusview ins, #chatplusview kbd,

#chatplusview q, #chatplusview s, #chatplusview samp, #chatplusview

small, #chatplusview strike, #chatplusview strong, #chatplusview sub,

#chatplusview sup, #chatplusview tt, #chatplusview var, #chatplusview

dl, #chatplusview dt, #chatplusview dd, #chatplusview ol, #chatplusview

ul, #chatplusview li, #chatplusview fieldset, #chatplusview form,

#chatplusview label, #chatplusview legend, #chatplusview table,

#chatplusview caption, #chatplusview tbody, #chatplusview tfoot,

#chatplusview thead, #chatplusview tr, #chatplusview th, #chatplusview

td, #chatplusview input, #chatplusview textarea {font-family: "游明朝",

serif;}

Para obtener más información sobre cómo cambiar las fuentes, consulte también Usar las fuentes de Google en la ventana de chat.

Cambiar el tamaño de la fuente

※ Puede cambiar el tamaño de la fuente cambiando los números rojos.

■ Tema Mini

#chatplusview.chatplusview-app #outline #chatpluscontent #body #messages

.msg .text {font-size: 14px;

■ Tema Básico

#chatplusview.chatplusview-app #outline #chatpluscontent #body #messages

.msg .text {font-size: 14px;

■ Tema Aplicación

#chatplusview.chatplusview-app #outline #chatpluscontent #body #messages

.msg .text {font-size: 14px;

■ Tema Moderno

#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages

.msg .text {font-size: 14px;

Para conocer otros códigos que definen la animación para el eye-catcher consulte Animación del eye-catcher con CSS original.