Wir bereiten die neuesten Anleitungen, Releases und Feature-Updates vor.
Anleitungen werden geladen
Wir bereiten die passenden Inhalte der Wissensdatenbank für diese Plattform vor.
Benutzerdefiniertes CSS für den Produkt-Customizer | Chamevo Support Center
Benutzerdefiniertes CSS für den Produkt-Customizer
Den Chamevo Produkt-Customizer mit CSS Custom Properties und dem ::part()-Pseudoelement stylen.
Aktualisiert am 29. April 20265 Min. Lesezeit
Der Produkt-Customizer von Chamevo ist ein Stencil-Webkomponent (<cv-customizer>), der Shadow DOM verwendet. Shadow DOM kapselt Komponentenstile, sodass reguläre CSS-Selektoren nicht in sein Inneres gelangen können. Die alten fpd--Klassenselektoren aus früheren Versionen funktionieren nicht mehr.
Es gibt zwei unterstützte Wege, den Customizer aus Ihrem Theme oder Stylesheet zu stylen:
CSS Custom Properties (--cv-*) — überschreiben Theme-Tokens, die durch die Shadow-Boundary kaskadieren.
::part()-Pseudoelement — zielt auf benannte Shadow-DOM-Parts ab, die von der Komponente exponiert werden.
Wo Sie benutzerdefiniertes CSS hinzufügen
Option 1: WordPress Customizer
Gehen Sie zu Appearance → Customize → Additional CSS. Dieses Stylesheet wird nach den Plugin-Stilen geladen und wirkt auf die gesamte Seite.
Option 2: Child-Theme-Stylesheet
Fügen Sie Regeln in das style.css Ihres Child-Themes ein.
Option 3: UI Composer — Custom CSS-Feld
Öffnen Sie unter Chamevo → UI Composer ein Layout und fügen Sie CSS im Feld Custom CSS ein. Dieses CSS wird auf Seiten, die dieses Layout verwenden, in <head> injiziert und ist die präziseste Option, wenn verschiedene Produkte unterschiedliche Stile benötigen.
Alle drei Optionen unterstützen CSS Custom Properties und ::part()-Selektoren.
CSS Custom Properties
CSS Custom Properties kaskadieren durch die Shadow-DOM-Boundary. Überschreiben Sie sie auf cv-customizer (oder einem übergeordneten Element), um die Farben, Abstände und das Layout des Customizers ohne ::part() anzupassen.
Diese Tokens steuern die Gesamtgröße des Customizer-Containers. Überschreiben Sie sie auf cv-customizer, um den Customizer höher, kürzer oder auf eine exakte Höhe festzulegen.
Eigenschaft
Standard
Zweck
--cv-customizer-height
700px
Zielhöhe des Customizer-Containers
--cv-customizer-min-height
500px
Kleinste Höhe, auf die der Customizer schrumpfen kann
--cv-customizer-max-height
70vh
Größte Höhe, auf die der Customizer anwachsen kann
--cv-customizer-bg
var(--cv-bg-secondary) (#f8f8f8)
Hintergrund des Customizer-Containers (hinter Canvas und Panels)
Die drei Höhen-Tokens wirken zusammen. Die gerenderte Höhe entspricht --cv-customizer-height, sinkt aber nie unter --cv-customizer-min-height und überschreitet nie --cv-customizer-max-height. Mit den Standardwerten strebt der Customizer 700px an, wird aber auf kürzeren Bildschirmen auf 70vh begrenzt, sodass er immer in den Viewport passt.
Um eine feste Höhe festzulegen, setzen Sie alle drei Tokens auf denselben Wert:
/* Customizer auf exakt 800px Höhe fixieren */
cv-customizer {
--cv-customizer-height: 800px;
--cv-customizer-min-height: 800px;
--cv-customizer-max-height: 800px;
}
Auf kleinen Bildschirmen (Mobilgeräte) wechselt der Customizer in ein flüssiges Layout, bei dem --cv-customizer-min-height90vh und --cv-customizer-max-height100vh wird. Um die mobile Höhe anzupassen, überschreiben Sie diese Tokens in einer Media Query:
/* Customizer auf Mobilgeräten im Vollbildmodus anzeigen */
@media (max-width: 768px) {
cv-customizer {
--cv-customizer-min-height: 100vh;
}
}
/* Alle Customizer auf der Website verwenden den Rounded-Stil */
cv-customizer {
--cv-radius: 0.75rem;
--cv-radius-sm: 0.5rem;
--cv-radius-lg: 1rem;
}
::part()-Selektoren
Mit ::part() können Sie spezifische Elemente im Shadow DOM aus einem externen Stylesheet heraus stylen. Alle nachfolgenden Parts sind auf cv-customizer exponiert — entweder direkt definiert oder von untergeordneten Komponenten re-exportiert.
Die Modul-Navigationsleiste (vertikal oder horizontal)
cv-customizer::part(mainbar-item)
Einzelner Modul-Navigations-Button
cv-customizer::part(mainbar-vertical)
Navigationsleiste in vertikaler (seitlicher) Ausrichtung
cv-customizer::part(mainbar-horizontal)
Navigationsleiste in horizontaler Ausrichtung
Modul-Panel
Selektor
Ziel
cv-customizer::part(module-panel)
Das Modul-Inhalts-Panel
cv-customizer::part(module-header)
Modul-Panel-Kopfzeile
cv-customizer::part(module-content)
Scrollbarer Inhaltsbereich des Modul-Panels
Aktionsleiste
Selektor
Ziel
cv-customizer::part(actions-bar)
Beliebige Aktionsleisten-Instanz
cv-customizer::part(actions-bar-top)
Obere Aktionsleiste
cv-customizer::part(actions-bar-bottom)
Untere Aktionsleiste
Element-Bearbeitungs-Toolbar
Die Toolbar erscheint, wenn ein Element auf dem Canvas ausgewählt wird. Die übergeordneten Tools (Edit, Color, Font, Size, Format, Effect, Filters, Transform, Position) werden in toolbar-nav gerendert. Das Color-Tool zeigt eine zweite Reihe von Sub-Tabs (Fill, Patterns, Stroke, Shadow), die einzeln angesprochen werden können. Der Fill-Sub-Tab des Color-Tools zeigt zudem einen Deckkraft-Slider, der als eigener Part exponiert ist.
Deckkraft-Slider (wird unter dem Fill-Sub-Tab des Color-Tools angezeigt)
Bilder-Modul (Upload / Pixabay / AI / QR Code)
Das Bilder-Modul rendert eine Tab-Leiste mit bis zu vier Tabs, abhängig von der Konfiguration: Upload, Pixabay, Text-to-Image (AI) und QR Code. Jeder Tab ist als eigener Part exponiert.
Diese Klassen werden von chamevo-js an das <body>-Element des Dokuments angehängt und befinden sich außerhalb des Shadow DOM. Reguläre CSS-Selektoren erreichen sie direkt.
Klasse
Ziel
.cv-tooltip
Schwebende Tooltip-Elemente
.cv-thumbnail-preview
Grafik-Thumbnail-Hover-Vorschau-Popup
.cv-drag-placeholder
Element-Vorschau beim Ziehen einer Grafik auf den Canvas
Deckkraft-Slider in der Element-Toolbar ausblenden
Der Deckkraft-Slider befindet sich unter dem Fill-Sub-Tab des Color-Tools. Blenden Sie ihn aus, wenn Kunden die Deckkraft von Elementen nicht ändern sollen:
cv-customizer::part(opacity) {
display: none;
}
Aktiven Color-Sub-Tab mit benutzerdefinierter Farbe hervorheben
::part() unterstützt gängige Pseudo-Klassen wie :hover und Attribut-Selektoren für den ARIA-Zustand.
Nützlich, wenn Elemente auswählbar, aber nicht bearbeitbar sein sollen:
cv-customizer::part(toolbar) {
display: none;
}
Einen bestimmten Modul-Button in der Navigationsleiste ausblenden
Einzelne Modul-Navigations-Buttons teilen sich denselben mainbar-item-Part, sodass ::part() allein kein spezifisches Modul ansprechen kann. Verwenden Sie als CSS-Fallback den positionsbasierten Selektor :nth-child():
/* Den dritten Modul-Button in der Navigationsleiste ausblenden */
cv-customizer::part(mainbar-item):nth-child(3) {
display: none;
}
Die Reihenfolge entspricht dem mainBarModules-Array in Ihrer Chamevo-Konfiguration. Da dieser Ansatz positionsbasiert ist, funktioniert er nicht mehr korrekt, wenn Sie die Reihenfolge der Module ändern. Die zuverlässige Methode zum Entfernen von Modulen ist, sie aus mainBarModules im chamevo_app_options-Filter wegzulassen:
Sie können nicht innerhalb eines Parts selektieren.::part(mainbar-item) span funktioniert nicht. Sie können nur das Part-Element selbst stylen.
Sie können nicht nach inneren Attributen selektieren. Einzelne Module, Aktionen und Tools verwenden data-module-, data-action- und data-tool-Attribute im Shadow DOM. Diese sind von externem CSS aus nicht erreichbar. Für die gezielte Steuerung einzelner Elemente entfernen Sie diese stattdessen aus der Konfiguration (z. B. mainBarModules, actions).
Sie können Pseudo-Klassen und die eigenen Attribute des Parts verketten.::part(toolbar-subtab):hover und ::part(toolbar-subtab)[aria-selected="true"] funktionieren beide.
::part() kann keine Custom Properties setzen, die in den Shadow Tree kaskadieren. Setzen Sie --cv-* stattdessen auf cv-customizer.
Dark Mode auf bestimmten Seiten anwenden
/* Nur auf Seiten mit der Klasse 'my-dark-page' */
.my-dark-page cv-customizer {
--cv-bg: #111113;
--cv-bg-secondary: #18191b;
--cv-bg-tertiary: #212225;
--cv-canvas-bg: #1b1b1f;
--cv-text: #edeef0;
--cv-text-secondary: #b0b4ba;
--cv-border: #363a3f;
--cv-border-interactive: #43484e;
}
Oder verwenden Sie die integrierte Klasse:
.my-dark-page cv-customizer {
/* Aktiviert das integrierte Dark-Preset */
}
F: Die alten .fpd--Klassenselektoren funktionieren nach dem Update nicht mehr. Warum?
A: Chamevo v2 hat die Legacy-Rendering-Engine fpd-js durch chamevo-js ersetzt, das Stencil-Webkomponenten und Shadow DOM verwendet. Shadow DOM kapselt Stile, sodass fpd--Klassenselektoren das Innere des Customizers nicht mehr erreichen. Verwenden Sie stattdessen --cv-*-Custom Properties oder ::part()-Selektoren.
F: Kann ich --cv-*-Properties innerhalb einer ::part()-Regel überschreiben?
A: Nein. ::part()-Regeln sprechen Elemente an, können aber keine Custom Properties setzen, die in den Shadow Tree kaskadieren. Setzen Sie --cv-* stattdessen auf cv-customizer oder einem übergeordneten Element.
F: Funktionieren ::part()-Selektoren in allen Browsern?
A: Ja. ::part() wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge). Internet Explorer wird von Chamevo nicht unterstützt.
F: Kann ich JavaScript verwenden, um CSS-Klassen zu <cv-customizer> hinzuzufügen?
A: Ja. document.querySelector('cv-customizer').classList.add('cv-dark') funktioniert und wendet die entsprechenden CSS-Tokens an.
F: Wie blende ich einen bestimmten Tab im Bilder-Modul aus?
A: Jede Bildquelle hat ihren eigenen ::part(). Blenden Sie den QR Code-Tab mit cv-customizer::part(images-tab-qrcode) { display: none; } aus, den Pixabay-Tab mit images-tab-pixabay, den AI-Tab mit images-tab-text2img oder den Upload-Tab mit images-tab-upload.
F: Wie blende ich den Shadow-Tab in der Color-Toolbar aus?
A: Verwenden Sie cv-customizer::part(toolbar-subtab-shadow) { display: none; }. Das gleiche Muster funktioniert für toolbar-subtab-fill, toolbar-subtab-patterns und toolbar-subtab-stroke.
F: Wie verhindere ich, dass Kunden die Deckkraft von Elementen ändern?
A: Blenden Sie den Deckkraft-Slider mit cv-customizer::part(opacity) { display: none; } aus. Er erscheint unter dem Fill-Sub-Tab des Color-Tools, wenn ein Element ausgewählt ist.
F: Kann ich einen einzelnen Modul-Button in der Navigationsleiste per CSS ausblenden?
A: Nur positionsbasiert mit :nth-child() — ::part(mainbar-item) spricht alle Modul-Buttons gleichmäßig an. Für eine zuverlässige, sprachunabhängige Methode zum Entfernen von Modulen setzen Sie mainBarModules über den chamevo_app_options-Filter und lassen Sie die ungewünschten Module weg.
F: Wie ändere ich die Höhe des Produkt-Customizers?
A: Überschreiben Sie --cv-customizer-height auf cv-customizer. Der Customizer berücksichtigt außerdem --cv-customizer-min-height (Standard 500px) und --cv-customizer-max-height (Standard 70vh). Um eine exakte Höhe festzulegen, setzen Sie alle drei Tokens auf denselben Wert.
F: Der Customizer ist kürzer als die von mir festgelegte Höhe. Warum?
A: Die Höhe wird durch --cv-customizer-max-height begrenzt, das standardmäßig 70vh beträgt. Auf kürzeren Bildschirmen gewinnt dieses Limit gegenüber --cv-customizer-height. Erhöhen oder entfernen Sie die Begrenzung, indem Sie --cv-customizer-max-height auf einen größeren Wert setzen.
