---
title: CSS personnalisé
slug: docs/fr/css-personnalise
description: Apprenez comment personnaliser et styliser les espaces hébergés et publiés à l’aide de CSS grâce à ce document complet. Découvrez comment ajouter du CSS personnalisé à votre espace, trouvez une liste de classes CSS pour styliser les éléments et informez-v
createdAt: 2021-01-28T13:38:24.000Z
---

Les Spaces hébergés et publiés peuvent être personnalisés à l’aide de CSS.

Vos modifications CSS ne seront incluses que sur votre domaine personnalisé. Lorsque vous prévisualisez votre Space publié, elles ne seront pas visibles, vous devez donc le publier en Production.

::::WorkflowBlock
:::WorkflowBlockItem
Choisissez un space et cliquez sur l’icône **Paramètres** ( ⚙️ ) pour ouvrir les** Paramètres de l'espace**
:::

:::WorkflowBlockItem
Recherchez l’onglet **Code personnalisé** dans la fenêtre Space Settings
:::

:::WorkflowBlockItem
Accédez au champ **CSS personnalisé**
:::

:::WorkflowBlockItem
Saisissez les balises **HTML \<style>**
:::

:::WorkflowBlockItem
**Enregistrez** vos modifications dans le champ 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"}
Pour des raisons de sécurité, le code personnalisé n’est inclus que sur un domaine personnalisé.
:::

Dans le DOM, vous trouverez des éléments HTML avec une classe CSS commençant par `ab-`. Vous pouvez cibler ces classes pour styliser le portail. **Ces classes sont garanties comme ne changeant jamais afin que nous ne cassions pas votre style lorsque nous mettons le système à jour.**

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

Si l’élément que vous tentez de styliser n’a pas une classe commençant par `ab-`, nous n’autorisons pas la personnalisation, principalement pour vous protéger. Par exemple, si nous modifions la structure, cela pourrait affecter votre style.

Chaque élément et bloc dans la section de contenu possède également une classe similaire. Vous trouverez ci-dessous une liste de ces classes. Si vous souhaitez les vérifier, veuillez ouvrir DevTools dans votre navigateur en cliquant avec le bouton droit -> Inspect.

Voici une liste des **classes 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** **Classes 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 \{ }
:::

**Classes BreadCrumbs**

:::BlockQuote
.ab-breadcrumb-item \{ }  *Chaque étiquette de fil d’Ariane*
.ab-breadcrumb-item-clickable \{ } *Fil d’Ariane cliquable pour naviguer*
.ab-breadcrumb-item-highlight \{ } *Le fil d’Ariane actif/en surbrillance*
.ab-breadcrumb-separator \{ } *L’icône en chevron entre les fils d’Ariane*
.ab-breadcrumbs-wrapper \{ }	*Le conteneur autour de toute la barre de fil d’Ariane*
.ab-breadcrumb-ellipsis \{ }	*Le "..." affiché lorsqu’il y a trop de fils d’Ariane*
:::



Le mode sombre ajoute une classe dark en haut de l’arborescence HTML, que vous pouvez utiliser pour cibler des styles en mode sombre.

Par exemple, voici comment changer le texte en rouge en mode sombre :

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