CSS para ShoutOuts clásicos

Breve descripción general

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:

• Botones de acción y Cerrar
• Encabezado de texto y cinta de opciones
• Texto
• Botón "X"

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.

Cómo funciona

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.

Configuración de componentes de globos aerostáticos

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:

• .wm-title

Consulta la lista completa de clases.

CSS global frente a CSS local

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:

• .wm-title

Ejemplo de CSS global:

• #wm-shoutout-XXXXX .wm-title

Editar CSS local

1. Abre el menú Opciones de ShoutOut.
2. Ir a la pestaña Interacción
3. Haz clic en Editar CSS
4. Introduce el CSS personalizado en la Consola CSS
5. Haz clic en Guardar

Editar CSS global

1. Haz clic en Editar CSS global en el menú de ajustes del Editor de WalkMe
2. Introduce el CSS personalizado en el editor CSS
3. Haz clic en Guardar
4. Haz clic en Configuraciones de publicación

Encontrar ID de WalkMe

1. Pasa el cursor sobre el elemento en el editor
2. Haz clic en el menú Opciones
3. 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.

Por ejemplo:

#wm-shoutout-XXXXX .wm-title {

color: #000 !important;

}

Componentes configurables

Personalizaciones comunes de CSS

Modifica el ancho de un globo de ShoutOut.

.wm-shoutout-XXXX.wm-outer-div {
width: XXXpx !important;
}

Center ShoutOut Ribbon

#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;

}

Extremo izquierdo de la cinta de opciones de ShoutOut.

#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;
}

Extremo derecho de la cinta de ShoutOut

#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;

}

Plantilla Trapezoidal

#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;
}

Plantilla cuadrada

#wm-shoutout-XXXXX .wm-icon-square {
border-color: #XXXXXX !important;
}