---
title: Benutzerdefiniertes CSS
slug: docs/de/benutzerdefiniertes-css
description: Erfahren Sie in diesem umfassenden Dokument, wie Sie gehostete und veröffentlichte Spaces mit CSS anpassen und gestalten können. Finden Sie heraus, wie Sie benutzerdefiniertes CSS zu Ihrem Space hinzufügen, entdecken Sie eine Liste von CSS‑Klassen zum Ges
createdAt: 2021-01-28T13:38:24.000Z
---

Gehostete und veröffentlichte Spaces können mithilfe von CSS angepasst werden.

Ihre CSS-Änderungen werden nur auf Ihrer benutzerdefinierten Domain angewendet. Wenn Sie Ihren veröffentlichten Space in der Vorschau anzeigen, sind sie nicht sichtbar, daher müssen Sie ihn in die Production veröffentlichen.

::::WorkflowBlock
:::WorkflowBlockItem
Wählen Sie einen Space und klicken Sie auf das **Einstellungen** Symbol ( ⚙️ ), um die** Bereichseinstellungen**
:::

:::WorkflowBlockItem
Suchen Sie im Fenster Space Settings nach dem Reiter **Benutzerdefinierter Code**.
:::

:::WorkflowBlockItem
Gehen Sie zum Feld **Benutzerdefiniertes CSS**.
:::

:::WorkflowBlockItem
Geben Sie die **HTML \<style>** Tags ein
:::

:::WorkflowBlockItem
**Speichern** Sie Ihre Änderungen im Custom CSS Feld.
:::
::::

```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"}
Aus Sicherheitsgründen wird benutzerdefinierter Code nur auf einer benutzerdefinierten Domain einbezogen.
:::

Im gesamten DOM finden Sie HTML-Elemente mit einer CSS-Klasse, die mit `ab-` beginnt. Sie können diese Klassen anvisieren, um das Portal zu gestalten. **Diese Klassen werden garantiert niemals geändert, damit Ihre Anpassungen bei Systemaktualisierungen nicht brechen.**

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

Wenn das Element, das Sie gestalten möchten, keine mit `ab-` beginnende Klasse hat, erlauben wir keine Anpassung. Dies dient überwiegend Ihrem eigenen Schutz. Wenn wir zum Beispiel die Struktur ändern, könnte dies Ihre Gestaltung beeinträchtigen.

Jedes Element und jeder Block im Inhaltsbereich hat ebenfalls eine ähnliche Klasse. Unten finden Sie eine Liste dieser Klassen. Wenn Sie sie prüfen möchten, öffnen Sie die DevTools in Ihrem Browser per Rechtsklick → Inspect.

Dies ist eine Liste der aktuell **verfügbaren CSS-Klassen:**&#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** **CSS-Klassen**

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

**BreadCrumbs Klassen**

:::BlockQuote
.ab-breadcrumb-item \{ }  *Jedes Breadcrumb-Label*
.ab-breadcrumb-item-clickable \{ } *Breadcrumb, das zum Navigieren anklickbar ist*
.ab-breadcrumb-item-highlight \{ } *Das aktuell aktive/hervorgehobene Breadcrumb*
.ab-breadcrumb-separator \{ } *Das Chevron-Symbol zwischen Breadcrumbs*
.ab-breadcrumbs-wrapper \{ }	*Der Container um die gesamte Breadcrumb-Leiste*
.ab-breadcrumb-ellipsis \{ }	*Das "..." bei zu vielen Breadcrumbs*
:::



Der Dark Mode fügt eine Dark-Klasse an der Spitze des HTML-Baums hinzu, und Sie können diese verwenden, um Dark-Mode-Stile zuzuweisen.

Zum Beispiel können Sie so den Text im Dark Mode auf Rot ändern:

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