CSS para Smart Walk-Thrus
Breve descripción general
El uso de hojas de estilo en cascada (CSS) te permite personalizar los elementos del Smart Walk-Thru, incluido el diseño, los colores y las fuentes.
Al escribir CSS es esencial hacer referencias a varios componentes o elementos del Smart Walk-Thru. Este artículo proporciona una descripción general de las opciones de CSS disponibles para personalizar estos elementos avanzados.
Para personalizar los Smart Walk-Thrus utilizando las opciones predeterminadas, consulta Smart Walk-Thru: Guía de introducción.
Cómo funciona
Componentes de un Smart Walk-Thru
Cada Smart Walk-Thru incluye una serie de componentes (elementos) que se pueden personalizar con CSS. Los Smart Walk-Thrus se pueden personalizar tanto en el plano local como global.
Si personalizas un solo Smart Walk-Thru en el plano global, debes introducir el ID del Smart Walk-Thru antes de la clase que identifica el globo.
Ejemplo a nivel local:
- .walkme-custom-balloon-title
Ejemplo a nivel global:
- #walkme-balloon-XXXXXXX.walkme-custom-balloon-title
El ID de Smart Walk-Thru se puede encontrar en el Editor de WalkMe:
- Pasa el cursor sobre el Smart Walk-Thru en el editor
- Haz clic en el menú Opciones
- Selecciona Copiar ID
Consulta a continuación una lista completa de clases.
Uso de !important
Por defecto, el diseño del tema de WalkMe anula cualquier otro cambio de diseño.
Para que se aplique CSS, la regla CSS debe contener "!important" para garantizar que anule el estilo por defecto.
Ejemplo:
#walkme-balloon-1760356 .walkme-custom-balloon-title {
color: #000 !important;
}
Editar CSS local
- Abre el menú Opciones de paso del Smart Walk-Thru
- Ir a la pestaña Interacción
- Haz clic en Editar CSS
- Introduce el CSS personalizado en la Consola CSS
- Haz clic en Guardar
Editar CSS global
- Haz clic en Editar CSS global en el menú de ajustes del Editor de WalkMe
- Introduce el CSS personalizado en el editor CSS
- Reemplaza las secciones resaltadas en el CSS a continuación con tus personalizaciones
- Haz clic en Guardar
- Haz clic en Publicar ajustes
Componentes configurables del Smart Walk-Thru
| DIV | Funciones editables | |
|---|---|---|
| 1 | .walkme-custom-side-border | Borde del globo lateral izquierdo:
|
| 2 | .walkme-custom-balloon-separator | Separador de globo (tercio inferior):
|
| 3 | .walkme-custom-balloon-title | Título del globo:
|
| 4 | .walkme-custom-balloon-content | Texto del globo:
|
| 5 | .walkme-custom-balloon-subtext | Número de paso:
|
| 6 | .walkme-custom-balloon-back-button | Botón Atrás:
|
| 7 | .walkme-custom-balloon-next-button | Botón Siguiente:
|
Personalizaciones comunes de CSS
Eliminar el botón "X" de un globo
.walkme-custom-balloon-close-button {
display:none !important;
}
Eliminar los bordes laterales de un globo
.walkme-custom-side-border {
display: none !important;
}
Cambiar el color del borde lateral del globo
.walkme-custom-side-border {
background-color: red !important;
}
Cambiar el color de fondo del globo
#walkme-balloon-XXXXXXX .walkme-custom-balloon-content-wrapper {
background-color: green !important;
}
Alterar el ancho de un globo
#walkme-balloon-xxxxxxx {
width: 300px !important;
min-width: 0 !important;
padding: 10px !important;
}
Eliminar una flecha de un globo
.walkme-custom-balloon-arrow.walkme-custom-flow-balloon-xxxxxxx{
display: none !important;
}
Eliminar los números de pasos de una burbuja
.walkme-custom-balloon-subtext {
display: none !important;
}
Cambiar la fuente de una burbuja
.walkme-custom-balloon-content,
.walkme-custom-balloon-button-text {
font-family: /*tu fuente aquí */ !important;
}
Aplicar cambios de Z-Index a todas las burbujas de Smart Walk-Thru
.div.walkme-custom-walkthru-xxxxx.walkme-custom-simple-step {
z-index:0 !important;
}
.div.walkme-custom-walkthru-xxxxx.walkme-custom-balloon-arrow {
z-index:0 !important;
}
Hacer que el tamaño del texto corporal por defecto coincida con el tamaño del encabezado
.walkme-custom-balloon-title, .walkme-custom-balloon-content {
font-size: 12px !important;
}
Reduzca el espacio en blanco en los globos que no tienen el botón Siguiente/Atrás
.walkme-custom-balloon-bottom-div:has(.walkme-custom-balloon-no-buttons-div) {
display: none !important;
}
.walkme-custom-balloon-inner-div:has(.walkme-custom-balloon-no-buttons-div) {
padding-bottom: 20px !important;
}