---
title: CSS Personalizado
slug: docs/es/css-personalizado
description: Aprende cómo personalizar y dar estilo a los Spaces alojados y publicados usando CSS con este documento completo. Descubre cómo agregar CSS personalizado a tu Space, encuentra una lista de clases CSS para estilizar elementos y conoce las limitaciones en l
createdAt: 2021-01-28T13:38:24.000Z
---

Los Espacios alojados y publicados pueden personalizarse usando CSS.

Sus cambios de CSS solo se incluirán en su dominio personalizado. Cuando previsualice su Espacio publicado, no serán visibles, por lo que debe publicarlo en Producción.

::::WorkflowBlock
:::WorkflowBlockItem
Elija un espacio y haga clic en el ícono **Configuraciones** ( ⚙️ ) para abrir las** Configuraciones del Espacio**
:::

:::WorkflowBlockItem
Busque la pestaña **Filtros de Tareas: Tipo de Tarea: Personalizada Código** en la ventana de Configuraciones del Espacio
:::

:::WorkflowBlockItem
Vaya al campo **CSS personalizado** 
:::

:::WorkflowBlockItem
Escriba las etiquetas **HTML \<style>**.
:::

:::WorkflowBlockItem
**Guarde** sus cambios en el campo Custom CSS.
:::
::::

```css
<style>

 /* add the CSS clases and the properties you want to change */
 
</style>
```

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/2Y_i_udgWZFnHrvVD6fNb_custom-css-light.png "CSS personalizado")

:::hint{type="warning"}
Por razones de seguridad, el código personalizado solo se incluye en un dominio personalizado.
:::

En todo el DOM, encontrará elementos HTML con una clase CSS que empieza con `ab-`. Puede dirigirse a estas clases para diseñar el portal. **Estas clases están garantizadas para no cambiar nunca, de modo que no rompamos su estilo cuando actualizamos el sistema.**

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/Jx0_BnPB6o_t2ASi8Re3c_custom-code-class-light.png "ArchbeeDOM")

Si el elemento que intenta diseñar no tiene una clase que empiece con `ab-`, no permitimos personalización, y es principalmente para protegerlo. Por ejemplo, si cambiamos la estructura, podría afectar su estilo.

Cada elemento y bloque en la sección de contenido también tiene una clase similar. A continuación puede encontrar una lista de las clases. Si desea revisarlas, abra DevTools en su navegador haciendo clic derecho -> Inspect.

Esta es una lista de las **clases CSS disponibles:**&#x20;

:::BlockQuote
.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**

:::BlockQuote
.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**

:::BlockQuote
.ab-breadcrumb-item \{ }  *Cada etiqueta de breadcrumb*
.ab-breadcrumb-item-clickable \{ } *Breadcrumb que puede hacer clic para navegar*
.ab-breadcrumb-item-highlight \{ } *El breadcrumb activo/destacado actualmente*
.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 puede usarla para orientar los estilos en modo oscuro.

Por ejemplo, así es como cambia el texto a rojo en modo oscuro:

```css
<style>
    .dark .ab-paragraph {
         color: red !important ;  
    }
</style>
```