Custom CSS
Los Spaces alojados y publicados pueden personalizarse usando CSS.
Tus cambios de CSS solo se incluirán en tu dominio personalizado. Cuando visualices tu Space publicado, no serán visibles, por lo que necesitas publicarlo en Producción.
Elige un space y haz clic en el Settings (Configuración) ( ⚙️ ) para abrir los Space Settings
Busca la pestaña Custom Code en la ventana de Configuración del Space
Ve al campo Custom CSS
Escribe las etiquetas HTML <style>
Guarda tus cambios en el campo Custom CSS.
<style>
/* add the CSS clases and the properties you want to change */
</style>
Por razones de seguridad, el código personalizado solo se incluye en un dominio personalizado.
En todo el DOM, encontrarás elementos HTML con una clase CSS que comienza con ab-. Puedes dirigirte a estas clases para diseñar el portal. Estas clases están garantizadas a no cambiar nunca para que no rompamos tu diseño cuando actualicemos el sistema.
Si el elemento que intentas estilizar no tiene una clase que comience con ab-, no permitimos la personalización, y es principalmente para protegerte de ti mismo. Por ejemplo, si cambiamos la estructura, podría afectar tu diseño.
Cada elemento y bloque en la sección de contenido también tiene una clase similar. A continuación puedes encontrar una lista de las clases. Si deseas revisarlas, abre las DevTools en tu navegador haciendo clic derecho -> Inspeccionar.
Esta es una lista de lasclases CSS disponibles:
OpenAPI clases CSS
El modo oscuro añade una clase dark en la parte superior del árbol HTML, y puedes usarla para aplicar estilos específicos para el modo oscuro.
Por ejemplo, así es como cambias el texto a rojo en modo oscuro:
<style>
.dark .ab-paragraph {
color: red !important ;
}
</style>