Benutzerdefiniertes CSS für den Produkt-Customizer
Den Chamevo Produkt-Customizer mit CSS Custom Properties und dem ::part()-Pseudoelement stylen.
Der Produkt-Customizer von Chamevo ist eine Stencil-Web-Komponente (<cv-customizer>), die Shadow DOM verwendet. Shadow DOM kapselt Komponentenstile, sodass reguläre CSS-Selektoren nicht in das Innere gelangen können. Die alten fpd--Klassen-Selektoren aus früheren Versionen funktionieren nicht mehr.
Es gibt zwei unterstützte Möglichkeiten, den Customizer aus Ihrem Theme oder Stylesheet heraus zu stylen:
- CSS Custom Properties (
--cv-*) — Theme-Tokens überschreiben, die durch die Shadow-Grenze kaskadieren. ::part()-Pseudoelement — benannte Shadow-DOM-Teile ansprechen, die von der Komponente bereitgestellt werden.
Wo benutzerdefiniertes CSS hinzugefügt werden soll
Option 1: WordPress Customizer
Gehen Sie zu Appearance → Customize → Additional CSS. Dieses Stylesheet wird nach den Plugin-Styles geladen und betrifft die gesamte Seite.
Option 2: Child-Theme-Stylesheet
Fügen Sie Regeln zur style.css Ihres Child-Themes hinzu.
Option 3: UI Composer — Feld „Custom CSS"
Öffnen Sie in Chamevo → UI Composer ein Layout und fügen Sie CSS im Feld Custom CSS hinzu. Dieses CSS wird auf Seiten, die dieses Layout verwenden, in <head> injiziert und ist die gezielteste Option, wenn verschiedene Produkte unterschiedliche Styles benötigen.
Alle drei Speicherorte unterstützen CSS Custom Properties und ::part()-Selektoren.
CSS Custom Properties
CSS Custom Properties kaskadieren durch die Shadow-DOM-Grenze. Überschreiben Sie sie auf cv-customizer (oder einem übergeordneten Element), um Farben, Abstände und Layout des Customizers zu ändern, ohne ::part() verwenden zu müssen.
Farb-Tokens
| Eigenschaft | Standard | Zweck |
|---|