CSS personalizado

los spaces alojados y publicados se pueden personalizar usando css tus cambios de css solo se incluirán en tu dominio personalizado cuando vistas la vista previa de tu space publicado, no será visible, por lo que necesitas publicarlo en producción elige un space y haz clic en el ícono de configuración ( ⚙️ ) para abrir la configuración del space busca la pestaña código personalizado en la ventana de configuración del space ve al campo de css personalizado escribe las etiquetas html \<style> guarda tus cambios en el campo de css personalizado \<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 a lo largo del 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 estilo cuando actualicemos el sistema si el elemento que intentas estilizar no tiene una clase que comience con ab , no permitimos la personalización, y esto es principalmente para protegerte de ti mismo por ejemplo, si cambiamos la estructura, podría afectar tu estilo 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 las actuales clases css disponibles ab callout { } ab changeloc { } ab code editor { } ab minitasker { } ab graphiql { } ab horizontal divider { } ab jira { } ab map { } ab mermaid { } ab vertical split { } ab vertical split item { } ab video { } ab checklist { } ab blockquote { } ab diagram { } ab embed { } ab file { } ab iframe { } ab html { } ab image { } ab ul list { } ab ol list { } ab list item { } ab list item child { } ab table { } ab space { } ab collection { } ab space container { } ab collection container { } ab top navbar { } ab search input { } ab public search { } ab space content { } ab collection content { } ab tree navigation { } ab tree navigation link { } ab left nav chevron { } ab tree navigation link inactive { } ab space navigation { } ab doc name { } ab h1 { } ab h2 { } ab h3 { } ab expandable heading { } ab link { } ab link dynamic { } ab nav right { } ab nav right text { } ab bold { } ab code { } ab paragraph { } ab footer container { } ab search modal header { } ab search modal content { } ab auth jwt button { } ab auth saml button { } ab windy template { } ab color nav template { } ab booklet template { } openapi clases css ab openapi { } ab open api param name { } ab open api param expand icon { } ab open api param type { } ab open api param description wrap { } ab open api param example wrap { } ab open api param custom type { } ab open api required star { } ab open api param example title { } ab open api param example { } ab open api param description title { } ab open api param description { } ab open api input wrap { } ab open api array input wrap { } ab open api schema wrap { } clases de breadcrumbs ab breadcrumb item { } cada etiqueta de breadcrumb ab breadcrumb item clickable { } breadcrumb que se puede hacer clic para navegar ab breadcrumb item highlight { } el breadcrumb actualmente activo o resaltado ab breadcrumb separator { } el ícono de chevron entre breadcrumbs ab breadcrumbs wrapper { } el contenedor alrededor de toda la barra de breadcrumbs ab breadcrumb ellipsis { } el " " que se muestra cuando hay demasiados breadcrumbs el modo oscuro agrega una clase 'dark' en la parte superior del árbol html y puedes usarla para aplicar estilos de modo oscuro por ejemplo, así es como cambias el texto a rojo en modo oscuro \<style> dark ab paragraph { color red !important ; } \</style>