Documentatie · Integratiehandleiding

Handleiding voor aangepaste CSS

Dit document legt uit hoe u de visuele weergave van de ADP Car Market Hub-plugin veilig kunt aanpassen met behulp van CSS, welke benaderingen stabiel blijven bij plugin-updates en hoe u overrides vermijdt die defect kunnen raken wanneer de plugin verandert.

Wanneer u dit document gebruikt

Gebruik dit document als u:

Kleuren, lettertypen, tussenruimtes of andere visuele details op voertuigpagina's wilt aanpassen die verder gaan dan wat de instellingen onder Car Market Hub → Design bieden.
Responsieve correcties wilt toevoegen voor specifieke schermgroottes.
CSS-regels schrijft in de stylesheet van uw child-theme die gericht zijn op plugin-elementen.
Bestaande CSS-overrides wilt controleren na een plugin-update.

Begin altijd met Car Market Hub → Design voordat u aangepaste CSS schrijft. De Design-instellingen dekken al de primaire kleuren, knopkleuren, typografie (H1 / H2 / H3 / body), lettergroottes, border-radius en meer. Aangepaste CSS is alleen nodig voor aanpassingen die niet via de Design-instellingen beschikbaar zijn.

Overzicht

De plugin toont zijn front-end CSS op twee plaatsen:

In de wachtrij geplaatste stylesheets. CSS-bestanden die worden geladen via WordPress's wp_enqueue_style() op voertuigarchief-, individuele voertuig- en vergelijkingspagina's. Deze bestanden zijn voorzien van het plugin-versienummer en worden door browsers gecached.
Dynamische inline stijlen. Een <style id="as24ci-dynamic-styles">-blok dat in <head> wordt geïnjecteerd met wp_head prioriteit 99. Dit blok bevat CSS custom property (variabele) declaraties in :root en scoped regels die zijn afgeleid van de Design-instellingen. Dit wordt op elke front-end pagina getoond.

De aanbevolen manier om aangepaste CSS toe te voegen is via het veld Aangepaste CSS in Car Market Hub → Design. De inhoud van dat veld wordt aan het einde van het build-proces toegevoegd aan het dynamische inline stijlblok, na alle andere door de plugin gegenereerde regels. Dit maakt het de meest betrouwbare plaats voor overrides, omdat het op dezelfde pagina en in hetzelfde <style>-blok wordt geladen, na de regels die het overschrijft.

Een alternatieve optie is de style.css van het child-theme of het ingebouwde veld Extra CSS van WordPress (Weergave → Aanpassen → Extra CSS). Deze worden als afzonderlijke stylesheets geladen en de interactie hiervan met de !important-declaraties van de plugin vereist extra aandacht (zie hieronder).

Vereisten

WordPress beheerderstoegang tot Car Market Hub → Design.
Basisbegrip van CSS-selector-specificiteit.
Een browser met ontwikkelaarstools om elementklassen en berekende stijlen te inspecteren.

De CSS-structuur van de plugin begrijpen

Wrapper-klassen

Alle front-end output van de plugin is verpakt in elementen met voorspelbare klassen. Deze klassen zijn de stabiele aanknopingspunten voor aangepaste CSS.

Klasse	Toegepast op	Aanwezig op
`.as24ci-page`	Buitenste wrapper	Alle plugin-pagina's en shortcode-output
`.as24ci-page-classic`	Buitenste wrapper	Individuele voertuigpagina's
`.as24ci-archive-page`	Buitenste wrapper	Voertuigarchiefpagina's en `[as24ci_archive]`-shortcode
`.as24ci-page-inner`	Container voor inhoudsbreedte	Alle plugin-pagina's
`.as24ci-archive-inner`	Container voor archiefinhoud	Voertuigarchief
`.as24ci-archive-list`	Raster of lijst met voertuigen	Archief
`.as24ci-archive-row`	Individuele voertuigkaart	Archief
`.as24ci-card`	Kaartpaneel	Individueel voertuig

Door uw selectoren te beperken onder .as24ci-page zorgt u ervoor dat uw regels geen invloed hebben op andere delen van de pagina.

CSS custom properties

De plugin declareert CSS custom properties (CSS-variabelen) in :root voor alle via Design instelbare waarden. Deze worden ingesteld door de Design-instellingen en zijn de beoogde aanpassingspunten. U kunt ze overschrijven in het veld Aangepaste CSS:

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

Het overschrijven van custom properties is de meest update-bestendige aanpak, omdat deze onafhankelijk werken van de interne HTML-structuur van de plugin.

Specificiteit en `!important`

Sommige regels in het dynamische inline CSS-blok van de plugin gebruiken !important om op betrouwbare wijze actieve themastijlen te overschrijven die op dezelfde elementen zijn gericht (bijvoorbeeld themabrede kopregels). Als u een van deze regels van buiten het dynamische blok moet overschrijven (bijvoorbeeld vanuit een stylesheet van het thema), heeft u mogelijk ook !important nodig. Het veld Aangepaste CSS wordt binnen hetzelfde dynamische blok geladen en heeft daarom dezelfde specificiteitscontext — in de meeste gevallen kunt u plugin-regels van daaruit overschrijven zonder !important.

Stapsgewijze instructies

Het veld Aangepaste CSS gebruiken (aanbevolen)

Ga naar Car Market Hub → Design.
Scrol naar het veld Aangepaste CSS (controleer het exacte label in de huidige plugin-versie).
Voer uw CSS-regels in. Het veld accepteert standaard CSS; HTML-tags worden voor de weergave verwijderd.
Sla de instellingen op.
Wis eventuele paginacache en laad een voertuigpagina opnieuw om te controleren.

Voorbeeld — de achtergrondkleur van de voertuigkaart wijzigen:

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

Voorbeeld — de lettergrootte van de hoofdprijs aanpassen op individuele voertuigpagina's:

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

Voorbeeld — de breedte van de interne inhoud verkleinen:

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

De stylesheet van het child-theme gebruiken

Als u aangepaste CSS liever in versiebeheer bewaart samen met uw thema:

Open de style.css van uw child-theme (of een specifieke custom.css die is opgenomen vanuit functions.php).
Beperk alle selectoren onder .as24ci-page of een specifiekere wrapper-klasse om conflicten met de rest van de site te voorkomen.
Als een regel geen effect heeft omdat een plugin-regel met !important een hogere effectieve specificiteit heeft, probeer dan !important aan uw declaratie toe te voegen of gebruik in plaats daarvan het veld Aangepaste CSS.

Responsief gedrag valideren

De CSS van de plugin is ontworpen om responsief te zijn. Test na het toevoegen van aangepaste regels op de volgende breekpunten met behulp van de ontwikkelaarstools van de browser:

Desktop (≥ 1280 px): Controleer de rasterindeling, de uitlijning van de filterzijbalk en de hero-sectie.
Tablet (768 – 1279 px): Controleer of het archief overschakelt naar een smaller raster en of het filterpaneel toegankelijk is.
Mobiel (< 768 px): Controleer of kaarten verticaal worden gestapeld, afbeeldingen correct schalen en het contactformulier bruikbaar is.

Let speciaal op de width-, max-width-, padding-, margin- en font-size-regels die u toevoegt — absolute pixelwaarden die er op desktop goed uitzien, kunnen de mobiele lay-out verstoren.

Configuratiereferentie

Design-instelling	Wat het regelt	Ingestelde custom property
Primaire kleur	Hoofdkleur van het merk gebruikt voor koppen en de primaire CSS-variabele	`--as24ci-color-primary`, `--as24ci-color-heading`
Accentkleur	Secundaire accent- en prijskleur	`--as24ci-color-accent`, `--as24ci-color-price`
Knopkleur	Standaard knopachtergrond	`--as24ci-color-button`
Knop hover-kleur	Knopachtergrond bij hover	`--as24ci-color-button-hover`
Kaartachtergrond	Achtergrond van kaart-/paneelelementen	`--as24ci-color-bg`
Border-radius	Afgeronde hoeken op kaarten en knoppen	`--as24ci-border-radius`
Typografie (H1 / H2 / H3 / Body)	Lettergrootte, gewicht, regelhoogte en teksttransformatie beperkt tot `.as24ci-page-classic`	Inline regels op `.as24ci-page-classic h1`, `.as24ci-page-classic h2`, enz.
Aangepaste CSS	Vrije CSS toegevoegd aan het einde van het dynamische blok	N.v.t. — letterlijk toegevoegd

Operationele opmerkingen

Stabiliteit bij updates. Klassennamen en HTML-structuur in plugin-templates kunnen tussen plugin-versies veranderen. CSS-selectoren die gericht zijn op diep geneste elementen of zeer specifieke klassecombinaties hebben meer kans om na een update defect te raken. Gebruik waar mogelijk de buitenste stabiele wrapper-klassen (.as24ci-page, .as24ci-page-classic, .as24ci-archive-page) en CSS custom properties.
Versies van stylesheets in de wachtrij. CSS-bestanden van de plugin zijn voorzien van het plugin-versienummer (?ver=x.y.z). Na een plugin-update vragen browsers automatisch de nieuwe versie op. Caching-plugins die query-strings negeren, kunnen een oud CSS-bestand serveren — leeg zowel de paginacache als de CDN-cache na updates.
Veld Aangepaste CSS en HTML-tags. Het veld Aangepaste CSS haalt de inhoud door wp_strip_all_tags() voor de weergave. HTML-tags (waaronder <style>, <script> en </style>) worden verwijderd. Schrijf uitsluitend pure CSS — HTML-wrappers zijn niet nodig.
Vermijd het targeten van interne selectoren zonder wrapper-bereik. Schrijf nooit een regel zoals .as24ci-title-main { color: red; } zonder deze te beperken tot .as24ci-page of .as24ci-page-classic. Een klasse die binnen de template van de plugin wordt gebruikt, zou theoretisch kunnen matchen met elementen elders op de pagina als een andere plugin of een ander thema dezelfde klassenaam gebruikt.
Bewerk plugin-CSS-bestanden niet rechtstreeks. De CSS-bestanden in wp-content/plugins/adp-car-market-hub/templates/css/ worden overschreven wanneer de plugin wordt bijgewerkt. Alle wijzigingen in die bestanden gaan verloren. Gebruik in plaats daarvan het veld Aangepaste CSS of de stylesheet van uw child-theme.
Gebruik van !important. De plugin gebruikt !important in typografie-overrides om ervoor te zorgen dat ze effect hebben over themabrede kopstijlen. Vermijd het willekeurig gebruiken van !important in uw aangepaste CSS — dit maakt toekomstig onderhoud moeilijker. Als u een plugin-regel met !important moet overschrijven, probeer dan eerst de specificiteit van de selector te verhogen.
Typografie-instellingen per pagina. Het tabblad Design bevat afzonderlijke typografiegroepen voor individuele voertuigpagina's, archiefpagina's, favorieten en vergelijkingspagina's. Deze instellingen zijn de beoogde manier om typografie toe te passen die verschilt per paginatype. Gebruik deze voordat u voor hetzelfde doel aangepaste CSS schrijft.

Problemen oplossen

Symptoom	Waarschijnlijke oorzaak	Wat te controleren
Aangepaste CSS uit het Design-veld heeft geen zichtbaar effect.	De paginacache serveert een oude versie van de pagina.	Wis de paginacache en CDN-cache en laad de pagina vervolgens geforceerd opnieuw.
Een regel in de stylesheet van het child-theme overschrijft een plugin-regel niet.	De plugin-regel heeft een `!important`-declaratie of een selector met een hogere specificiteit.	Verhoog de specificiteit van uw regel of verplaats deze naar het veld Aangepaste CSS in de plugin (waar deze na de eigen regels van de plugin wordt toegevoegd).
Aangepaste CSS verstoort de mobiele lay-out.	Een vaste `width` of `font-size` in de aangepaste CSS schaalt niet op smalle schermbreedtes.	Verpak de regel in een `@media`-query of gebruik relatieve eenheden (`%`, `em`, `rem`, `vw`) in plaats van absolute pixels.
Het `as24ci-dynamic-styles`-blok ontbreekt in de paginabron.	Een caching- of HTML-optimalisatieplugin verwijdert inline `<style>`-blokken.	Zet `as24ci-dynamic-styles` op de whitelist in de instellingen van de optimalisatieplugin, of sluit plugin-pagina's uit van de optimalisatie.
Stijlen uit het veld Aangepaste CSS verschijnen in de verkeerde volgorde.	De aangepaste CSS wordt na alle andere plugin-regels in het dynamische blok toegevoegd, dus deze zou altijd moeten winnen, tenzij een andere stylesheet (geladen na `wp_head`) deze overschrijft.	Inspecteer de pagina met de ontwikkelaarstools van de browser om de volgorde van de cascade te controleren.