Dokumentation · Integrationshandbuch

Eigene CSS-Anpassungen

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

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ößen hinzufügen möchten.
CSS-Regeln im Stylesheet Ihres Child-Themes schreiben, die auf Plugin-Elemente abzielen.
Bestehende CSS-Überschreibungen nach einem Plugin-Update überprüfen.

Beginnen Sie mit Car Market Hub → Design, bevor Sie eigenes CSS schreiben. Die Design-Einstellungen decken bereits Primärfarben, Schaltflächenfarben, Typografie (H1 / H2 / H3 / Fließtext), Schriftgrößen, abgerundete Ecken und mehr ab. Eigenes CSS ist nur für Anpassungen erforderlich, die in den Design-Einstellungen nicht konfigurierbar sind.

Übersicht

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

Eingereihte Stylesheets (Enqueued Stylesheets). CSS-Dateien, die über WordPresss wp_enqueue_style() auf Fahrzeug-Archivseiten, Fahrzeug-Einzelseiten und Vergleichsseiten geladen werden. Diese Dateien sind mit der Versionsnummer des Plugins 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 CSS-Variablendeklarationen (Custom Properties) in :root sowie spezifische Regeln, die aus den Design-Einstellungen abgeleitet werden. Er wird auf jeder Frontend-Seite ausgegeben.

Der empfohlene Weg, eigenes CSS hinzuzufügen, ist das Feld für eigenes 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 Überschreibungen, da es auf derselben Seite und im selben <style>-Block nach den zu überschreibenden Regeln geladen wird.

Eine alternative 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

Administrator-Zugriff auf WordPress für 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 eigenes CSS.

Klasse	Angewendet auf	Vorhanden auf
`.as24ci-page`	Äußerster Wrapper	Allen Plugin-Seiten und Shortcode-Ausgaben
`.as24ci-page-classic`	Äußerster Wrapper	Fahrzeug-Einzelseiten
`.as24ci-archive-page`	Äußerster 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-Auflistungsgitter 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.

CSS-Variablen (Custom Properties)

Das Plugin deklariert 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 für eigenes CSS überschreiben:

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

Das Überschreiben von CSS-Variablen ist der updatesicherste 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 außerhalb des dynamischen Blocks (z. B. aus einem Theme-Stylesheet) überschreiben müssen, benötigen Sie unter Umständen ebenfalls !important. Das Feld für eigenes 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 für eigenes CSS (empfohlen)

Gehen Sie zu Car Market Hub → Design.
Scrollen Sie zum Feld Eigenes 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 den Seitencache 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öße des Hauptpreises 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 eigenes CSS lieber in der Versionsverwaltung zusammen mit Ihrem Theme 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 für eigenes CSS.

Validierung des responsiven Verhaltens

Das CSS des Plugins ist responsiv gestaltet. Testen Sie nach dem Hinzufügen eigener Regeln die folgenden Breakpoints mithilfe der Browser-Entwicklertools:

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

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

Konfigurationsreferenz

Design-Einstellung	Was sie steuert	Gesetzte CSS-Variable
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-Hover-Farbe	Schaltflächenhintergrund bei Hover	`--as24ci-color-button-hover`
Kartenhintergrund	Hintergrund von Karten-/Panel-Elementen	`--as24ci-color-bg`
Eckenradius	Abgerundete Ecken bei Karten und Schaltflächen	`--as24ci-border-radius`
Typografie (H1 / H2 / H3 / Fließtext)	Schriftgröße, -gewicht, Zeilenhöhe und Text-Transform eingegrenzt auf `.as24ci-page-classic`	Inline-Regeln für `.as24ci-page-classic h1`, `.as24ci-page-classic h2` etc.
Eigenes CSS	Freiform-CSS, das am Ende des dynamischen Blocks angehängt wird	N/A – wird unverändert angehängt

Betriebshinweise

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 äußersten stabilen Wrapper-Klassen (.as24ci-page, .as24ci-page-classic, .as24ci-archive-page) und CSS-Variablen.
Versionen eingereihter Stylesheets. Plugin-CSS-Dateien sind mit der Versionsnummer des Plugins 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 Seitencache als auch den CDN-Cache.
Feld für eigenes CSS und HTML-Tags. Das Feld für eigenes CSS bereinigt seinen Inhalt vor der Ausgabe über wp_strip_all_tags(). HTML-Tags (einschließlich <style>, <script> und </style>) werden entfernt. Schreiben Sie ausschließlich 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 im Template des Plugins 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 für eigenes CSS oder das Stylesheet Ihres Child-Themes.
Verwendung von !important. Das Plugin verwendet !important in Typografie-Überschreibungen, um sicherzustellen, dass sie gegenüber theme-weiten Überschriftenstilen wirksam sind. Vermeiden Sie es, !important in Ihrem eigenen CSS wahllos zu verwenden – dies erschwert die zukünftige Wartung. Wenn Sie eine !important-Regel des Plugins ü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 eigenes CSS für denselben Zweck schreiben.

Fehlerbehebung

Symptom	Wahrscheinliche Ursache	Was zu prüfen ist
Eigenes CSS aus dem Design-Feld zeigt keine sichtbare Wirkung.	Der Seitencache liefert eine alte Version der Seite aus.	Leeren Sie den Seitencache und den CDN-Cache und laden Sie die Seite 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 für eigenes CSS im Plugin (wo sie nach den plugin-eigenen Regeln angehängt wird).
Eigenes CSS beschädigt das mobile Layout.	Ein fester Wert für `width` oder `font-size` im eigenen CSS skaliert bei geringen Bildschirmbreiten nicht.	Betten Sie die Regel in eine `@media`-Abfrage ein 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 schließen Sie Plugin-Seiten von der Optimierung aus.
Styles aus dem Feld für eigenes CSS erscheinen in der falschen Reihenfolge.	Das eigene 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.