CSS para el menú de WalkMe
Breve descripción general
El uso de hojas de estilo en cascada (CSS) te permite personalizar los elementos del menú, incluido el diseño, los colores y las fuentes.
Al escribir CSS, las referencias a varios componentes o elementos del menú de WalkMe son esenciales. Este artículo proporciona una descripción general de las opciones de CSS que hay disponibles para personalizar estos elementos avanzados
Para personalizar el menú con las opciones predeterminadas, consulta Menú de WalkMe Player: Guía de introducción.
Cómo funciona
Estructura del menú de WalkMe
El menú de WalkMe solo se puede personalizar de forma global.
Cualquier regla CSS para el menú debe comenzar con el siguiente ID:
- #walkme-menu
Esta regla se puede reducir aún más según el estilo de menú:
- #walkme-menu.walkme-penguin
Se pueden añadir componentes adicionales al final:
- #walkme-menu.walkme-penguin .walkme-title
Consulta la lista completa de clases.
Uso de !important
Por defecto, el diseño del tema de WalkMe anula cualquier otro cambio de diseño en un globo o aplicación.
Para que se aplique CSS, la regla CSS debe contener "!important" para garantizar que anule el estilo por defecto.
Ejemplo:
#walkme-menu.walkme-penguin .walkme-title {
color: #000 !important;
}
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
Componentes de menú configurables
En la pestaña Personalizar reproductor puedes elegir varios widgets y estilos de menú diferentes.
Al añadir CSS, algunas de las siguientes clases son relevantes para todas las opciones de menú, mientras que otras aparecen solo en algunas.
| DIV | Funciones editables | Estilos de menú compatibles |
|---|---|---|
| .walkme-out-wrapper | Este elemento rodea todo el menú de WalkMe. Podrás editar lo siguiente:
|
Danube Colorado Mississippi |
| .walkme-in-wrapper | Este elemento rodea todo el menú de WalkMe. Podrás editar lo siguiente:
|
Danube Colorado Mississippi |
| .walkme-title | Este elemento contiene el texto. La posición predeterminada es absoluta. Podrás editar lo siguiente:
|
Danube Colorado Mississippi |
| .walkme-bar | Este elemento contiene el texto. Podrás editar lo siguiente:
|
Danube Mississippi |
| .walkme-question-mark | Este elemento contiene signo de interrogación en el lado izquierdo. El signo de interrogación en sí es un carácter y, por lo tanto, se puede diseñar utilizando:
|
Colorado |
| .walkme-arrow | Este elemento contiene la flecha a la derecha del texto. La posición predeterminada es absoluta. La flecha es un carácter y, por lo tanto, se puede diseñar con lo siguiente:
|
Mississippi |
Personalizar el
Vídeo de consejos y trucos de CSS
Cambiar el color del borde lateral del menú (franja izquierda)
div.walkme-menu.walkme-penguin.walkme-override.walkme-direction-ltr div.walkme-main, div.walkme-menu.walkme-penguin .walkme-override.walkme-direction-ltr div.walkme-main {
border-left-color: xxxxxxx !important;
}
Cambiar el color del borde lateral del menú (franja derecha, para menús de texto en idiomas con texto de derecha a izquierda)
div.walkme-menu.walkme-penguin.walkme-override.walkme-direction-rtl div.walkme-main, div.walkme-menu.walkme-penguin .walkme-override.walkme-direction-rtl div.walkme-main {
border-right-color: xxxxxxx !important;
}
Cambiar el color del texto de "Ayuda"
#walkme-tabs .walkme-first-tab .walkme-tab-button-text {
color: xxxxxxx !important;
}
Cambiar el color del texto de las "Acciones"
#walkme-main .walkme-category>.walkme-deployable-row .walkme-text .walkme-name {
color: xxxxxxx !important;
}
Cambiar el color del título del menú ("¿Cómo podemos ayudarte?")
#walkme-title {
color: xxxxxxx !important;
}
Cambiar el color de la barra de progreso
/* Color de la barra de progreso */
div.walkme-menu.walkme-penguin.walkme-override div.walkme-progress-bar-inner,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-progress-bar-inner {
background-color: LightCyan !important;
}
Personalizar la barra de búsqueda
Cambiar el color del botón de búsqueda (estático)
/* Cuadro de búsqueda */
div.walkme-menu.walkme-penguin.walkme-override div.walkme-search-box-button,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-search-box-button {
background: xxxxxxx !important;
}
Cambiar el color del botón de búsqueda (al pasar el cursor)
/* Cuadro de búsqueda al pasar el cursor*/
div.walkme-menu.walkme-penguin.walkme-override div.walkme-search-box-button:hover,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-search-box-button:hover {
background-color: xxxxxxx !important;
}
Cambiar el color del botón de búsqueda (una vez pulsado)
/* Cuadro de búsqueda clicado */
div.walkme-menu.walkme-penguin.walkme-override div.walkme-search-box-button:active,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-search-box-button:active {
background-color: xxxxxxx !important;
}
Eliminar el icono de la lupa
/* Eliminar el icono de búsqueda */
#walkme-menu.walkme-menu.walkme-penguin.walkme-california.walkme-theme-white-blue .walkme-search-box-button .walkme-search-box-button-image {
display: none !important;
}
Cambiar el color del texto de búsqueda
div#walkme-menu.walkme-menu.walkme-penguin.walkme-california.walkme-theme-white-blue input.walkme-search-box {
color: xxxxxxx !important;
}
Personalizar el contenido del menú
Cambiar el color del icono de WalkMe
/* Iconos de elementos de WalkMe */
div.walkme-menu.walkme-penguin.walkme-override .walkme-deployable.walkme-override div.walkme-deployable-icon.walkme-override,
div.walkme-menu.walkme-penguin.walkme-override .walkme-activatable.walkme-override div.walkme-deployable-icon.walkme-override,
div.walkme-menu.walkme-penguin .walkme-override .walkme-deployable.walkme-override div.walkme-deployable-icon.walkme-override,
div.walkme-menu.walkme-penguin .walkme-override .walkme-activatable.walkme-override div.walkme-deployable-icon.walkme-override {
color: xxxxxxx !important;
}
Cambiar el icono de salvavidas del menú
div#walkme-menu.walkme-menu.walkme-penguin.walkme-california.walkme-theme-white-blue .walkme-title:before {
content: "" !important;
background-image: url(xxxxxxx) !important;
background-size: 30px !important;
background-repeat: no-repeat !important;
background-position: center !important;
display: inline-block !important;
width: 30px !important;
altura: 30px !important;
}
Cambiar el color de los nombres de los elementos (al pasar el cursor)
/* Nombre del elemento de WalkMe al pasar el cursor */
div.walkme-menu.walkme-penguin.walkme-override .walkme-activatable:hover > .walkme-deployable-row > .walkme-text > div.walkme-deployable-name,
div.walkme-menu.walkme-penguin .walkme-override .walkme-activatable:hover > .walkme-deployable-row > .walkme-text > div.walkme-deployable-name {
color: xxxxxxx !important;
}
Cambiar el color de la fila del elemento (al pasar el cursor)
/* Fila de elementos al pasar el cursor */
div.walkme-menu.walkme-penguin.walkme-override div.walkme-activatable:hover,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-activatable:hover {
background-color: xxxxxxx !important;
}
Cambiar el color del nombre de la categoría
/* Categoría */
div.walkme-menu.walkme-penguin.walkme-override div.walkme-deployable.walkme-category > .walkme-deployable-row > .walkme-text > .walkme-name,
div.walkme-menu.walkme-penguin.walkme-override div.walkme-activatable.walkme-category > .walkme-deployable-row > .walkme-text > .walkme-name,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-deployable.walkme-category > .walkme-deployable-row > .walkme-text > .walkme-name,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-activatable.walkme-category > .walkme-deployable-row > .walkme-text > .walkme-name {
color: xxxxxxx !important;
}
Cambiar el color del nombre de la categoría (al pasar el cursor)
/* Nombre de la categoría al pasar el cursor */
div.walkme-menu.walkme-penguin.walkme-override div.walkme-deployable.walkme-category > .walkme-deployable-row:hover > .walkme-text > .walkme-name,
div.walkme-menu.walkme-penguin.walkme-override div.walkme-activatable.walkme-category > .walkme-deployable-row:hover > .walkme-text > .walkme-name,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-deployable.walkme-category > .walkme-deployable-row:hover > .walkme-text > .walkme-name,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-activatable.walkme-category > .walkme-deployable-row:hover > .walkme-text > .walkme-name {
color: xxxxxxx !important;
}
Cambiar el color de la fila de categoría (al pasar el cursor)
/* Fila de categoría al pasar el cursor: selecciona un color diferente, preferiblemente similar al color principal, pero más claro */
div.walkme-menu.walkme-penguin.walkme-override div.walkme-category > .walkme-deployable-row:hover,
div.walkme-menu.walkme-penguin.walkme-override div.walkme-category.walkme-opened > .walkme-deployable-row:hover,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-category > .walkme-deployable-row:hover,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-category.walkme-opened > .walkme-deployable-row:hover {
background-color: xxxxxxx !important;
}
Cambiar el color de la flecha de la categoría
/* Icono de flecha */
div.walkme-menu.walkme-penguin.walkme-override div.walkme-deployable.walkme-category > .walkme-deployable-row:hover > .walkme-deployable-icon,
div.walkme-menu.walkme-penguin.walkme-override div.walkme-activatable.walkme-category > .walkme-deployable-row:hover > .walkme-deployable-icon,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-deployable.walkme-category > .walkme-deployable-row:hover > .walkme-deployable-icon,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-activatable.walkme-category > .walkme-deployable-row:hover > .walkme-deployable-icon {
color: xxxxxxx !important;
}
Abrir o expandir categorías
div.walkme-menu.walkme-penguin.walkme-override .walkme-category .walkme-activatable, div.walkme-menu.walkme-penguin .walkme-override .walkme-category .walkme-activatable {
display: block !important;
}
div.walkme-menu.walkme-penguin.walkme-override .walkme-category.walkme-opened .walkme-activatable, div.walkme-menu.walkme-penguin .walkme-override .walkme-category.walkme-opened .walkme-activatable, div.walkme-menu.walkme-penguin.walkme-override .walkme-category .walkme-activatable.walkme-invisible,
div.walkme-menu.walkme-penguin .walkme-override .walkme-category .walkme-activatable.walkme-invisible {
display: none !important;
}
div.walkme-menu.walkme-penguin.walkme-override .walkme-deployable.walkme-category.walkme-override .walkme-activatable, div.walkme-menu.walkme-penguin.walkme-override .walkme-activatable.walkme-category.walkme-override .walkme-activatable, div.walkme-menu.walkme-penguin .walkme-override .walkme-deployable.walkme-category.walkme-override .walkme-activatable,
div.walkme-menu.walkme-penguin .walkme-override .walkme-activatable.walkme-category.walkme-override .walkme-activatable {
border-bottom: none !important;
}
div.walkme-menu.walkme-penguin.walkme-override .walkme-deployable.walkme-category.walkme-override .walkme-activatable .walkme-deployable-icon,
div.walkme-menu.walkme-penguin.walkme-override .walkme-activatable.walkme-category.walkme-override .walkme-activatable .walkme-deployable-icon,
div.walkme-menu.walkme-penguin .walkme-override .walkme-deployable.walkme-category.walkme-override .walkme-activatable .walkme-deployable-icon,
div.walkme-menu.walkme-penguin .walkme-override .walkme-activatable.walkme-category.walkme-override .walkme-activatable .walkme-deployable-icon {
height: 20px !important;
padding-top: 4px !important;
margin-left: 12px !important;
width: 26px !important;
}
div.walkme-menu.walkme-penguin.walkme-override .walkme-deployable.walkme-category.walkme-override .walkme-activatable .walkme-text, div.walkme-menu.walkme-penguin.walkme-override .walkme-activatable.walkme-category.walkme-override .walkme-activatable .walkme-text, div.walkme-menu.walkme-penguin .walkme-override .walkme-deployable.walkme-category.walkme-override .walkme-text, div.walkme-menu.walkme-penguin .walkme-override .walkme-activatable.walkme-category.walkme-override .walkme-activatable .walkme-text {
padding: 0 !important;
}
div.walkme-menu.walkme-penguin .walkme-category > .walkme-deployable-row > .walkme-deployable-icon:before, div.walkme-menu.walkme-penguin * .walkme-category > .walkme-deployable-row > .walkme-deployable-icon:before {
content: "e60a";
}
div.walkme-menu.walkme-penguin .walkme-category.walkme-opened > .walkme-deployable-row > .walkme-deployable-icon:before, div.walkme-menu.walkme-penguin * .walkme-category.walkme-opened > .walkme-deployable-row > .walkme-deployable-icon:before {
content:"e609";
}
Cambiar el color de los nombres de elementos de categoría
/* Nombres de elementos de categoría */
#walkme-menu .walkme-activatable:hover > .walkme-deployable-row > .walkme-text > .walkme-deployable-name, #walkme-menu .walkme-category:hover > .walkme-deployable-row > .walkme-text > .walkme-deployable-name { }
color: #f882bd !important;
}
Cambiar el ancho de la categoría
/* Ancho de categoría */
#walkme-menu .walkme-deployable-name {
text-overflow: none !important;
}
#walkme-menu .walkme-text {
width: 300px !important;
}
Añade WordWrap para mostrar todo el texto
/*Mostrar los nombres completos de WalkThru*/
div.walkme-deployable-name.walkme-name.walkme-override.walkme-css-reset {
overflow: visible !important;
}
Añade un logotipo al reproductor de menús
#walkme-menu #walkme-title:before {
background-image: url('') !important;
}
Personalizar la integración del Centro de ayuda
Cambiar el color del enlace "Abrir un ticket"
/* Color del enlace de Abrir un ticket */
div.walkme-menu.walkme-penguin.walkme-override .walkme-open-ticket,
div.walkme-menu.walkme-penguin .walkme-override .walkme-open-ticket {
color: xxxxxxx !important;
}
Cambiar el color del enlace "Abrir un ticket" (al pasar el cursor)
/* Color del enlace de Abrir un ticket al pasar el cursor */
div.walkme-menu.walkme-penguin.walkme-override .walkme-open-ticket:hover ,
div.walkme-menu.walkme-penguin .walkme-override .walkme-open-ticket:hover {
color: xxxxxxx !important;
}
Personalizar pestañas de menú
Cambiar el color de la pestaña seleccionada
/* Pestaña seleccionada */
div.walkme-menu.walkme-penguin.walkme-override .walkme-tabs .walkme-tab-button.walkme-tab-button-selected span.walkme-tab-button-text,
div.walkme-menu.walkme-penguin .walkme-override .walkme-tabs .walkme-tab-button.walkme-tab-button-selected span.walkme-tab-button-text {
color: xxxxxxx !important;
}
Cambiar el color del signo de interrogación de la pestaña "Ayuda"
/* Color del signo de interrogación */
.walkme-tab-button-selected span.walkme-tab-button-image.walkme-icon-font.walkme-contains-walkthru.walkme-contains-shuttle.walkme-contains-content.walkme-visible.walkme-search.walkme-search-providers.walkme-override.walkme-css-reset{
color: xxxxxxx !important;
}
Cambiar el color de la marca de verificación de la pestaña "Tareas"
/* Color de la marca de verificación */
.walkme-tab-button-selected span.walkme-tab-button-image.walkme-icon-font.walkme-contains-task.walkme-visible.walkme-progress-bar.walkme-override.walkme-css-reset{
color: xxxxxxx !important;
}
Cambiar el color al pasar el cursor
/* Otros efectos al pasar el cursor */
div.walkme-menu.walkme-penguin.walkme-override div.walkme-tabs .walkme-tab-button:hover,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-tabs .walkme-tab-button:hover,
div.walkme-menu.walkme-penguin.walkme-override div.walkme-category > .walkme-deployable-row:hover .walkme-deployable-icon,
div.walkme-menu.walkme-penguin.walkme-override div.walkme-category.walkme-opened > .walkme-deployable-row:hover .walkme-deployable-icon,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-category > .walkme-deployable-row:hover .walkme-deployable-icon,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-category.walkme-opened > .walkme-deployable-row:hover .walkme-deployable-icon {
background-color: red !important;
}
Personalizar el widget
Cambiar la fuente de un widget
/* Fuente del widget */
#walkme-menu.walkme-penguin,
#walkme-main .walkme-title {
font-family: /*tu fuente aquí */ !important;
}.walkme-menu.walkme-penguin .walkme-icon {
font-family: xxxxxxx !important;
}
Cambiar el color del widget de Mississippi
/* Mississippi */
div.walkme-player.walkme-mississippi.walkme-override div.walkme-bar {
background-color: red !important;
}
Cambiar el color del widget de Colorado (cuadro cuadrado)
/* Colorado */
div.walkme-player.walkme-colorado.walkme-override div.walkme-question-mark,
div.walkme-player.walkme-colorado.walkme-override * div.walkme-question-mark {
background: red !important;
}
Cambiar el color del signo de interrogación (?)
/* Widget ? Color */
.walkme-player.walkme-colorado.walkme-allenby .walkme-question-mark:before, .walkme-player.walkme-colorado.walkme-allenby * .walkme-question-mark:before {
color: white !important;
}
Cambiar el color de todo el widget de Colorado
/*Colorado a todo color*/
#walkme-player .walkme-in-wrapper.walkme-override.walkme-css-reset
border-color: #5765D1 !important;
}
.walkme-player.walkme-colorado.walkme-theme-black-blue .walkme-question-mark.walkme-override.walkme-css-reset
{
background-color: #5765D1 !important
}
.walkme-player.walkme-colorado.walkme-theme-black-blue .walkme-in-wrapper,
.walkme-player.walkme-colorado.walkme-theme-black-blue * .walkme-in-wrapper {
background-color: #5765D1 !important;
}
.walkme-player.walkme-colorado.walkme-theme-black-blue,
.walkme-player.walkme-colorado.walkme-theme-black-blue * {
background-color: #5765D1 !important;
}
.walkme-player.walkme-colorado .walkme-title.walkme-override.walkme-css-reset,
.walkme-player.walkme-colorado .walkme-title.walkme-override.walkme-css-reset * {
background-color: #5765D1 !important;
}
Cambiar la imagen de fondo de California
#walkme-player.walkme-california {
background-image: url('add URL here') !important;
}
Cambiar el color del widget de Danube
/* Danube */
div.walkme-player.walkme-danube.walkme-override div.walkme-bar,
div.walkme-player.walkme-danube.walkme-override * div.walkme-bar {
background: red !important;
}
Cambiar la imagen del widget de Zambezi
/* Zambezi - nueva imagen */
div.walkme-player.walkme-zambezi.walkme-override.walkme-position-major-bottom.walkme-position-minor-right_corner {
background-image: url('add URL here') !important;
}
Antes
Después
Publicar cambios en CSS
Para que los cambios en CSS se apliquen, deberás que publicarlos.
Algunos cambios que se pueden aplicar a la cuenta no se reflejan en el menú Publicar. Estos incluyen los cambios que se realizan en los siguientes elementos:
- Organizador de menús
- Cualquier cambio que apliques en el menú Personalizar (incluidos los cambios en el widget y el CSS personalizado)
- Cambios que se aplicaron al menú Ajustes
- Segmentos globales
Esto se debe a que cualquier cambio en tu cuenta que no esté relacionado con un elemento específico de WalkMe se aplicará a tu entorno cuando publiques contenido nuevo o existente. Esto significa que si has aplicado recientemente cambios a uno de los segmentos globales y después has publicado un Walk-Thru no relacionado, los cambios realizados en el segmento también se publicarán.
Para publicar los cambios que has realizado en el CSS, realiza una publicación de configuraciones.