CSS es un lenguaje de hojas de estilos utilizado para describir el formato de un documento escrito en un lenguaje de marcado. Al escribir CSS, deberás hacer referencia a los diferentes componentes o elementos del contenido de WalkMe.
Cada elemento de WalkMe incluye una serie de componentes (elementos) que se pueden personalizar con CSS.
Por ejemplo, puedes seleccionar la sección de título de un globo utilizando esta clase:
.walkme-custom-balloon-title
Mejores prácticas
Al introducir CSS personalizado, WalkMe muestra opciones de autocompletado para selectores, propiedades y valores
CSS se puede aplicar global o localmente. El uso de la consola CSS local facilita la personalización de un elemento individual de WalkMe. Si estás personalizando a nivel global, debes introducir el ID del elemento de WalkMe.
Ejemplo a nivel local: .walkme-custom-balloon-title
Ejemplo a nivel global: #walkme-balloon-XXXXXXX.walkme-custom-balloon-title
En caso de error, aparecerá un mensaje de validación después de hacer clic en Guardar.
Los mensajes de error también están disponibles para HTML bajo petición. Ponte en contacto con tu gestor de éxito del cliente o con el contacto de WalkMe para que esto se active.
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
Haz clic en Guardar
Haz clic en Publicar ajustes
Buscar y reemplazar accesos directos
Puedes utilizar los siguientes atajos de teclado (Windows / Mac) para buscar y reemplazar en la consola CSS:
Buscar: Ctrl-F / Cmd-F (pulsa Intro para ir al siguiente, Mayús-Intro para ir al anterior)
Reemplazar: Ctrl-R / Cmd-R
Ir a la línea: Ctrl-J / Cmd-J
Mira una demostración rápida a continuación:
Encontrar ID de WalkMe
Pasa el cursor sobre el elemento en el editor
Haz clic en el menú Opciones
Haz clic en Copiar ID
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.
Añadir CSS al contenido de WalkMe también puede afectar a CSS en el sitio donde se está viendo el contenido
Si no se añaden la indentación y los espacios en blanco adecuados al CSS global, no se publicará ni se podrá ver en el modo de juego, pero seguirá siendo visible en el modo de vista previa
La práctica recomendada es formatear el código en un entorno de desarrollo integrado (IDE, por sus siglas en inglés), como Visual Studio Code o Sublime, y realizar la primera prueba en el Flow Tracker
Para que los cambios de CSS surtan efecto, debes realizar una publicación de Ajustes
