---
title: Custom CSS
slug: custom-css
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 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.

::::WorkflowBlock
:::WorkflowBlockItem
Elige un space y haz clic en el **Settings** (Configuración) ( ⚙️ ) para abrir los** Space Settings**
:::

:::WorkflowBlockItem
Busca la pestaña **Custom Code** en la ventana de Configuración del Space
:::

:::WorkflowBlockItem
Ve al campo **Custom CSS**
:::

:::WorkflowBlockItem
Escribe las etiquetas **HTML \<style>**
:::

:::WorkflowBlockItem
**Guarda** tus 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 "Custom CSS")

:::hint{type="warning"}
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.**

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

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 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 \{ }
:::

**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 \{ }
:::

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:

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