---
title: "CSS für Tooltip Anpassung verwenden"
slug: "configure-tooltips-with-css-customization"
updated: 2026-05-07T00:34:37Z
published: 2026-05-29T04:29:31Z
canonical: "support.whatfix.com/configure-tooltips-with-css-customization"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.whatfix.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS für Tooltip Anpassung verwenden

> [!WARNING]
> Note:
> 
> Die CSS-Anpassung für Tooltips ist eine Beta-Funktion. Kontaktieren Sie [support@whatfix.com](mailto:support@whatfix.com?subject=Enable%20CSS%20customization%20for%20tooltips&body=Hi%20Team%2C%0A%0ACould%20you%20please%20enable%20CSS%20customization%20for%20tooltips%20for%20the%20following%20ENT%20ID%3A%0A%0AThanks) um sie zu aktivieren.

Die CSS-Anpassungsfunktion für Tooltips ermöglicht Ihnen die vollständige Kontrolle über das Design der Tooltips für eine bessere Benutzererfahrung. Verwenden Sie die CSS-Codeansicht, um detaillierte visuelle Anpassungen vorzunehmen, die mit den UI-Optionen nicht möglich sind. Die CSS-Code-Ansicht ist für die Tooltips von Flows, Smart-Tips und Beacons verfügbar, die Sie auswählen.

> [!WARNING]
> Note:
> 
> - Die CSS-Codeansicht kann nicht gelöscht werden.
> - Bevor Sie eine Tooltip anpassen, sollten Sie eine Sicherungskopie des Codes erstellen, um einen unerwarteten Verlust zu vermeiden.
> - Bei Inhalten und Widgets, die sich bereits in der Veröffentlichungsphase befinden, stellen Sie sicher, dass Sie Push to Production durchführen, damit die CSS-Änderungen übernommen werden.
> - Whatfix ermöglicht es Account Managern und Content Manager, mit CSS angepasste Tooltips zu erstellen. Weitere Informationen zu Benutzerrollen finden Sie unter [Whatfix User Roles](/studio/docs/de/whatfix-user-roles).

****Zugriff auf die CSS Code Ansicht der Tooltips****

Gehen Sie wie folgt vor, um auf die CSS-Ansicht der Tooltips zuzugreifen:

1. Auf dem Whatfix Guidance Dashboard, klicken Sie **Stil**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left nav_style.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)
2. Klicken Sie **Templates**. ![Dashboard_Style-Templates.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Style-Templates.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)
3. Klicken Sie **Default**.

![Dashboard_CSS_defaultview.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_CSS_defaultview.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)
4. Gehen Sie zu der Tooltip, die Sie kopieren und benutzerdefiniert gestalten möchten, und klicken Sie dann auf das Symbol **Template kopieren**. ![Dashboard_Templates-default.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Templates-default.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)
5. Gehen Sie zum Abschnitt **Benutzerdefiniert**, um die kopierte Vorlage anzuzeigen. ![Dashboard_Templates-Customized.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Templates-Customized.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)
6. Klicken Sie in der kopierten Vorlage auf das Symbol **Vorlage bearbeiten**. ![Dashboard_Edit-templates.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Edit-templates.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)
7. Bearbeiten Sie unter **CSS** den Code entsprechend Ihrem Anwendungsfall. ![Dashboard_Style_CSS.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Style_CSS.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)
8. Sobald Sie den Code geändert haben, klicken Sie auf **Run**, um eine Vorschau der Änderungen anzuzeigen. ![Dashboard_CSS_Run.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_CSS_Run.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)

> [!WARNING]
> Note:
> 
> - Wenn Sie auf **Zurücksetzen** klicken, werden alle CSS Änderungen verworfen, und der Code wird auf den zuletzt gespeicherten Zustand zurückgesetzt.
> - Die Vorlagen, die Sie für Ihr Konto erstellen, stehen allen Benutzern zur Verfügung, die dasselbe Konto verwenden.

1. Klicken Sie **Speichern**.

![Dashboard_CSS_Save.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_CSS_Save.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)

****Der Breite der Tooltip anpassen****

![Dashboard_tooltip_width_before and after.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_tooltip_width_before%20and%20after.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)

Um die Größe des Tooltips zu ändern, suchen Sie unter der Klasse .wrapper-container nach min-width und max-width und geben Sie die gewünschte Breite ein.

![Dashboard_CSS-tooltip-width.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_CSS-tooltip-width.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)

Der folgende CSS-Code setzt zum Beispiel die minimale Breite des Tooltips von 220px auf 150px und die maximale Breite von 345px auf 300 px.

```css
min-width: 150px;
max-width: 300px;
```

****Der Hintergrundfarbe der Tooltip ändern****

![Dashboard_CSS_tooltip_BGcolor.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_CSS_tooltip_BGcolor.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)

Um die Hintergrundfarbe der Tooltip zu ändern, suchen Sie unter der Klasse .wrapper-container nach --tip-body-bg-color und geben Sie einen Farbcode ein.

![Dashboard_style-CSS-BG.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_style-CSS-BG.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)

Der folgende CSS-Code setzt zum Beispiel die Hintergrundfarbe der Tooltip von Dunkelblau (#19265d) auf Hellorange (#FFA450).

```css
--tip-body-bg-color: #FFA450;
```

****Die Farbe der Buttons (Weiter- oder Zurück-Button) ändern****

![Dashboard_tooltip_buttonNGcolor_Before&After.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_tooltip_buttonNGcolor_Before&After.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)

Um die Hintergrund und Textfarbe dem Button Next zu ändern, suchen Sie tip-next-bg-color und tip-next-color unter der Klasse .wrapper-container und geben Sie die gewünschten Farbcodes ein.

![Dashboard_style-CSS-tooltip_buttontext.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_style-CSS-tooltip_buttontext.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)

Die folgenden CSS-Codes setzen zum Beispiel die Hintergrundfarbe des Buttons von Weiß (#FFFFFF) auf Hellorange (#e77f3b) und die Textfarbe des Buttons von Dunkelblau (#19265d) auf Hellblau (#3451d2)ein.

```css
 --tip-next-bg-color: #e77f3b;
 --tip-next-color: #3451d2;
```

> [!WARNING]
> Note:
> 
> 
> 
> Um den Button-Text und die Hintergrundfarbe für den **Back-Button** zu ändern, finden Sie --tip-back-bg-color und --tip-back-text-color unter der gleichen .wrapper-container-Klasse. Ersetzen Sie die Standardvariablen durch die Farbcodes, die Sie für den Button **Zurück** verwenden möchten.
> 
> 
> 
> ![Dashboard_tooltip_Backbutton_color.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_tooltip_Backbutton_color.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)

****Die Höhe und Breite des Buttons anpassen (Next oder Back Button); Sie auch das Padding zwischen Button und Pfeil anpassen****

![Dashbopard_tooltip_button_PaddingWidthheight_Before&After.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashbopard_tooltip_button_PaddingWidthheight_Before&After.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)

Um die Höhe, Breite und Auffüllung des **Next-** oder **Back-Buttons** anzupassen, suchen Sie in der CSS-Codeansicht unter der Klasse .next-button-icon oder .back-button-icon die Höhe, Breite und Auffüllung links oder rechts.

![Dashboard_CSS-tooltip-buttons.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_CSS-tooltip-buttons.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)

Mit dem folgenden CSS-Code können Sie zum Beispiel die Position des **Next-** oder **Back-Buttons** in Ihrer Tooltip anpassen.

```css
height: 30px;
width: 20px;
padding-left: 10px;
```

Außerdem können Sie die Breite der Pfeile neben den Buttons anpassen. Suchen Sie in der Codeansicht unter der Klasse .next-button-icon oder .back-button-icon nach stroke-width, um diese Änderung vorzunehmen.

Mit dem folgenden CSS-Code können Sie beispielsweise die Strichstärke für den Button **Next** oder **Zurück** auf 6 Pixel einstellen.

```css
stroke-width: 6px;
```

****Des Schatteneffekts auf dem Hintergrund des Tooltips einstellen****

![Dashboard_tooltip_BGshadow_Before&After.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_tooltip_BGshadow_Before&After.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)

Um den Schatten des Tooltip-Hintergrunds anzupassen, suchen Sie die Klasse .tooltip-widget-with-shadow und ändern Sie den Kastenschatten.

![Dashboard_CSS_toolips-shadow.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_CSS_tooltips-shadow.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)

Der folgende Code setzt zum Beispiel den Schatteneffekt von 50 auf 200 Pixel.

```css
.tooltip-widget-with-shadow {
  box-shadow: 0 0 200px rgba(0, 0, 0, 0.6);
}
```

> [!WARNING]
> Note:
> 
> Dies sind nur einige Beispiele für Tooltip-Anpassungen mittels CSS-Code-Ansicht auf globaler Ebene. Erstellen Sie eine größere Anzahl von angepassten Vorlagen, die auf Ihren Anwendungsfällen basieren.

****Angepasst CSS-Tooltips auf dem Whatfix Dashboard verwenden****

Sobald Sie die gewünschten Tooltips mithilfe der CSS-Anpassung erstellt haben, sind sie auf dem Dashboard sichtbar, damit Sie sie verwenden können. Alle angepassten Tooltips werden zu Standardvorlagen für Flows, Beacons und Smart-Tips. Außerdem bleiben alle Vorlagen auf Ihrem Dashboard für die nächste Verwendung erhalten.

1. Gehen Sie im Whatfix Dashboard auf **Stil** und klicken Sie entweder auf **Flows**, **Beacons** oder **Smart Tips**, je nachdem, welchen Tooltip Sie erstellen möchten.

![Dashboard_Style_Flows_Smart-tips_Beacons.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Style_Flows_Smart-tips_Beacons.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)
2. Gehen Sie zu **Tooltip** und klicken Sie **Ändern**.

![Dashboard_FlowTooltip_Change.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_FlowTooltip_Change.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)
3. Wählen Sie eine der angepasst **Tooltip-Vorlagen**, die Sie mit der CSS Code Ansicht erstellt haben.

![Dashboard_Flow_CSS_customizedtemplates.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Flow_CSS_customizedtemplates.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)

Hier erfahren Sie, wie Sie die CSS-angepassten Tooltips auf dem Dashboard für Flows, Beacons und Smart Tips anzeigen:

![CSScustomized_tooltips_Dashboardlevel.gif](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CSScustomized_tooltips_Dashboardlevel.gif?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)

****Angepasste CSS Tooltips für Whatfix Studio verwenden****

Wählen Sie die angepasste CSS-Tooltips im Studio aus, um schrittweise Änderungen an Flows, Beacons oder Smart Tips vorzunehmen. Nehmen wir zum Beispiel an, Sie haben 4 Schritte in einem Flow erstellt, die gleich aussehen; Sie möchten jedoch, dass sich Schritt 5 von den übrigen Schritten unterscheidet. Erreichen Sie diesen Anwendungsfall durch schrittweise CSS-Anpassung im Whatfix Studio.

Hier wählen Sie eine angepasste Vorlage für Schritt 5 aus:

1. Rufen Sie die Standardvorlage in Studio auf und klicken Sie **Ändern**. ![Csscustomization_stepveledits_studio.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Csscustomization_stepleveledits_studio.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)
2. Wählen Sie eine beliebige Vorlage aus den von Ihnen erstellten benutzerdefinierten Vorlagen. ![CScustomization_selecttemplates_stepleveledits.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CSscustomization_selecttemplates_stepleveledits.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)

So sieht es aus, wenn Sie die angepasste Vorlage in Schritt 5 hinzugefügt haben:

![CSS_customizedtooltips_Studio.gif](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CSS_customizedtooltips_Studio.gif?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)

> [!WARNING]
> Note:
> 
> 
> 
> Alle Änderungen, die Sie in Whatfix Studio auf Schrittebene vornehmen, haben Vorrang vor den Änderungen, die Sie global über das Whatfix Dashboard vornehmen. Wenn Sie z. B. Schritt 5 weiter modifizieren möchten, öffnen Sie die CSS-Code-Ansicht in Studio für diesen Schritt und nehmen Sie Ihre Änderungen vor. Die Änderungen beziehen sich nur auf diesen Schritt, nicht auf die übrigen.
> 
> 
> 
> Führen Sie die folgenden Schritte aus, um in Studio schrittweise angepasste CSS-Vorlagen zu erstellen:
> 
> 
> 
> 1. Klicken Sie auf **Schritt hinzufügen** , um Schritt 5 zu erstellen (sehen Sie das oben genannte Beispiel).
> 
> ![CSS_Studiolevel_Step.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CSS_Studiolevel_Step.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)
> 2. Wählen Sie das Element aus, in dem Schritt 5 angezeigt werden soll.
> 
> ![CSS_elementselection_steplevel.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CSS_elementselection_steplevel.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)
> 
> Die Farbe der Tooltip ist die gleiche wie die der Tooltips auf dem Dashboard.
> 3. Klicken Sie **Ändern**, um eine andere gewünschte Vorlage für Schritt 5 auszuwählen, um sich von den übrigen Schritten zu unterscheiden. ![CSScustomization_steplevel_selecttemplate.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CSScustomization_steplevel_selecttemplate.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)
> 4. Sobald Sie die gewünschte Vorlage ausgewählt haben, klicken Sie **CSS**, um die Codeansicht aufzurufen. ![CSS customization_steplevel_selectCSS.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CSS%20customization_steplevel_selectCSS.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)
> 5. Nehmen Sie in der CSS-Codeansicht weitere Änderungen an der Vorlage vor.
> 
> ![CSScustomization_steplevel_openCSS.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CSScustomization_steplevel_openCSS.png?sv=2026-02-06&spr=https&st=2026-10-29T04%3A40%3A22Z&se=2026-10-29T05%3A40%3A22Z&sr=c&sp=r&sig=0QjKCRzDdSf3E1d71rKUF2vLM0az4frX%2BD88dYcyBmI%3D)
> 
> Die auf Schrittebene vorgenommenen Änderungen spiegeln sich nicht auf dem Dashboard (globale Ebene) wider und bleiben daher spezifisch und eindeutig für den Schritt, den Sie in Studio bearbeiten.