> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom CSS Editor

> Definiere eigene CSS-Regeln und gestalte deinen Shop individuell, auch ohne tiefgehende Programmierkenntnisse.

## Deine Regeln

In diesem Reiter kannst du mithilfe eines grafischen Editors gezielt CSS-Regeln für vordefinierte Bereiche erstellen und deine gespeicherten Regeln verwalten.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/3pbDFteAD0ejAg3i/images/niu-plus-custom-css-editor.jpg?fit=max&auto=format&n=3pbDFteAD0ejAg3i&q=85&s=630f3e522e03b48b64a864e4f8cbb677" alt="Custom CSS Editor" width="2064" height="1192" data-path="images/niu-plus-custom-css-editor.jpg" />
  </Frame>
</div>

<Warning>
  **Wichtiger Hinweis:** Dieses Tool soll dir zur Unterstützung dienen, um dein NIUplus auch ohne CSS Kenntnisse zu individualisieren. Es ersetzt jedoch keine Fachkenntnisse. Du benutzt dieses Tool auf eigene Verantwortung. Der Hersteller leistet keinen kostenfreien Support für Änderungen, die mit diesem Tool erstellt wurden.
</Warning>

### Neue CSS Regel erstellen

Hier definierst du die Eigenschaften einer neuen Design-Anpassung.

* **Selektor wählen:** Wähle im ersten Dropdown den Bereich aus, den du bearbeiten möchtest (z. B. "Nav Topbar"). Im zweiten Dropdown kannst du einen Status wählen (z. B. "Ohne" für den Normalzustand).
* **Hintergrundfarbe:** Lege eine Hintergrundfarbe fest. Aktiviere den **Important**-Schalter, um diese Regel zu erzwingen (CSS `!important`).
* **Schriftfarbe:** Lege die Textfarbe fest. Auch hier steht dir der **Important**-Schalter zur Priorisierung zur Verfügung.
* **Schriftdicke:** Wähle die Stärke der Schriftart (Font Weight) aus dem Dropdown. Nutze **Important**, falls die Änderung sonst nicht greift.
* **Custom Rules:** In dieses Textfeld kannst du manuellen CSS-Code eingeben, um Eigenschaften zu ändern, die oben nicht als Auswahlfeld zur Verfügung stehen (z. B. `border: 1px solid #e5e5e5;`).

### Deine Regeln (Übersicht)

Unterhalb des Editors findest du eine Liste aller bereits angelegten Regeln.

* **Tabelle:** Hier siehst du eine Übersicht der Regeln, sortiert nach **Selektor** und **State**.
  * Wenn keine Regeln vorhanden sind, erscheint die Meldung "Keine Datensätze gefunden".
  * Du kannst die Anzahl der angezeigten Elemente pro Seite ("Items per page") steuern (z. B. `100`).

***

## Dein Stylesheet

Dieser Reiter bietet dir einen freien Code-Editor für umfangreichere oder komplett freie CSS-Anpassungen.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/3pbDFteAD0ejAg3i/images/niu-plus-custom-css-stylesheet.jpg?fit=max&auto=format&n=3pbDFteAD0ejAg3i&q=85&s=54f1950c171ab4a3c27e7f03cd041972" alt="Custom CSS Stylesheet" width="2018" height="716" data-path="images/niu-plus-custom-css-stylesheet.jpg" />
  </Frame>
</div>

### Neue CSS Regel erstellen

* **Code Editor:** Trage hier deinen kompletten CSS-Code ein ("Code goes here..."). Dieser wird global in das Stylesheet des Shops geladen.

<div style={{height: '1px', backgroundColor: 'silver', margin: '24px 0'}} />