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.
Las hojas de estilo en cascada (CSS) te permiten aplicar una personalización avanzada a los ShoutOuts clásicos, incluidos elementos como la fuente, el fondo y el borde.
CSS se puede utilizar para personalizar ShoutOut:
Para obtener más información sobre el uso del nuevo Editor Visual para ShoutOuts sin la necesidad de CSS, lee la Guía de introducción a ShoutOuts.
Las hojas de estilo en cascada (CSS) son un lenguaje de hojas de estilo utilizado para describir el formato de un documento escrito en un lenguaje de marcado. Al escribir CSS, deberás referirte a los diferentes componentes (técnicamente conocidos como elementos) del ShoutOut clásico.
Al escribir en la ventana CSS Personalizada, WalkMe muestra las opciones de autocompletado para los selectores, propiedades y valores.
Cada ShoutOut incluye una serie de componentes (elementos) que se pueden personalizar con CSS.
Por ejemplo, puedes apuntar a la sección del título de un ShoutOut utilizando esta clase:
Consulta la lista completa de clases.
CSS se puede aplicar global o localmente. El uso de la consola CSS local facilita la personalización de un ShoutOut individual.
Si estás personalizando un solo ShoutOut a nivel global, debes introducir el ID de ShoutOut antes de la clase que identifica la sección de globos.
Ejemplo de CSS local:
Ejemplo de CSS global:
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.
Por ejemplo:
#wm-shoutout-XXXXX .wm-title {
color: #000 !important;
}
| DIV | Funciones editables | |
| 1 | .wm-outer-div | Este elemento es la cinta de ShoutOut. Podrás editar lo siguiente:
|
| 2 | .wm-ribbon | Este elemento es la cinta de ShoutOut. Podrás editar lo siguiente:
|
| 3 | .wm-title | Este elemento es el encabezado de ShoutOut. Podrás editar lo siguiente:
|
| 4 | .wm-template-text | Este elemento es el texto de ShoutOut. Podrás editar lo siguiente:
|
| 5 | .wm-blue-btn | Este elemento es el botón de acción. Podrás editar lo siguiente:
|
| 6 | .wm-close-link | Este elemento es el botón Cerrar. Podrás editar lo siguiente:
|
| 7 | .walkme-x-button | Este elemento es el botón "X". Podrás editar lo siguiente:
|
.wm-shoutout-XXXX.wm-outer-div {
width: XXXpx !important;
}
#wm-shoutout-XXXXX .wm-main-ribbon.wm-template-main-bg,
.wm-ribbon-edge.left.wm-template-main-bg, .wm-ribbon-edge.right.wm-template-main-bg {
background-color: #XXXXXX !important;
}
#wm-shoutout-XXXXX .wm-ribbon-triangle.left.top.wm-main-border-right-color, .wm-ribbon-ripple.left.wm-main-border-right-color {
border-color: transparent #XXXXXX transparent transparent !important;
}
#wm-shoutout-XXXXX .wm-main-border-bottom-color {
border-color: transparent transparent #XXXXXX !important;
}
#wm-shoutout-XXXXX .wm-ribbon-triangle.right.top.wm-main-border-top-color, .wm-ribbon-ripple.right.wm-main-border-top-color.wm-main-border-left-color {
border-color: #XXXXXX transparent transparent !important;
}
#wm-shoutout-XXXXX .wm-ribbon-triangle.right.bottom.wm-main-border-left-color {
border-color: transparent transparent transparent #XXXXXX !important;
}
#wm-shoutout-XXXXX .wm-trapezoid {
border-top: 40px solid #XXXXXX !important;
}
#wm-shoutout-XXXXX .wm-main-border-bottom-color {
border-color: transparent transparent #XXXXXX !important;
}
#wm-shoutout-XXXXX .wm-icon-square {
border-color: #XXXXXX !important;
}