Dokumentation · Integrationshandbuch

Anleitung für benutzerdefiniertes CSS

Dieses Dokument erklärt, wie Sie das visuelle Erscheinungsbild des ADP Car Market Hub-Plugins sicher mit CSS anpassen, welche Ansätze über Plugin-Updates hinweg stabil sind und wie Sie Overrides vermeiden, die bei Änderungen am Plugin fehlerhaft werden können.

Wann Sie dieses Dokument verwenden sollten

Verwenden Sie dieses Dokument, wenn Sie:

Farben, Schriftarten, Abstände oder andere visuelle Details auf Fahrzeugseiten anpassen möchten, die über die Einstellungen unter Car Market Hub → Design hinausgehen.
Responsive Korrekturen für bestimmte Bildschirmgrössen hinzufügen möchten.
CSS-Regeln im Stylesheet Ihres Child-Themes schreiben, die auf Plugin-Elemente abzielen.
Bestehende CSS-Overrides nach einem Plugin-Update überprüfen.

Beginnen Sie immer mit Car Market Hub → Design, bevor Sie benutzerdefiniertes CSS schreiben. Die Design-Einstellungen decken bereits Primärfarben, Schaltflächenfarben, Typografie (H1 / H2 / H3 / Fliesstext), Schriftgrössen, Rahmenradien und mehr ab. Benutzerdefiniertes CSS ist nur für Anpassungen erforderlich, die in den Design-Einstellungen nicht angeboten werden.

Übersicht

Das Plugin gibt sein Frontend-CSS an zwei Stellen aus:

Eingereihte Stylesheets (Enqueued). CSS-Dateien, die über WordPresss wp_enqueue_style() auf Fahrzeug-Archivseiten, Fahrzeug-Einzelseiten und Vergleichsseiten geladen werden. Diese Dateien sind mit der Plugin-Versionsnummer versehen und werden von Browsern zwischengespeichert.
Dynamische Inline-Styles. Ein <style id="as24ci-dynamic-styles">-Block, der in <head> mit der Priorität wp_head 99 eingefügt wird. Dieser Block enthält Deklarationen für benutzerdefinierte CSS-Eigenschaften (Variablen) in :root sowie spezifische Regeln, die aus den Design-Einstellungen abgeleitet werden. Er wird auf jeder Frontend-Seite ausgegeben.

Der empfohlene Weg, benutzerdefiniertes CSS hinzuzufügen, ist das Feld Benutzerdefiniertes CSS unter Car Market Hub → Design. Der Inhalt dieses Feldes wird am Ende des Build-Prozesses an den dynamischen Inline-Style-Block angehängt, nach allen anderen vom Plugin generierten Regeln. Dies macht es zum zuverlässigsten Ort für Overrides, da es auf derselben Seite und im selben <style>-Block nach den zu überschreibenden Regeln geladen wird.

Eine sekundäre Option ist die style.css des Child-Themes oder das integrierte Feld Zusätzliches CSS von WordPress (Design → Customizer → Zusätzliches CSS). Diese werden als separate Stylesheets geladen, und ihre Interaktion mit den !important-Deklarationen des Plugins erfordert Aufmerksamkeit (siehe unten).

Voraussetzungen

WordPress-Administratorzugriff auf Car Market Hub → Design.
Grundlegendes Verständnis der CSS-Selektorspezifität.
Ein Browser mit Entwicklertools zur Überprüfung von Elementklassen und berechneten Styles.

Die CSS-Struktur des Plugins verstehen

Wrapper-Klassen

Alle Frontend-Ausgaben des Plugins sind in Elemente gehüllt, die vorhersehbare Klassen tragen. Diese Klassen sind die stabilen Ankerpunkte für benutzerdefiniertes CSS.

Klasse	Angewendet auf	Vorhanden auf
`.as24ci-page`	Äusserster Wrapper	Allen Plugin-Seiten und Shortcode-Ausgaben
`.as24ci-page-classic`	Äusserster Wrapper	Fahrzeug-Einzelseiten
`.as24ci-archive-page`	Äusserster Wrapper	Fahrzeug-Archivseiten und `[as24ci_archive]`-Shortcode
`.as24ci-page-inner`	Inhaltsbreiten-Container	Allen Plugin-Seiten
`.as24ci-archive-inner`	Archiv-Inhaltscontainer	Fahrzeug-Archiv
`.as24ci-archive-list`	Fahrzeug-Listing-Raster oder -Liste	Archiv
`.as24ci-archive-row`	Einzelne Fahrzeugkarte	Archiv
`.as24ci-card`	Karten-Panel	Fahrzeug-Einzelseite

Indem Sie Ihre Selektoren unter .as24ci-page eingrenzen, stellen Sie sicher, dass Ihre Regeln keine anderen Teile der Seite beeinflussen.

Benutzerdefinierte CSS-Eigenschaften (CSS-Variablen)

Das Plugin deklariert benutzerdefinierte CSS-Eigenschaften (CSS-Variablen) in :root für alle über das Design steuerbaren Werte. Diese werden durch die Design-Einstellungen festgelegt und sind die vorgesehenen Anpassungspunkte. Sie können sie im Feld "Benutzerdefiniertes CSS" überschreiben:

:root {
  --as24ci-color-primary: #b22222;
  --as24ci-color-button: #b22222;
  --as24ci-border-radius: 4px;
}

Das Überschreiben von benutzerdefinierten Eigenschaften ist der update-stabilste Ansatz, da er unabhängig von der internen HTML-Struktur des Plugins funktioniert.

Spezifität und `!important`

Einige Regeln im dynamischen Inline-CSS-Block des Plugins verwenden !important, um aktive Theme-Styles, die auf dieselben Elemente abzielen (z. B. theme-weite Überschriftenregeln), zuverlässig zu überschreiben. Wenn Sie eine dieser Regeln von ausserhalb des dynamischen Blocks überschreiben müssen (z. B. aus einem Theme-Stylesheet), benötigen Sie unter Umständen ebenfalls !important. Das Feld "Benutzerdefiniertes CSS" wird innerhalb desselben dynamischen Blocks geladen und hat daher denselben Spezifitätskontext – in den meisten Fällen können Sie Plugin-Regeln von dort aus ohne !important überschreiben.

Schritt-für-Schritt-Anleitung

Verwendung des Feldes "Benutzerdefiniertes CSS" (empfohlen)

Navigieren Sie zu Car Market Hub → Design.
Scrollen Sie zum Feld Benutzerdefiniertes CSS (überprüfen Sie die genaue Beschriftung in der aktuellen Plugin-Version).
Geben Sie Ihre CSS-Regeln ein. Das Feld akzeptiert Standard-CSS; HTML-Tags werden vor der Ausgabe entfernt.
Speichern Sie die Einstellungen.
Leeren Sie allfällige Page-Caches und laden Sie eine Fahrzeugseite neu, um die Änderungen zu überprüfen.

Beispiel – Ändern der Hintergrundfarbe der Fahrzeugkarte:

.as24ci-archive-row {
  background: #f9f9f9;
}

Beispiel – Anpassen der Schriftgrösse des Hauptpreises (Hero Price) auf Fahrzeug-Einzelseiten:

.as24ci-page-classic .as24ci-hero-price-value {
  font-size: 2rem;
}

Beispiel – Reduzieren der inneren Inhaltsbreite:

.as24ci-page-inner {
  width: min(1200px, calc(100% - 32px));
}

Verwendung des Child-Theme-Stylesheets

Wenn Sie benutzerdefiniertes CSS lieber zusammen mit Ihrem Theme in der Versionskontrolle verwalten möchten:

Öffnen Sie die style.css Ihres Child-Themes (oder eine dedizierte custom.css, die aus der functions.php geladen wird).
Grenzen Sie alle Selektoren unter .as24ci-page oder einer spezifischeren Wrapper-Klasse ein, um Konflikte mit dem Rest der Website zu vermeiden.
Wenn eine Regel keine Wirkung zeigt, weil eine Plugin-Regel mit !important eine höhere effektive Spezifität aufweist, versuchen Sie, !important zu Ihrer Deklaration hinzuzufügen, oder verwenden Sie stattdessen das Feld "Benutzerdefiniertes CSS".

Validierung des responsiven Verhaltens

Das CSS des Plugins ist so konzipiert, dass es responsiv ist. Testen Sie nach dem Hinzufügen benutzerdefinierter Regeln die folgenden Breakpoints mithilfe der Browser-Entwicklertools:

Desktop (≥ 1280 px): Überprüfen Sie das Raster-Layout, die Ausrichtung der Filter-Sidebar und den Hero-Bereich.
Tablet (768 – 1279 px): Überprüfen Sie, ob das Archiv zu einem schmaleren Raster wechselt und ob das Filter-Panel zugänglich ist.
Mobil (< 768 px): Überprüfen Sie, ob die Karten vertikal gestapelt werden, Bilder korrekt skalieren und das Kontaktformular bedienbar ist.

Achten Sie besonders auf hinzugefügte width-, max-width-, padding-, margin- und font-size-Regeln – absolute Pixelwerte, die auf dem Desktop gut aussehen, können das mobile Layout zerstören.

Konfigurationsreferenz

Design-Einstellung	Was sie steuert	Gesetzte benutzerdefinierte Eigenschaft
Primärfarbe	Hauptmarkenfarbe für Überschriften und die primäre CSS-Variable	`--as24ci-color-primary`, `--as24ci-color-heading`
Akzentfarbe	Sekundäre Hervorhebungs- und Preisfarbe	`--as24ci-color-accent`, `--as24ci-color-price`
Schaltflächenfarbe	Standard-Schaltflächenhintergrund	`--as24ci-color-button`
Schaltflächen-Hoverfarbe	Schaltflächenhintergrund beim Darüberfahren	`--as24ci-color-button-hover`
Kartenhintergrund	Hintergrund von Karten-/Panel-Elementen	`--as24ci-color-bg`
Rahmenradius	Abgerundete Ecken bei Karten und Schaltflächen	`--as24ci-border-radius`
Typografie (H1 / H2 / H3 / Fliesstext)	Schriftgrösse, -gewicht, Zeilenhöhe und Text-Transformation, eingegrenzt auf `.as24ci-page-classic`	Inline-Regeln auf `.as24ci-page-classic h1`, `.as24ci-page-classic h2` etc.
Benutzerdefiniertes CSS	Freiform-CSS, das am Ende des dynamischen Blocks angehängt wird	N/A – wird unverändert angehängt

Betriebliche Hinweise

Update-Stabilität. Klassennamen und HTML-Strukturen in Plugin-Templates können sich zwischen Plugin-Versionen ändern. CSS-Selektoren, die auf tief verschachtelte Elemente oder sehr spezifische Klassenkombinationen abzielen, brechen nach einem Update eher. Verwenden Sie nach Möglichkeit die äussersten stabilen Wrapper-Klassen (.as24ci-page, .as24ci-page-classic, .as24ci-archive-page) und benutzerdefinierte CSS-Eigenschaften.
Versionen eingereihter Stylesheets. Plugin-CSS-Dateien sind mit der Plugin-Versionsnummer versehen (?ver=x.y.z). Nach einem Plugin-Update fordern Browser automatisch die neue Version an. Caching-Plugins, die Query-Strings ignorieren, liefern unter Umständen eine alte CSS-Datei aus – leeren Sie nach Updates sowohl den Page-Cache als auch den CDN-Cache.
Feld "Benutzerdefiniertes CSS" und HTML-Tags. Das Feld "Benutzerdefiniertes CSS" leitet seinen Inhalt vor der Ausgabe durch wp_strip_all_tags(). HTML-Tags (einschliesslich <style>, <script> und </style>) werden entfernt. Schreiben Sie ausschliesslich reines CSS – HTML-Wrapper sind nicht erforderlich.
Vermeiden Sie interne Selektoren ohne Wrapper-Eingrenzung. Schreiben Sie niemals eine Regel wie .as24ci-title-main { color: red; }, ohne sie auf .as24ci-page oder .as24ci-page-classic einzugrenzen. Eine innerhalb des Plugin-Templates verwendete Klasse könnte theoretisch mit Elementen an anderer Stelle auf der Seite übereinstimmen, wenn ein anderes Plugin oder Theme denselben Klassennamen verwendet.
Bearbeiten Sie Plugin-CSS-Dateien nicht direkt. Die CSS-Dateien in wp-content/plugins/adp-car-market-hub/templates/css/ werden bei Plugin-Updates überschrieben. Alle an diesen Dateien vorgenommenen Änderungen gehen verloren. Verwenden Sie stattdessen das Feld "Benutzerdefiniertes CSS" oder das Stylesheet Ihres Child-Themes.
Verwendung von !important. Das Plugin verwendet !important in Typografie-Overrides, um sicherzustellen, dass sie gegenüber theme-weiten Überschriften-Styles Priorität haben. Vermeiden Sie es, !important in Ihrem benutzerdefinierten CSS wahllos zu verwenden – dies erschwert die zukünftige Wartung. Wenn Sie eine Plugin-Regel mit !important überschreiben müssen, versuchen Sie zuerst, die Spezifität des Selektors zu erhöhen.
Typografie-Einstellungen pro Seite. Der Reiter "Design" enthält separate Typografie-Gruppen für Fahrzeug-Einzelseiten, Archivseiten, Favoriten und Vergleichsseiten. Diese Einstellungen sind der vorgesehene Weg, um Typografien anzuwenden, die sich zwischen den Seitentypen unterscheiden. Nutzen Sie diese, bevor Sie benutzerdefiniertes CSS für denselben Zweck schreiben.

Fehlerbehebung

Symptom	Wahrscheinliche Ursache	Was zu prüfen ist
Benutzerdefiniertes CSS aus dem Design-Feld zeigt keine sichtbare Wirkung.	Der Page-Cache liefert eine alte Version der Seite aus.	Leeren Sie den Page-Cache und den CDN-Cache, und laden Sie die Seite anschliessend neu (Hard Reload).
Eine Regel im Child-Theme-Stylesheet überschreibt eine Plugin-Regel nicht.	Die Plugin-Regel hat eine `!important`-Deklaration oder einen Selektor mit höherer Spezifität.	Erhöhen Sie die Spezifität Ihrer Regel oder verschieben Sie sie in das Feld "Benutzerdefiniertes CSS" im Plugin (wo sie nach den plugin-eigenen Regeln angehängt wird).
Benutzerdefiniertes CSS zerstört das mobile Layout.	Eine feste Breite (`width`) oder Höhe (`font-size`) im benutzerdefinierten CSS skaliert bei geringen Bildschirmbreiten nicht.	Packen Sie die Regel in eine `@media`-Abfrage oder verwenden Sie relative Einheiten (`%`, `em`, `rem`, `vw`) anstelle von absoluten Pixeln.
Der `as24ci-dynamic-styles`-Block fehlt im Quelltext der Seite.	Ein Caching- oder HTML-Optimierungs-Plugin entfernt Inline-`<style>`-Blöcke.	Setzen Sie `as24ci-dynamic-styles` in den Einstellungen des Optimierungs-Plugins auf die Whitelist oder schliessen Sie die Plugin-Seiten von der Optimierung aus.
Styles aus dem Feld "Benutzerdefiniertes CSS" erscheinen in der falschen Reihenfolge.	Das benutzerdefinierte CSS wird nach allen anderen Plugin-Regeln im dynamischen Block angehängt, sodass es sich immer durchsetzen sollte, es sei denn, ein anderes Stylesheet (das nach `wp_head` geladen wird) überschreibt es.	Untersuchen Sie die Seite mit den Entwicklertools des Browsers, um die Kaskadenreihenfolge zu überprüfen.