CSS
Breve descripción general
Las hojas de estilo en cascada (CSS) te permiten personalizar el aspecto del contenido de WalkMe, incluidos el diseño, los colores y las fuentes.
La función CSS de WalkMe permite la personalización de ciertos tipos de contenido, incluidos los pasos de Smart Walk-Thru, encuestas y el menú WalkMe.
Webinar sobre estilización con CSS
Casos de uso
Los casos de uso de CSS incluyen los siguientes:
- Insertar una imagen o logotipo en un globo
- Cambiar el ancho o eliminar flechas de un globo
- Cambiar el texto de un botón Siguiente
Cómo funciona
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
Reglas globales frente a reglas locales
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
Editar CSS local
- Abrir el menú de ajustes del elemento
- 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
- 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.
Ejemplo:
#walkme-balloon-1760356 .walkme-custom-balloon-title {
color: #000 !important;
}
Personalizaciones de CSS más comunes
Smart Walk-Thrus
Encuestas
Menú de WalkMe
ActionBot
ShoutOuts clásicos
General WalkMe
Cambiar la fuente global de WalkMe
Iniciadores
Cambiar la fuente
font-family: /*tu fuente aquí */ !important;
}
SmartTips
Cambiar la fuente
font-family: /*tu fuente aquí */ !important;
}
Ocultar tooltips
Información técnica
- Las CSS locales siempre anulan las CSS globales
- 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
- Al cambiar el texto utilizando CSS, ten en cuenta que esto podría anular las traducciones
- Los siguientes términos no son compatibles y pueden causar errores:
- @import
- expresión
- javascript
- -moz-binding
- -o-link
- comportamiento
- Solo los ShoutOuts clásicos son compatibles con CSS
- CSS no puede afectar a los elementos de shadow DOM