Aplicar estilos Appcues con CSS personalizado
Guía de los selectores CSS que puedes usar para diseñar y personalizar tus experiencias Appcues .
Introducción a CSS personalizado
Esta es una guía sobre los selectores CSS dentro de los flujos y pasos Appcues . Si no está seguro de qué son los selectores CSS, consulte esta guía .
Escribir CSS personalizado es avanzado . Ofrecemos este material, pero es muy difícil ofrecer soporte. Asegúrate de que tú o alguien de tu equipo se sienta cómodo editando CSS antes de empezar.
Un consejo: asegúrate de previsualizar y probar cualquier tema que modifiques con CSS personalizado. Esto garantizará que las personalizaciones no causen problemas imprevistos con el contenido de Flow ni con la página subyacente.
Algunas notas más:
- No utilice etiquetas
bodyohtmlen el CSS personalizado, ya que puede provocar que su flujo se interrumpa o no se muestre cuando se haya publicado. - Asegúrese de probar la compatibilidad con varios navegadores cuando corresponda. Aunque realizamos nuestras propias pruebas, no podemos garantizar que el suyo funcione correctamente.
- Los selectores que se listan a continuación están sujetos a cambios en cualquier momento . Si bien son un buen punto de partida para compartirlos con su equipo, utilice el inspector del navegador para determinar cuáles son los selectores más recientes.
appcues de contenedores de flujo
Este elemento envuelve un flujo completo para los pasos modales y deslizables.
Barra de progreso .appcues-progress
Una barra de progreso CSS que se actualiza a medida que los usuarios completan cada paso.
Pasos appcues cue
Aquí se encuentra el contenido principal. Puedes asignar estilos según sea necesario.
Las flechas de los botones se configuran mediante el atributo de contenido CSS y caracteres Unicode. Puedes eliminarlas o editarlas modificando el CSS.
Fondo .appcues-backdrop
Este es el fondo que cubre la página durante un flujo con "luces apagadas".
Información sobre herramientas . tooltip .panel-content
Aquí es donde se encuentra el contenido de información sobre herramientas.
Encabezados de héroe appcues cue .apc-hero h1 y appcues cue .apc-hero h2
El encabezado (h1) y el subencabezado (h2) para el componente de encabezado Hero.
Ejemplo de CSS
/*
It's dangerous to go alone! Take this.
(Not actually dangerous, but hopefully these selectors
will help you make your Flows look beautiful!)
/|
/ |
/ |
/ |
/ |
/ |
\ |
/| \ |
/ | \ |
/ | \ |
/___| \_|
APPCUES CSS SELECTORS
*/
/************************************/
/* Appcues Base Presets */
/*** Remove next/previous arrows */
appcues .appcues-actions-right .appcues-button { padding-right: 18px; }
appcues .appcues-actions-right .appcues-button:after { content: none; }
appcues .appcues-actions-left .appcues-button { padding-left: 18px; }
appcues .appcues-actions-left .appcues-button:before { content: none; }
/*** Adjust style of progress bar */
appcues .appcues-progress { background-color: white; height: 7px; border: 0; }
appcues .appcues-progress .appcues-progress-bar { transition:width 0.5s ease 0.07s; }
appcues .appcues-progress .appcues-progress-bar:not([aria-valuenow='100']) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/*** Adjust margins & padding */
appcues cue { min-height: 100px !important; padding: 22px 54px 82px; }
appcues cue .apc-hero { margin: -22px -54px 0; }
/* Fix up Hero typography */
appcues cue .apc-hero h2 { font-size: 18px; font-weight: bold; }
appcues[data-pattern-type=modal] cue {
box-shadow: 0 0 18px rgba(0,0,0,0.25);
}
.tooltip .panel { padding: 9px 12px 10px; }
/*** Adjust typography */
appcues cue h1, .tooltip h1 { font-weight: 200; font-size: 32px; margin-top: 0.5em; -webkit-font-smoothing:antialiased; }
appcues cue h2, .tooltip h2 { font-weight: 400; font-size: 24px; margin-top: 0.5em; -webkit-font-smoothing:antialiased; }
appcues cue h3, .tooltip h3 { font-weight: 600; letter-spacing: -0.01em; font-size: 20px; -webkit-font-smoothing:antialiased; }
appcues cue h4,h5 { letter-spacing: -0.01em; margin-top: 0.75em; -webkit-font-smoothing:antialiased; }
p, li {
line-height: 1.6em;
}
/*** Adjust links in content */
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; /* a18y */
}
/*** Adjust skip X */
appcues .appcues-skip a { background: none; right: 6px; font-size: 28px; }
.tooltip .panel .appcues-skip { color: #ccc; }
/* End Appcues Base */
/************************************/
/*___Buttons and Links___*/
.appcues-actions-right {
/*[The section of the button row which hold the 'Next' or righthand side button.]*/
}
.tooltip .content .panel .panel-content-actions .appcues-actions-right {
/*[Full selector to edit .appcues-actions-right in Hotspots/Tooltips]*/
}
appcues cue .appcues-actions-right {
/*[Full selector to edit .appcues-actions-right in Modals/Slideouts]*/
}
.appcues-actions-left {
/*[The section of the button row which hold the 'Prev' or lefthand side button.]*/
}
.tooltip .content .panel .panel-content-actions .appcues-actions-left {
/*[Full selector to edit .appcues-actions-left in Hotspots/Tooltips]*/
}
appcues cue .appcues-actions-left {
/*[Full selector to edit .appcues-actions-left in Modals/Slideouts]*/
}
.appcues-button {
/*[Generic selector for any button.]*/
}
.appcues-button-success {
/*[Selector for the 'Next' buttons (buttons which advance the step of the Flow).]*/
}
.panel .panel-content-actions .appcues-actions-right > .appcues-button.appcues-button-success {
/*[Full selector to edit .appcues-button-success in Hotspots/Tooltips]*/
}
appcues cue .appcues-actions-right > .appcues-button.appcues-button-success {
/*[Full selector to edit .appcues-button-success in Modals/Slideouts]*/
}
.panel .panel-content-actions .appcues-skip {
/*[Full selector to edit .appcues-skip in Tooltips/Hotspots] (Hide these tips)*/
}
appcues .appcues-skip {
/*[Full selector to edit .appcues-skip in Modals/Slideouts] (X button to close)*/
}
appcues[data-pattern-type=shorty] cue {
/*[Selector for Slideouts specifically]*/
}
appcues[data-pattern-type=modal] cue {
/*[Selector for Modals specifically]*/
}
/*___Modals and Slideouts___*/
appcues {
/*[This element wraps the entire Modal or Slideout.]*/
}
appcues cue {
/*[This is where the main content for Modals and Slideouts lives.]*/
}
appcues .appcues-backdrop[data-pattern-type=modal] {
/*[The backdrop (darkened background) for Modals.]*/
}
appcues .appcues-progress {
/*[The progress bar which indicates how far a user is in the Flow]*/
}
appcues cue .apc-hero {
/*[This is the selector for a hero image.]*/
}
appcues cue .appcues-actions {
/*[The row where all the buttons are placed.]*/
}
/*___Hotspots and Tooltips___*/
.tooltip .content .panel {
/*[This is selector for the Tooltip panel itself. The styles to the arrow can be accessed using the ::before selector (see below)]*/
}
.tooltip .content .panel .panel-content {
/*[This is the selector for any content within the Tooltip. This applies to both body text and the actions row.]*/
}
.tooltip .content .panel .panel-content-actions {
/*[The specific container selection for the row with buttons/actions.]*/
}Para obtener información de estilo específica, consulte Personalizar puntos de acceso e información sobre herramientas y Personalizar elementos modales y deslizables .