Documentación · Guía de integración

Guía de CSS personalizado

Este documento explica cómo personalizar la apariencia visual del plugin ADP Car Market Hub de forma segura mediante CSS, qué enfoques son estables frente a las actualizaciones del plugin y cómo evitar sobrescrituras que puedan romperse cuando el plugin cambie.

Cuándo utilizar este documento

Utilice este documento si está:

Ajustando colores, fuentes, espaciados u otros detalles visuales en las páginas de vehículos más allá de lo que ofrecen los ajustes de Car Market Hub → Diseño.
Añadiendo correcciones adaptables (responsive) para tamaños de pantalla específicos.
Escribiendo reglas CSS en la hoja de estilos de su tema hijo (child theme) dirigidas a elementos del plugin.
Revisando sobrescrituras CSS existentes después de una actualización del plugin.

Comience con Car Market Hub → Diseño antes de escribir cualquier CSS personalizado. Los ajustes de Diseño ya cubren los colores primarios, colores de botones, tipografía (H1 / H2 / H3 / cuerpo), tamaños de fuente, radio de borde y más. El CSS personalizado solo es necesario para aquellos ajustes que la configuración de Diseño no expone.

Descripción general

El plugin genera su CSS para el front-end en dos lugares:

Hojas de estilo en cola (enqueued). Archivos CSS cargados a través de WordPress de wp_enqueue_style() en las páginas de archivo de vehículos, vehículo individual y comparación. Estos archivos llevan la versión del número de versión del plugin y los navegadores los almacenan en caché.
Estilos dinámicos en línea. Un bloque <style id="as24ci-dynamic-styles"> inyectado en <head> con prioridad 99 de wp_head. Este bloque contiene declaraciones de propiedades personalizadas de CSS (variables) en :root y reglas específicas derivadas de los ajustes de Diseño. Se genera en todas las páginas del front-end.

La forma recomendada de añadir CSS personalizado es el campo CSS personalizado en Car Market Hub → Diseño. El contenido de ese campo se añade al final del bloque de estilos dinámicos en línea al finalizar el proceso de generación, después de todas las demás reglas generadas por el plugin. Esto lo convierte en el lugar más fiable para las sobrescrituras porque se carga en la misma página y en el mismo bloque <style>, después de las reglas que está sobrescribiendo.

Una opción secundaria es el archivo style.css del tema hijo o el campo integrado CSS adicional de WordPress (Apariencia → Personalizar → CSS adicional). Estos se cargan como hojas de estilo independientes y su interacción con las declaraciones !important del plugin requiere atención (ver más abajo).

Requisitos previos

Acceso de administrador de WordPress a Car Market Hub → Diseño.
Comprensión básica de la especificidad de los selectores CSS.
Un navegador con herramientas de desarrollo para inspeccionar las clases de los elementos y los estilos calculados.

Comprensión de la estructura CSS del plugin

Clases contenedoras (wrapper)

Todo el contenido front-end del plugin está envuelto en elementos que llevan clases predecibles. Estas clases son los puntos de anclaje estables para el CSS personalizado.

Clase	Aplicada a	Presente en
`.as24ci-page`	Contenedor más externo	Todas las páginas del plugin y salidas de shortcodes
`.as24ci-page-classic`	Contenedor más externo	Páginas de vehículo individual
`.as24ci-archive-page`	Contenedor más externo	Páginas de archivo de vehículos y shortcode `[as24ci_archive]`
`.as24ci-page-inner`	Contenedor de ancho de contenido	Todas las páginas del plugin
`.as24ci-archive-inner`	Contenedor de contenido de archivo	Archivo de vehículos
`.as24ci-archive-list`	Cuadrícula o lista de vehículos	Archivo
`.as24ci-archive-row`	Tarjeta de vehículo individual	Archivo
`.as24ci-card`	Panel de tarjeta	Vehículo individual

Limitar el alcance de sus selectores bajo .as24ci-page garantiza que sus reglas no afecten a otras partes de la página.

Propiedades personalizadas de CSS

El plugin declara propiedades personalizadas de CSS (variables CSS) en :root para todos los valores controlables desde el diseño. Estas se configuran mediante los ajustes de Diseño y son los puntos de personalización previstos. Puede sobrescribirlas en el campo CSS personalizado:

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

Las sobrescrituras de propiedades personalizadas son el enfoque más estable frente a las actualizaciones porque funcionan independientemente de la estructura HTML interna del plugin.

Especificidad y `!important`

Algunas reglas en el bloque CSS dinámico en línea del plugin utilizan !important para sobrescribir de forma fiable los estilos activos del tema que se dirigen a los mismos elementos (por ejemplo, reglas de encabezados a nivel de tema). Si necesita sobrescribir una de estas reglas desde fuera del bloque dinámico (por ejemplo, desde una hoja de estilos del tema), es posible que también necesite !important. El campo CSS personalizado se carga dentro del mismo bloque dinámico y, por lo tanto, tiene el mismo contexto de especificidad; en la mayoría de los casos, puede sobrescribir las reglas del plugin desde allí sin !important.

Instrucciones paso a paso

Uso del campo CSS personalizado (recomendado)

Vaya a Car Market Hub → Diseño.
Desplácese hasta el campo CSS personalizado (verifique la etiqueta exacta en la versión actual del plugin).
Introduzca sus reglas CSS. El campo acepta CSS estándar; las etiquetas HTML se eliminan antes de la salida.
Guarde los ajustes.
Limpie cualquier caché de página y vuelva a cargar una página de vehículo para verificar.

Ejemplo: cambiar el color de fondo de la tarjeta de vehículo:

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

Ejemplo: ajustar el tamaño de fuente del precio principal en las páginas de vehículo individual:

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

Ejemplo: reducir el ancho del contenido interno:

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

Uso de la hoja de estilos del tema hijo

Si prefiere mantener el CSS personalizado en el control de versiones junto con su tema:

Abra el archivo style.css de su tema hijo (o un archivo custom.css dedicado incluido desde functions.php).
Limite el alcance de todos los selectores bajo .as24ci-page o una clase contenedora más específica para evitar conflictos con el resto del sitio.
Si una regla no se aplica porque una regla del plugin con !important tiene una especificidad efectiva mayor, intente añadir !important a su declaración o utilice el campo CSS personalizado en su lugar.

Validación del comportamiento adaptable (responsive)

El CSS del plugin está diseñado para ser adaptable. Después de añadir reglas personalizadas, realice pruebas en los siguientes puntos de ruptura (breakpoints) utilizando las herramientas de desarrollo del navegador:

Escritorio (≥ 1280 px): Confirme el diseño de cuadrícula, la alineación de la barra lateral de filtros y la sección principal (hero).
Tableta (768 – 1279 px): Confirme que el archivo cambia a una cuadrícula más estrecha y que el panel de filtros es accesible.
Móvil (< 768 px): Confirme que las tarjetas se apilan verticalmente, las imágenes se escalan correctamente y el formulario de contacto es utilizable.

Preste especial atención a las reglas width, max-width, padding, margin y font-size que añada; los valores de píxeles absolutos que se ven bien en escritorio pueden romper el diseño móvil.

Referencia de configuración

Ajuste de diseño	Qué controla	Propiedad personalizada establecida
Color primario	Color principal de la marca utilizado para los encabezados y la variable CSS primaria	`--as24ci-color-primary`, `--as24ci-color-heading`
Color de acento	Color secundario de destaque y precio	`--as24ci-color-accent`, `--as24ci-color-price`
Color del botón	Fondo predeterminado del botón	`--as24ci-color-button`
Color de hover del botón	Fondo del botón al pasar el cursor	`--as24ci-color-button-hover`
Fondo de tarjeta	Fondo de los elementos de tarjeta/panel	`--as24ci-color-bg`
Radio de borde	Esquinas redondeadas en tarjetas y botones	`--as24ci-border-radius`
Tipografía (H1 / H2 / H3 / Cuerpo)	Tamaño de fuente, grosor, altura de línea y transformación de texto limitados a `.as24ci-page-classic`	Reglas en línea en `.as24ci-page-classic h1`, `.as24ci-page-classic h2`, etc.
CSS personalizado	CSS de formato libre añadido al final del bloque dinámico	N/A — se añade textualmente

Notas de funcionamiento

Estabilidad ante actualizaciones. Los nombres de las clases y la estructura HTML en las plantillas del plugin pueden cambiar entre versiones del plugin. Los selectores CSS que se dirigen a elementos profundamente anidados o combinaciones de clases muy específicas tienen más probabilidades de romperse tras una actualización. Utilice las clases contenedoras estables más externas (.as24ci-page, .as24ci-page-classic, .as24ci-archive-page) y las propiedades personalizadas de CSS siempre que sea posible.
Versiones de hojas de estilo en cola. Los archivos CSS del plugin llevan la versión del número de versión del plugin (?ver=x.y.z). Después de una actualización del plugin, los navegadores solicitan la nueva versión automáticamente. Los plugins de caché que ignoran las cadenas de consulta (query strings) pueden servir un archivo CSS antiguo; vacíe tanto la caché de la página como la caché de la CDN después de las actualizaciones.
Campo CSS personalizado y etiquetas HTML. El campo CSS personalizado pasa su contenido a través de wp_strip_all_tags() antes de la salida. Las etiquetas HTML (incluyendo <style>, <script> y </style>) se eliminan. Escriba únicamente CSS puro; no se necesitan contenedores HTML.
Evite dirigirse a selectores internos sin un alcance contenedor. Nunca escriba una regla como .as24ci-title-main { color: red; } sin limitar su alcance a .as24ci-page o .as24ci-page-classic. Una clase utilizada dentro de la plantilla del plugin podría teóricamente coincidir con elementos en otra parte de la página si otro plugin o tema utiliza el mismo nombre de clase.
No edite los archivos CSS del plugin directamente. Los archivos CSS dentro de wp-content/plugins/adp-car-market-hub/templates/css/ se sobrescriben cuando el plugin se actualiza. Cualquier cambio realizado en esos archivos se perderá. Utilice el campo CSS personalizado o la hoja de estilos de su tema hijo en su lugar.
Uso de !important. El plugin utiliza !important en las sobrescrituras de tipografía para garantizar que tengan efecto sobre los estilos de encabezado de todo el tema. Evite utilizar !important de forma indiscriminada en su CSS personalizado; dificulta el mantenimiento futuro. Si necesita sobrescribir una regla !important del plugin, intente aumentar primero la especificidad del selector.
Ajustes de tipografía por página. La pestaña Diseño incluye grupos de tipografía independientes para las páginas de vehículo individual, páginas de archivo, favoritos y páginas de comparación. Estos ajustes son la forma prevista de aplicar una tipografía que difiera entre tipos de página. Utilícelos antes de escribir CSS personalizado para el mismo propósito.

Resolución de problemas

Síntoma	Causa probable	Qué comprobar
El CSS personalizado del campo de Diseño no tiene ningún efecto visible.	La caché de la página está sirviendo una versión antigua de la página.	Limpie la caché de la página y la caché de la CDN, luego recargue la página por completo (hard-reload).
Una regla en la hoja de estilos del tema hijo no sobrescribe una regla del plugin.	La regla del plugin tiene una declaración `!important` o un selector de mayor especificidad.	Aumente la especificidad de su regla o muévala al campo CSS personalizado en el plugin (donde se añade después de las propias reglas del plugin).
El CSS personalizado rompe el diseño móvil.	Un valor fijo de `width` o `font-size` en el CSS personalizado no se escala en anchos de pantalla pequeños.	Envuelva la regla en una consulta `@media` o utilice unidades relativas (`%`, `em`, `rem`, `vw`) en lugar de píxeles absolutos.
Falta el bloque `as24ci-dynamic-styles` en el código fuente de la página.	Un plugin de caché o de optimización HTML está eliminando los bloques `<style>` en línea.	Añada `as24ci-dynamic-styles` a la lista de permitidos en los ajustes del plugin de optimización, o excluya las páginas del plugin de la optimización.
Los estilos del campo CSS personalizado aparecen en el orden incorrecto.	El CSS personalizado se añade después de todas las demás reglas del plugin en el bloque dinámico, por lo que siempre debería prevalecer a menos que otra hoja de estilos (cargada después de `wp_head`) lo sobrescriba.	Inspeccione la página con las herramientas de desarrollo del navegador para comprobar el orden de la cascada.