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 interrumpa 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 específicos de patrones

Si desea cambiar el estilo solo de los patrones modales o deslizables sin modificar los demás patrones, puede seleccionar cada patrón específicamente para modificar sus estilos. appcues[data-pattern-type= modal ] selecciona solo los patrones modales, mientras que appcues[data-pattern-type=shorty] selecciona los deslizables. Puede agregar reglas de estilo para aplicarlas solo a los deslizables o modales.

Modales

El siguiente selector le permitirá realizar cambios de estilo en el elemento externo de un modal .

appcues[data-pattern-type=modal] cue {
	/* Add styling here */
} 

Ajuste del ancho

Los modales tienen un ancho predeterminado de 650 px. Puedes ajustar el ancho predeterminado de los modales para hacerlos más grandes o más pequeños usando el siguiente código.

Tenga en cuenta que existe un límite de tamaño para los modales. Para evitarlo, cambie también el "ancho mínimo" al tamaño deseado, como se muestra a continuación.

/* To make a modal slightly wider */
appcues[data-pattern-type=modal] cue, appcues[data-pattern-type=modal] > div {
    width: 720px;
    min-width: 720px;
}

/* To make modals slightly narrower */
appcues[data-pattern-type=modal] cue, appcues[data-pattern-type=modal] > div {
    width: 580px;
    min-width: 580px;
}

Ajuste de la altura

A veces, se desea una altura uniforme para todos los modales o pasos modales. Para lograrlo, utilice lo siguiente.

appcues[data-pattern-type=modal] cue {
    height: 420px;
    min-height: 420px;
}

Si desea que la altura del contenedor sea menor que el contenido, deberá asegurarse de que el Modal esté configurado para agregar automáticamente una barra de desplazamiento si es necesario.

appcues[data-pattern-type=modal] cue {
    overflow-y: auto;
    height: 480px;
    min-height: 0px;
}

Toboganes

Ajustar el ancho

/* To make slideouts slightly wider */
appcues[data-pattern-type=shorty] modal-container, cue {
    width: 800px;
    min-width: 800px;
}

/* To make slideouts slightly narrower */
appcues[data-pattern-type=shorty] modal-container, cue {
    width: 580px;
    min-width: 580px;
}

Ajustar la altura

appcues[data-pattern-type=shorty] cue {
    height: 480px;
    min-height: 0px;
}

Si desea que la altura del contenedor sea menor que el contenido, deberá asegurarse de que el control deslizante esté configurado para agregar automáticamente una barra de desplazamiento si es necesario.

appcues[data-pattern-type=shorty] cue {
    overflow-y: auto;
    height: 480px;
    min-height: 0px;
}

Selectores generales

Enlaces de estilo

Puedes diseñar enlaces dentro de tus elementos modales y deslizables únicamente…

/* Adjust links within Modal/Slideout
appcues cue section a[data-step], appcues cue section a[href]{
	color: #3388ee; /* Choose your link color here */
}

/* Adjust styling when hovering over link */
appcues cue section a[data-step]:hover, appcues cue section a[href]:hover {
	color: #1166cc; 
    text-decoration: underline; /* Adds underline to link on hover */ */
} 

…o puedes cambiar el estilo de enlace para todos tus patrones (modales, deslizables, información sobre herramientas, puntos de acceso) a la vez.

appcues cue section a[data-step], appcues cue section a[href], .tooltip p a[data-step], .tooltip p a[href] {
    color: #3388ee; 
}
appcues cue section a[data-step]:hover, appcues cue section a[href]:hover, .tooltip p a[data-step]:hover, .tooltip p a[href]:hover {
    color: #1166cc; 
    text-decoration: underline;
}

Dar estilo a la barra de progreso

appcues .appcues-progress-bar {
background-color: #CA16D6; /* change fill color of the progress bar */
}

Entrada de texto del formulario

 /* Change the color of the small input text */
appcues cue .form-field-text input { color: #CA16D6 !important; }

/* Change the color of the large input text */
appcues cue .form-field-textarea textarea { color: #CA16D6 !important; }

Etiquetas de formulario

/* Make form label font size bigger */
appcues cue > section .step-action-form label.label-display, appcues cue > section .form-field label.label-display {
font-size: 20px;
}

Calificaciones y botones de opción

De forma predeterminada, la opción de calificación comienza en 0 y aumenta.
Para encuestas y formularios, es común querer que las opciones seleccionables comiencen en 1 y aumenten a partir de allí.
Para cambiar a este estilo puedes agregar el siguiente CSS al tema que estás usando.

.rating-options .rating-option:first-of-type {
display:none;
}

Para dar estilo a las calificaciones:

 /* Rating span */
appcues cue > section .form-field .rating-option span {
	background-color: blue;
	border: 1px solid #777;
}
/* Rating span hover */
appcues cue > section .form-field .rating-option span:hover {
	background-color: orange;
	border: 1px solid #777;
}

  /* Rating span after selected */
appcues cue > section .form-field .rating-option input[type=radio]:checked + span {
	background-color: orange;
	border: 1px solid #777;
}

  /* Rating selection text */
appcues cue > section .form-field .rating-option span {
	font-size: 30px !important;
	color: green !important;
}

 /* Rating helper text right */
appcues cue > section .form-field .rating-labels .right small {
	font-size: 18px;
}

  /* Rating helper text left */
appcues cue > section .form-field .rating-labels .left small {
	font-size: 18px;
}

Para cambiar el color de los botones de selección de radio:

/*Change radio select input color*/
appcues cue>section .form-field label.field-option input[type=radio]:checked+span:before {
	background-color: green;
}

Selección múltiple

Casillas de verificación de selección múltiple:

/*Unselected checkbox*/
appcues cue > section .form-field label.field-option input[type=checkbox] + span::before{
  background-color: white;
}

/*Selected checkbox*/
appcues cue > section .form-field label.field-option input[type=checkbox]:checked + span::before { 
  background-color: blue;
}

Etiquetas de opciones de selección múltiple:

/*Unselected option label*/
appcues cue > section .form-field label.field-option input[type=checkbox] + span{
  color: grey;
}

/*Selected option label */
appcues cue > section .form-field label.field-option input[type=checkbox]:checked + span{
  color: black;
}

Cambiar el estilo del Skip X

Si selecciona "Omitible" en el Editor de Flujo, aparecerá una X de Omisión en la esquina superior derecha. Puede ajustar el estilo de la X de Omisión para que contraste mejor con su aplicación con:

/* This will remove the background and change the color of the X */
appcues .appcues-skip > a {
    background: none;
    right: 6px; /* Change the placement of the X */
    font-size: 28px;
    color: #cccccc; /* A medium gray -- update as needed */
    opacity: 0.5;
}

appcues .appcues-skip > a:hover {
    /* Make non-transparent when mouse is over */
    opacity: 1;
}

Consejo de accesibilidad : Puedes comprobar la relación de contraste de tu salto X 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 cierre. Los requisitos de accesibilidad sugieren un contraste de al menos 4,5.

Más trucos CSS 🪄

appcues[data-pattern-type=modal] {
   display: flex; 
   flex-direction: column; 
   align-items: center; 
   justify-content: center;
}

Modal: Modal redondeado

Nota: Esto SOLO funciona con elementos modales. Este CSS no tendrá el mismo efecto con los patrones deslizables.

/* Note: make sure to unselect Show progress bar in step settings or hide the progress bar in your Theme CSS first. */
appcues cue .apc-hero {
   border-top-left-radius: 18px; /* If you're using a hero, adjust these numbers*/
   border-top-right-radius: 18px;
}
appcues cue {
   border-radius: 18px; /* This is the roundness of the borders */
}
modal.container-fullscreen, modal.container, .appcues-progress, .appcues-skip, .active {
   box-shadow: none;
}
.appcues-skip > a { /* This section affects your 'skippable' button in the top-right if it appears */
   border-top-right-radius: 18px; /* Match your chosen radius here */
}

Puedes elegir "Redondo" para la redondez del botón en tu tema para que coincida.

appcues cue, appcues .appcues-progress { 
border-radius: 0;
}

/* To make modal width of the screen */
appcues[data-pattern-type=modal] cue, appcues[data-pattern-type=modal] > div {
    width: 100vw;
    min-width: 100vw;
}

 /* To make modal height of the screen */
appcues[data-pattern-type=modal] cue {
    height: 100vh;
    min-height: 100vh; 
}

/* Remove padding from modal container */
appcues[data-pattern-type=modal] {
    padding: 0 !important;
}

Modal: encabezado fijo y contenido desplazable

Para crear un encabezado que permanezca en la parte superior de un modal con contenido desplazable, necesitará utilizar el bloque HTML personalizado y una combinación de HTML y CSS.

Primero, agregue un bloque de texto al modal para crear su encabezado.

Luego, debajo del encabezado, inserte un bloque HTML.

Dentro del bloque HTML, necesitarás una sección para el estilo y un div que envuelva el contenido. En la sección <style> , deberás establecer la altura del contenedor de desplazamiento y configurar "overflow-y" como "scroll" para crear barras de desplazamiento.

Puede colocar el contenido desplazable dentro de la sección <div></div> .

<style>
#scroll-container {
	height: 400px !important; /* Set Height */
	overflow-y: scroll; /* Set Overflow-y to scroll */
}
</style>

<div id="scroll-container">
/* Add lots of content here! */
</div>

Después, tu Modal debería verse así:

appcues cue {
    height: 100%;
    width: 100%;
    background-image: url(/*add image URL*/);
    background-size: cover;
    background-position: center;
}

appcues[data-pattern-type=modal] cue {
    height: 100%;
    width: 100%;
    background-image: url(/*add image URL*/);
    background-size: cover;
    background-position: center;
}

appcues[data-pattern-type=shorty] cue {
    height: 100%;
    width: 100%;
    background-image: url(/*add image URL*/);
    background-size: cover;
    background-position: center;
}

Modal: Desenfocar fondo

appcues[data-pattern-type=modal] {
  backdrop-filter: blur(5px);
}

Modal: Agregar animación de transición

appcues[data-pattern-type='modal'] { 
	transition: opacity 0.5s, transform 0.5s: 
} 
	
appcues[data-pattern-type='modal'].apc-hidden { 
	transform: scale(0.2) rotate(-825deg); 
}

Modal: Añadiendo confeti

¡Puedes agregar confeti a tus Modales y Deslizantes (actualizando el tipo de patrón de datos a shorty desde modals ) con los siguientes estilos!

<style>
.appcues-backdrop[data-pattern-type="modal"] {
  opacity: 0.8 !important;
}
.appcues-backdrop::before,
.appcues-backdrop::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background-repeat: repeat;
}
.appcues-backdrop::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%20viewBox='0%200%20200%20200'%3E%3Ccircle%20cx='30'%20cy='30'%20r='5'%20fill='%23FC96DF'/%3E%3Ccircle%20cx='170'%20cy='40'%20r='3'%20fill='%23B0F2F4'/%3E%3Ccircle%20cx='100'%20cy='180'%20r='6'%20fill='%239D8FFF'/%3E%3Crect%20x='80'%20y='20'%20width='12'%20height='4'%20fill='%23FC96DF'%20transform='rotate(15%2086%2022)'/%3E%3Crect%20x='20'%20y='150'%20width='8'%20height='3'%20fill='%23B0F2F4'%20transform='rotate(-10%2024%20151.5)'/%3E%3Cpolygon%20points='150,150%20155,160%20145,160'%20fill='%239D8FFF'/%3E%3Cpath%20d='M50,100%20Q55,95,60,100%20T70,100%20L70,105%20Q65,110,60,105%20T50,105%20Z'%20fill='%23B0F2F4'/%3E%3C/svg%3E");
  animation: confetti-fall 5s linear infinite;
  opacity: 0.9;
}
.appcues-backdrop::after {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%20viewBox='0%200%20200%20200'%3E%3Ccircle%20cx='50'%20cy='50'%20r='3'%20fill='%23B0F2F4'/%3E%3Ccircle%20cx='130'%20cy='70'%20r='2'%20fill='%239D8FFF'/%3E%3Crect%20x='100'%20y='30'%20width='8'%20height='3'%20fill='%239D8FFF'%20transform='rotate(10%20104%2031.5)'/%3E%3Cpolygon%20points='60,160%2063,165%2057,165'%20fill='%23FC96DF'/%3E%3Cpath%20d='M120,120%20Q125,115,130,120%20T140,120%20L140,123%20Q135,128,130,123%20T120,123%20Z'%20fill='%23FC96DF'/%3E%3C/svg%3E");
  animation: confetti-fall 7s linear infinite;
  opacity: 0.8;
}
@keyframes confetti-fall {
  0% {
    background-position: 0 -200px;
  }
  100% {
    background-position: 0 200px;
  }
}
</style>