Copie, pegue y edite los fragmentos a continuación para llevar sus flujos a otro nivel, pero no utilice etiquetas body o html en el componente HTML mientras crea sus flujos, ya que puede provocar que su flujo se rompa o no se muestre cuando se haya publicado.

Temas

Los siguientes fragmentos están formateados para usarse en la sección CSS del tema que aplicarás a tu flujo. Ve al tema que estés usando y, en la pestaña CSS, agrega el CSS necesario para aplicar estilo a tus flujos.

Tenga en cuenta que cualquier CSS añadido se aplica a todos los flujos en vivo que usan el tema. En algunos casos, recomendamos crear temas separados con un estilo específico para un uso rápido.

Bloques HTML

Si desea usar alguno de estos fragmentos para aplicar estilo a un paso específico (sin afectar a los demás), encierre cualquiera de los siguientes fragmentos en una etiqueta <style> y colóquelos en un componente HTML del paso que desee modificar. Por ejemplo:

<style> /* Insert snippet below for step level use =) */  
</style>

Selectores CSS de puntos de acceso y de información sobre herramientas

Cuadro de contenido

Puedes editar el contenido dentro de un Hotspot o Tooltip con esta clase:

. tooltip .contenido del panel

Ajuste del ancho

Puede ajustar el ancho predeterminado de los puntos de acceso y la información sobre herramientas para hacerlos más grandes o más pequeños utilizando el siguiente código.

.tooltip, .tooltip .panel {
    width:  400px;
    min-width: 400px;
    max-width: 400px;
}

Añadiendo bordes

 .panel {
    border:3px solid;
    border-color: #0C5DE9 !important; /* Select the color of your choice */
    padding: 10px;
}

.panel.panel-default {
    border-radius: 10px;
}

.panel .panel-content {
    padding: 0px;
}

.tooltip .content .panel:after {
    box-shadow: 0 0 0 3px #0C5DE9; /* should be same color as above */
}

Ajustar la opacidad

Si desea que la información sobre herramientas y los puntos de acceso sean transparentes, puede ajustar el valor de opacidad (en una escala de 0 a 1 en incrementos de 0,1).

/* Change the opacity of the rectangular part of Tooltips/Hotspots */
.tooltip .content .panel {
  opacity: .8;
}

/* Change the opacity of the Tooltip/Hotspot pointer */
.tooltip .content.content-bottom .panel:before, .tooltip .content.content-bottom .panel:after {
  opacity: .9;
  box-shadow: none;
}

Ajustar “Ocultar estos consejos”

Puede modificar la fuente que permite a los usuarios descartar una información sobre herramientas agregando el siguiente fragmento a la sección Temas en su panel de control.

 .tooltip .panel .appcues-skip {
    color: green;
}

Cambiar el idioma de "Ocultar estos consejos" a nivel de tema

Puedes modificar el texto de "Ocultar estas sugerencias" en cada información emergente/punto de acceso simplemente haciendo clic en el texto y editándolo. Sin embargo, si quieres cambiarlo a nivel de tema para que se aplique a todas tus descripciones emergentes, por ejemplo, para cambiar el idioma, usa el siguiente CSS. Coloca el texto que quieres ver en el paso junto a "contenido".

.panel .panel-content-actions .appcues-skip {
    font-size: 0;
}
.panel .panel-content-actions .appcues-skip:before {
    content: "× Cacher l'aide"; /* Add text wrapped in quotation marks */
    font-size: 11px;
}

Modificar el cierre 'x'

Puedes modificar el color de la "x" de cierre para que contraste mejor con tu aplicación. Puedes modificar el color a continuación. ¡Los códigos hexadecimales también funcionan bien!

.exit-tooltip-container .exit-tooltip{
    color: orange;
    opacity: 1;
}

Consejo de accesibilidad: Puedes comprobar el contraste de tu botón con Chrome DevTools. Para ello, abre tu flujo en el Generador Appcues , abre Chrome DevTools (Menú → Más herramientas → Herramientas para desarrolladores), haz clic en el icono Inspeccionar en la esquina superior izquierda de DevTools y mueve el cursor sobre la "x" de Cerrar. Los requisitos de accesibilidad sugieren un contraste de al menos 4,5.

Estilo de información sobre herramientas Puntero/Flecha

/* Change the color of the pointer */
.tooltip .content .panel:before, .tooltip .content .panel:after {
 z-index: -5;
background-color: #FC8C036;
}

/* Adjust size and position of the pointer */
.tooltip .content .panel:before, .tooltip .content .panel:after {
 z-index: -5;
width: 22px;
height: 22px;
margin-top: -10px !important;
left: 32px !important;
}

CSS personalizado del lado del cliente

Personalización de la baliza de punto de acceso

Aunque nos encantaría que la baliza de punto de acceso estuviera disponible como una configuración personalizable en la interfaz Appcues , actualmente no está disponible. Sin embargo, si te comprometes, puedes modificar el estilo de la baliza de punto de acceso usando CSS en el código de tu aplicación. A continuación, se muestra un ejemplo de cómo hacerlo.

/* Hide the original Appcues beacon */
appcues-layer svg.beacon {
  display: none;
}

/* Replace it with styles on the .beacon-container */
appcues-layer .beacon-container {
  background: orangered; /* Or your background image here, such as "url(http://yourdomain.com/path/to/your/image.png);" */
  border-radius: 24px;
  display: block;
  height: 24px;
  width: 24px;
  cursor: pointer;
}

/* Define a hover style */
.beacon-container:hover {
  background: dodgerblue;
}

Más magia CSS 🪄

.tooltip .content .panel:before, .tooltip .content .panel:after {
	display: none;
}

.tooltip .panel {
  background-image: url("https://cdn.pixabay.com/photo/2020/04/18/01/04/cityscape-5057263_1280.png");
  background-size: 100%;
  background-position-y: 33%;
  background-repeat: no-repeat;
}

Información sobre herramientas de dos columnas

El siguiente código le permite cambiar el tamaño de la columna izquierda de una información sobre herramientas.

.panel div.row > div:first-child {
   width: 33%;
   flex: none !important;
}