Documentation · Guide d'intégration

Guide CSS personnalisé

Ce document explique comment personnaliser l'apparence visuelle de l'extension ADP Car Market Hub en toute sécurité à l'aide de CSS, quelles approches sont stables d'une mise à jour à l'autre de l'extension, et comment éviter les surcharges susceptibles de se rompre lors des modifications de l'extension.

Quand utiliser ce document

Utilisez ce document si vous devez :

Ajuster les couleurs, les polices, les espacements ou d'autres détails visuels sur les pages de véhicules au-delà de ce que proposent les réglages de Car Market Hub → Design.
Ajouter des corrections responsives pour des tailles d'écran spécifiques.
Écrire des règles CSS dans la feuille de style de votre thème enfant qui ciblent les éléments de l'extension.
Revoir les surcharges CSS existantes après une mise à jour de l'extension.

Commencez par Car Market Hub → Design avant d'écrire du CSS personnalisé. Les réglages de Design couvrent déjà les couleurs principales, les couleurs des boutons, la typographie (H1 / H2 / H3 / corps de texte), les tailles de police, le rayon de bordure, et bien plus encore. Le CSS personnalisé n'est nécessaire que pour les ajustements que les réglages de Design ne permettent pas de configurer.

Aperçu

L'extension génère son CSS front-end à deux endroits :

Feuilles de style mises en file d'attente. Fichiers CSS chargés via le WordPress de wp_enqueue_style() sur les pages d'archive de véhicules, de véhicule unique et de comparaison. Ces fichiers comportent un numéro de version correspondant à celui de l'extension et sont mis en cache par les navigateurs.
Styles en ligne dynamiques. Un bloc <style id="as24ci-dynamic-styles"> injecté dans <head> à la priorité wp_head 99. Ce bloc contient des déclarations de propriétés personnalisées CSS (variables) dans :root et des règles spécifiques dérivées des réglages de Design. Il est généré sur chaque page du front-end.

La méthode recommandée pour ajouter du CSS personnalisé est le champ CSS personnalisé dans Car Market Hub → Design. Le contenu de ce champ est ajouté au bloc de styles en ligne dynamiques à la fin du processus de génération, après toutes les autres règles générées par l'extension. Cela en fait l'emplacement le plus fiable pour les surcharges, car il est chargé sur la même page et dans le même bloc <style>, après les règles qu'il surcharge.

Une option secondaire consiste à utiliser le fichier style.css du thème enfant ou le champ intégré CSS additionnel de WordPress (Apparence → Personnaliser → CSS additionnel). Ceux-ci sont chargés en tant que feuilles de style distinctes et leur interaction avec les déclarations !important de l'extension nécessite une attention particulière (voir ci-dessous).

Prérequis

Accès administrateur WordPress à Car Market Hub → Design.
Compréhension de base de la spécificité des sélecteurs CSS.
Un navigateur équipé d'outils de développement pour inspecter les classes d'éléments et les styles calculés.

Comprendre la structure CSS de l'extension

Classes de conteneur (wrapper)

Tous les éléments générés par l'extension sur le front-end sont enveloppés dans des conteneurs dotés de classes prévisibles. Ces classes constituent les points d'ancrage stables pour le CSS personnalisé.

Classe	Appliquée à	Présente sur
`.as24ci-page`	Conteneur le plus externe	Toutes les pages de l'extension et les codes courts (shortcodes)
`.as24ci-page-classic`	Conteneur le plus externe	Pages de véhicule unique
`.as24ci-archive-page`	Conteneur le plus externe	Pages d'archive de véhicules et code court `[as24ci_archive]`
`.as24ci-page-inner`	Conteneur de largeur de contenu	Toutes les pages de l'extension
`.as24ci-archive-inner`	Conteneur de contenu d'archive	Archive de véhicules
`.as24ci-archive-list`	Grille ou liste de véhicules	Archive
`.as24ci-archive-row`	Carte de véhicule individuelle	Archive
`.as24ci-card`	Panneau de carte	Véhicule unique

Limiter la portée de vos sélecteurs sous .as24ci-page garantit que vos règles n'affecteront pas d'autres parties de la page.

Propriétés personnalisées CSS

L'extension déclare des propriétés personnalisées CSS (variables CSS) dans :root pour toutes les valeurs contrôlables par le design. Celles-ci sont définies par les réglages de Design et constituent les points de personnalisation prévus. Vous pouvez les surcharger dans le champ CSS personnalisé :

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

Les surcharges de propriétés personnalisées constituent l'approche la plus stable face aux mises à jour, car elles fonctionnent indépendamment de la structure HTML interne de l'extension.

Spécificité et `!important`

Certaines règles du bloc CSS en ligne dynamique de l'extension utilisent !important pour surcharger de manière fiable les styles de thèmes actifs qui ciblent les mêmes éléments (par exemple, les règles de titre à l'échelle du thème). Si vous devez surcharger l'une de ces règles depuis l'extérieur du bloc dynamique (par exemple depuis une feuille de style de thème), vous pourriez également avoir besoin de !important. Le champ CSS personnalisé est chargé à l'intérieur du même bloc dynamique et bénéficie donc du même contexte de spécificité — dans la plupart des cas, vous pouvez y surcharger les règles de l'extension sans utiliser !important.

Instructions étape par étape

Utilisation du champ CSS personnalisé (recommandé)

Allez dans Car Market Hub → Design.
Faites défiler jusqu'au champ CSS personnalisé (vérifiez le libellé exact dans la version actuelle de l'extension).
Saisissez vos règles CSS. Le champ accepte le CSS standard ; les balises HTML sont supprimées avant la génération.
Enregistrez les réglages.
Videz le cache de votre page et rechargez une page de véhicule pour vérifier le résultat.

Exemple — modification de la couleur d'arrière-plan de la carte de véhicule :

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

Exemple — ajustement de la taille de police du prix principal sur les pages de véhicule unique :

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

Exemple — réduction de la largeur du contenu interne :

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

Utilisation de la feuille de style du thème enfant

Si vous préférez conserver le CSS personnalisé dans un système de contrôle de version aux côtés de votre thème :

Ouvrez le fichier style.css de votre thème enfant (ou un fichier custom.css dédié inclus depuis functions.php).
Limitez la portée de tous les sélecteurs sous .as24ci-page ou une classe de conteneur plus spécifique pour éviter les conflits avec le reste du site.
Si une règle ne s'applique pas parce qu'une règle de l'extension avec !important présente une spécificité effective plus élevée, essayez d'ajouter !important à votre déclaration ou utilisez plutôt le champ CSS personnalisé.

Validation du comportement responsive

Le CSS de l'extension est conçu pour être responsive. Après avoir ajouté des règles personnalisées, testez-les aux points de rupture (breakpoints) suivants à l'aide des outils de développement de votre navigateur :

Ordinateur de bureau (≥ 1280 px) : Confirmez la disposition de la grille, l'alignement de la barre latérale de filtrage et la section principale (hero).
Tablette (768 – 1279 px) : Confirmez que l'archive passe à une grille plus étroite et que le panneau de filtrage reste accessible.
Mobile (< 768 px) : Confirmez que les cartes s'empilent verticalement, que les images se redimensionnent correctement et que le formulaire de contact est utilisable.

Portez une attention particulière aux règles width, max-width, padding, margin et font-size que vous ajoutez — les valeurs absolues en pixels qui s'affichent correctement sur ordinateur peuvent altérer la mise en page mobile.

Référence de configuration

Réglage de Design	Ce qu'il contrôle	Propriété personnalisée définie
Couleur primaire	Couleur principale de la marque utilisée pour les titres et variable CSS principale	`--as24ci-color-primary`, `--as24ci-color-heading`
Couleur d'accentuation	Couleur secondaire de mise en valeur et du prix	`--as24ci-color-accent`, `--as24ci-color-price`
Couleur des boutons	Arrière-plan par défaut des boutons	`--as24ci-color-button`
Couleur de survol des boutons	Arrière-plan des boutons au survol	`--as24ci-color-button-hover`
Arrière-plan des cartes	Arrière-plan des éléments de carte/panneau	`--as24ci-color-bg`
Rayon de bordure	Coins arrondis sur les cartes et les boutons	`--as24ci-border-radius`
Typographie (H1 / H2 / H3 / Corps)	Taille de police, graisse, hauteur de ligne et transformation de texte limitées à `.as24ci-page-classic`	Règles en ligne sur `.as24ci-page-classic h1`, `.as24ci-page-classic h2`, etc.
CSS personnalisé	CSS libre ajouté à la fin du bloc dynamique	N/A — ajouté textuellement

Notes opérationnelles

Stabilité des mises à jour. Les noms de classes et la structure HTML dans les modèles de l'extension peuvent changer d'une version à l'autre. Les sélecteurs CSS qui ciblent des éléments profondément imbriqués ou des combinaisons de classes très spécifiques sont plus susceptibles de se rompre après une mise à jour. Utilisez autant que possible les classes de conteneur stables les plus externes (.as24ci-page, .as24ci-page-classic, .as24ci-archive-page) et les propriétés personnalisées CSS.
Versions des feuilles de style mises en file d'attente. Les fichiers CSS de l'extension comportent un numéro de version correspondant à celui de l'extension (?ver=x.y.z). Après une mise à jour de l'extension, les navigateurs demandent automatiquement la nouvelle version. Les extensions de mise en cache qui ignorent les chaînes de requête (query strings) peuvent servir un ancien fichier CSS — videz le cache de la page ainsi que le cache du CDN après les mises à jour.
Champ CSS personnalisé et balises HTML. Le champ CSS personnalisé passe son contenu par wp_strip_all_tags() avant la génération. Les balises HTML (y compris <style>, <script> et </style>) sont supprimées. Écrivez uniquement du CSS brut — aucun conteneur HTML n'est nécessaire.
Évitez de cibler des sélecteurs internes sans portée de conteneur. N'écrivez jamais de règle comme .as24ci-title-main { color: red; } sans limiter sa portée à .as24ci-page ou .as24ci-page-classic. Une classe utilisée à l'intérieur du modèle de l'extension pourrait théoriquement correspondre à des éléments situés ailleurs sur la page si une autre extension ou un autre thème utilise le même nom de classe.
Ne modifiez pas directement les fichiers CSS de l'extension. Les fichiers CSS situés dans wp-content/plugins/adp-car-market-hub/templates/css/ sont écrasés lors des mises à jour de l'extension. Toutes les modifications apportées à ces fichiers seront perdues. Utilisez plutôt le champ CSS personnalisé ou la feuille de style de votre thème enfant.
Utilisation de !important. L'extension utilise !important dans les surcharges de typographie pour s'assurer qu'elles l'emportent sur les styles de titres définis à l'échelle du thème. Évitez d'utiliser !important de manière abusive dans votre CSS personnalisé — cela complique la maintenance future. Si vous devez surcharger une règle !important de l'extension, essayez d'abord d'augmenter la spécificité du sélecteur.
Réglages de typographie par page. L'onglet Design comprend des groupes de typographie distincts pour les pages de véhicule unique, les pages d'archive, les favoris et les pages de comparaison. Ces réglages constituent la méthode prévue pour appliquer une typographie différente selon les types de pages. Utilisez-les avant d'écrire du CSS personnalisé dans le même but.

Dépannage

Symptôme	Cause probable	Ce qu'il faut vérifier
Le CSS personnalisé du champ Design n'a aucun effet visible.	Le cache de la page sert une ancienne version de la page.	Videz le cache de la page et le cache du CDN, puis effectuez un rechargement forcé de la page.
Une règle de la feuille de style du thème enfant ne surcharge pas une règle de l'extension.	La règle de l'extension comporte une déclaration `!important` ou un sélecteur de spécificité plus élevée.	Augmentez la spécificité de votre règle, ou déplacez-la dans le champ CSS personnalisé de l'extension (où elle est ajoutée après les propres règles de l'extension).
Le CSS personnalisé altère la mise en page mobile.	Une valeur fixe `width` ou `font-size` dans le CSS personnalisé ne s'adapte pas aux petites largeurs d'écran.	Enveloppez la règle dans une requête `@media` ou utilisez des unités relatives (`%`, `em`, `rem`, `vw`) au lieu de pixels absolus.
Le bloc `as24ci-dynamic-styles` est absent du code source de la page.	Une extension de mise en cache ou d'optimisation HTML supprime les blocs `<style>` en ligne.	Ajoutez `as24ci-dynamic-styles` à la liste d'autorisation dans les réglages de l'extension d'optimisation, ou excluez les pages de l'extension de l'optimisation.
Les styles du champ CSS personnalisé apparaissent dans le mauvais ordre.	Le CSS personnalisé est ajouté après toutes les autres règles de l'extension dans le bloc dynamique, il devrait donc toujours l'emporter à moins qu'une autre feuille de style (chargée après `wp_head`) ne le surcharge.	Inspectez la page avec les outils de développement du navigateur pour vérifier l'ordre de la cascade.