CSS und Hooks

Was in assets/theme.css erlaubt ist und an welchen stabilen Attributen du dich festhältst.

assets/theme.css wird nicht in einen Layer gesetzt und gewinnt damit gegen die Utility-Klassen der Sections. Erlaubt ist alles, was keine externen Ressourcen lädt.

#Stabile Hooks

Hook	Beispiel
Section-Typ	`[data-section-type="hero"] h1`
Block-Typ	`[data-block-type="buy-box"]`
Farbschema	`.scheme-primary`, `.scheme-contrast`
Elemente	`[data-slot="section"]`, `[data-slot="container"]`, `[data-slot="button"]`, `[data-slot="product-card"]`
Inhaltsseiten	`[data-slot="page"]` (Warenkorb, Kasse, Konto, Suche)
Header/Footer	`[data-testid="site-header"]`, `[data-testid="announcement-bar"]`, `[data-testid="site-footer"]`

#Variablen

css

--background --foreground --primary --primary-foreground --muted --muted-foreground
--border --radius --font-heading --font-body --page-width --spacing-section --card-ratio

#Beispiel

assets/theme.css

css

/* Produktkarten als Panels mit Tuschekontur */
[data-slot="product-card"] {
  border: 2px solid var(--foreground);
  box-shadow: 4px 4px 0 var(--foreground);
}

/* Höhere Spezifität für einen einzelnen Section-Typ */
[data-section-type="faq"][data-section-type] summary {
  font-family: var(--font-heading);
}

/* Bilder aus dem Paket */
[data-section-type="hero"] {
  background-image: url("assets/paper.webp");
}

#Was entfernt wird

Mit Hinweis in der Bibliothek: @import, externe url(), image-set("…"), src("…"), expression(), behavior, javascript:, Escape-Sequenzen, die Buchstaben bilden, und </style. url() darf nur auf Bilder des Pakets zeigen (url("paper.webp") oder url("assets/paper.webp")).

Tipp

Überschreibt deine Regel einen Section-Stil nicht, verdopple den Attribut-Selektor ([data-section-type="x"][data-section-type]), statt !important zu verwenden.

Zuletzt aktualisiert am 21. Oktober 2026

ZurückTemplates und Sections Weiter Registry, Updates und Verkauf