Documentation · Integration Guide

Custom CSS Guide

This document explains how to customise the visual appearance of the ADP Car Market Hub plugin safely using CSS, which approaches are stable across plugin updates, and how to avoid overrides that may break when the plugin changes.

When to use this document

Use this document if you are:

Adjusting colours, fonts, spacing, or other visual details on vehicle pages beyond what the Car Market Hub → Design settings offer.
Adding responsive corrections for specific screen sizes.
Writing CSS rules in your child theme's stylesheet that target plugin elements.
Reviewing existing CSS overrides after a plugin update.

Start with Car Market Hub → Design before writing any custom CSS. The Design settings already cover primary colours, button colours, typography (H1 / H2 / H3 / body), font sizes, border radius, and more. Custom CSS is only necessary for adjustments that the Design settings do not expose.

Overview

The plugin outputs its front-end CSS in two places:

Enqueued stylesheets. CSS files loaded via WordPress's wp_enqueue_style() on vehicle archive, single vehicle, and compare pages. These files are versioned with the plugin version number and cached by browsers.
Dynamic inline styles. A <style id="as24ci-dynamic-styles"> block injected in <head> at wp_head priority 99. This block contains CSS custom property (variable) declarations in :root and scoped rules derived from the Design settings. It is output on every front-end page.

The recommended way to add custom CSS is the Custom CSS field in Car Market Hub → Design. That field's content is appended to the dynamic inline styles block at the end of the build process, after all other plugin-generated rules. This makes it the most reliable place for overrides because it is loaded on the same page and in the same <style> block, after the rules it is overriding.

A secondary option is the child theme's style.css or WordPress's built-in Additional CSS field (Appearance → Customize → Additional CSS). These are loaded as separate stylesheets and their interaction with the plugin's !important declarations requires attention (see below).

Prerequisites

WordPress administrator access to Car Market Hub → Design.
Basic understanding of CSS selector specificity.
A browser with developer tools to inspect element classes and computed styles.

Understanding the plugin's CSS structure

Wrapper classes

All plugin front-end output is wrapped in elements that carry predictable classes. These classes are the stable hook points for custom CSS.

Class	Applied to	Present on
`.as24ci-page`	Outermost wrapper	All plugin pages and shortcode output
`.as24ci-page-classic`	Outermost wrapper	Single vehicle pages
`.as24ci-archive-page`	Outermost wrapper	Vehicle archive pages and `[as24ci_archive]` shortcode
`.as24ci-page-inner`	Content width container	All plugin pages
`.as24ci-archive-inner`	Archive content container	Vehicle archive
`.as24ci-archive-list`	Vehicle listing grid or list	Archive
`.as24ci-archive-row`	Individual vehicle card	Archive
`.as24ci-card`	Card panel	Single vehicle

Scoping your selectors under .as24ci-page ensures that your rules do not affect other parts of the page.

CSS custom properties

The plugin declares CSS custom properties (CSS variables) in :root for all design-controllable values. These are set by the Design settings and are the intended customisation points. You can override them in the Custom CSS field:

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

Custom property overrides are the most update-stable approach because they work independently of the plugin's internal HTML structure.

Specificity and `!important`

Some rules in the plugin's dynamic inline CSS block use !important to reliably override active theme styles that target the same elements (for example, theme-wide heading rules). If you need to override one of these rules from outside the dynamic block (for example from a theme stylesheet), you may also need !important. The Custom CSS field is loaded inside the same dynamic block and therefore has the same specificity context — in most cases you can override plugin rules from there without !important.

Step by step instructions

Using the Custom CSS field (recommended)

Go to Car Market Hub → Design.
Scroll to the Custom CSS field (verify the exact label in the current plugin version).
Enter your CSS rules. The field accepts standard CSS; HTML tags are stripped before output.
Save the settings.
Clear any page cache and reload a vehicle page to verify.

Example — changing the vehicle card background colour:

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

Example — adjusting the hero price font size on single vehicle pages:

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

Example — reducing the inner content width:

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

Using the child theme stylesheet

If you prefer to keep custom CSS in version control alongside your theme:

Open your child theme's style.css (or a dedicated custom.css included from functions.php).
Scope all selectors under .as24ci-page or a more specific wrapper class to avoid conflicts with the rest of the site.
If a rule does not take effect because a plugin rule with !important has higher effective specificity, try adding !important to your declaration or use the Custom CSS field instead.

Validating responsive behaviour

The plugin's CSS is designed to be responsive. After adding custom rules, test at the following breakpoints using browser developer tools:

Desktop (≥ 1280 px): Confirm the grid layout, filter sidebar alignment, and hero section.
Tablet (768 – 1279 px): Confirm that the archive switches to a narrower grid and that the filter panel is accessible.
Mobile (< 768 px): Confirm that cards stack vertically, images scale correctly, and the contact form is usable.

Pay special attention to width, max-width, padding, margin, and font-size rules you add — absolute pixel values that look fine on desktop can break the mobile layout.

Configuration reference

Design setting	What it controls	Custom property set
Primary colour	Main brand colour used for headings and the primary CSS variable	`--as24ci-color-primary`, `--as24ci-color-heading`
Accent colour	Secondary highlight and price colour	`--as24ci-color-accent`, `--as24ci-color-price`
Button colour	Default button background	`--as24ci-color-button`
Button hover colour	Button background on hover	`--as24ci-color-button-hover`
Card background	Background of card/panel elements	`--as24ci-color-bg`
Border radius	Rounded corners on cards and buttons	`--as24ci-border-radius`
Typography (H1 / H2 / H3 / Body)	Font size, weight, line height, and text transform scoped to `.as24ci-page-classic`	Inline rules on `.as24ci-page-classic h1`, `.as24ci-page-classic h2`, etc.
Custom CSS	Free-form CSS appended at the end of the dynamic block	N/A — appended verbatim

Operational notes

Update stability. Class names and HTML structure in plugin templates can change between plugin versions. CSS selectors that target deeply nested elements or very specific class combinations are more likely to break after an update. Use the outermost stable wrapper classes (.as24ci-page, .as24ci-page-classic, .as24ci-archive-page) and CSS custom properties wherever possible.
Enqueued stylesheet versions. Plugin CSS files are versioned with the plugin version number (?ver=x.y.z). After a plugin update, browsers request the new version automatically. Caching plugins that ignore query strings may serve an old CSS file — flush both the page cache and the CDN cache after updates.
Custom CSS field and HTML tags. The Custom CSS field passes its content through wp_strip_all_tags() before output. HTML tags (including <style>, <script>, and </style>) are stripped. Write plain CSS only — no HTML wrappers are needed.
Avoid targeting internal selectors without a wrapper scope. Never write a rule like .as24ci-title-main { color: red; } without scoping it to .as24ci-page or .as24ci-page-classic. A class used inside the plugin's template could theoretically match elements elsewhere on the page if another plugin or theme uses the same class name.
Do not edit plugin CSS files directly. The CSS files inside wp-content/plugins/adp-car-market-hub/templates/css/ are overwritten when the plugin updates. Any changes made to those files are lost. Use the Custom CSS field or your child theme stylesheet instead.
!important usage. The plugin uses !important in typography overrides to ensure they take effect over theme-wide heading styles. Avoid using !important indiscriminately in your custom CSS — it makes future maintenance harder. If you need to override a plugin !important rule, try increasing selector specificity first.
Per-page typography settings. The Design tab includes separate typography groups for single vehicle pages, archive pages, favorites, and compare pages. These settings are the intended way to apply typography that differs between page types. Use them before writing custom CSS for the same purpose.

Troubleshooting

Symptom	Likely cause	What to check
Custom CSS from the Design field has no visible effect.	The page cache is serving an old version of the page.	Clear the page cache and CDN cache, then hard-reload the page.
A rule in the child theme stylesheet does not override a plugin rule.	The plugin rule has a `!important` declaration or a higher-specificity selector.	Increase the specificity of your rule, or move it into the Custom CSS field in the plugin (where it is appended after the plugin's own rules).
Custom CSS breaks the mobile layout.	A fixed `width` or `font-size` in the custom CSS does not scale at small screen widths.	Wrap the rule in a `@media` query or use relative units (`%`, `em`, `rem`, `vw`) instead of absolute pixels.
The `as24ci-dynamic-styles` block is missing from the page source.	A caching or HTML optimisation plugin is stripping inline `<style>` blocks.	Whitelist `as24ci-dynamic-styles` in the optimisation plugin's settings, or exclude plugin pages from the optimisation.
Styles from the Custom CSS field appear in the wrong order.	The custom CSS is appended after all other plugin rules in the dynamic block, so it should always win unless another stylesheet (loaded after `wp_head`) overrides it.	Inspect the page with browser developer tools to check the cascade order.