Please log in to continue
WalkMe stores your data in the region chosen during account setup.
We have data centers in the US and EU that follow local privacy and compliance laws. If you're not sure which region to select, check with your admin.
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.
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:
Ejemplo a nivel global:
El ID de Smart Walk-Thru se puede encontrar en el Editor de WalkMe:
Consulta a continuación una lista completa de clases.
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;
}
| 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:
|
.walkme-custom-balloon-close-button {
display:none !important;
}
.walkme-custom-side-border {
display: none !important;
}
.walkme-custom-side-border {
background-color: red !important;
}
#walkme-balloon-XXXXXXX .walkme-custom-balloon-content-wrapper {
background-color: green !important;
}
#walkme-balloon-xxxxxxx {
width: 300px !important;
min-width: 0 !important;
padding: 10px !important;
}
.walkme-custom-balloon-arrow.walkme-custom-flow-balloon-xxxxxxx{
display: none !important;
}
.walkme-custom-balloon-subtext {
display: none !important;
}
.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;
}
.walkme-custom-balloon-title, .walkme-custom-balloon-content {
font-size: 12px !important;
}
.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;
}