Problemas de persistencia en custom.css del tema Classic

ignacio_es

Hola a todos,

Estoy teniendo problemas con mi tienda PrestaShop 1.7.3.2. He estado intentando añadir algunos estilos CSS personalizados para los botones y el encabezado de mi tema Classic, usando el archivo themes/classic/assets/css/custom.css.

El problema es que, aunque los cambios se aplican inicialmente, a veces se pierden después de vaciar la caché de PrestaShop o de que los clientes me reportan que no ven los estilos correctamente. He añadido reglas bastante sencillas, como estas:

.btn.btn-primary {
    background-color: #007bff !important;
    border-color: #007bff !important;
    color: #fff;
}
#header .header-top {
    background-color: #f8f9fa;
    padding: 10px 0;
}

¿Alguien sabe por qué mis estilos no se mantienen o por qué el navegador no siempre carga la última versión? Parece que hay algo con la prioridad o la caché que se me escapa. Cualquier ayuda sería bienvenida.

alberto_bici

¡Qué faena, @ignacio_es! Eso de que los estilos desaparezcan es un clásico de PrestaShop. Por lo que describes, y viendo tu código, parece que tienes dos posibles frentes: la especificidad de CSS y la caché.

En cuanto a la especificidad, aunque uses !important, si hay reglas más abajo en theme.css o en otro CSS que se cargue después con el mismo !important y más específico, podrían anularse. Además, en 1.7.3.2, la forma en que PrestaShop compila y combina los CSS a veces puede jugar malas pasadas.

¿Estás seguro de que tu custom.css se carga después de theme.css en el HTML final? Abre las herramientas de desarrollador de tu navegador (F12) y mira el orden de carga en la pestaña 'Network' y luego inspecciona los elementos para ver qué reglas CSS se están aplicando.

alvaroshop99

Yo le añadiría a lo que comenta @alberto_bici, que en PrestaShop 1.7.x es fundamental la gestión de caché. No solo la de PrestaShop (en 'Parámetros avanzados > Rendimiento'), sino también la caché del navegador de tus usuarios. A veces, aunque tú vacíes todo, si el cliente ya tenía una versión antigua del CSS en su navegador, seguirá viéndolo mal hasta que no refresque la caché de su propio navegador (Ctrl+F5 o Shift+F5).

También es importante verificar los permisos del archivo custom.css y de la carpeta assets/css. Asegúrate de que el servidor web tiene permisos de lectura para ese archivo, aunque si se aplica al principio, lo más probable es que no sea eso. ¿Estás usando un tema hijo? Si no, cualquier actualización del tema Classic podría sobrescribir tu custom.css si lo tienes directamente en la carpeta del tema padre.

Milo

Hola @ignacio_es, entiendo perfectamente tu frustración con los estilos CSS que no persisten. Es un problema común en PrestaShop 1.7.3.2 si no se siguen algunas pautas.

El archivo themes/classic/assets/css/custom.css está diseñado para tus estilos personalizados y el tema Classic lo incluye automáticamente. Sin embargo, para asegurar que tus reglas CSS tengan la prioridad adecuada y no se vean afectadas por la caché o futuras actualizaciones del tema (si no usas un tema hijo), hay que verificar lo siguiente:

Ubicación y carga: El archivo debe estar en themes/classic/assets/css/custom.css. El tema Classic lo registra por defecto, por lo que no necesitas modificar ningún .tpl o hook para que se cargue.
Especificidad CSS: Los estilos del theme.css a menudo son muy específicos. Para sobrescribir una regla, tu selector debe ser igual o más específico, o cargarse después de la regla original. Aunque !important funciona, es mejor evitarlo si se puede, ya que puede complicar el mantenimiento. Puedes aumentar la especificidad usando selectores más largos o IDs.
Caché de PrestaShop: Después de cualquier cambio en custom.css, es IMPRESCINDIBLE ir a Parámetros avanzados > Rendimiento y hacer clic en 'Borrar la caché'. Esto forzará a PrestaShop a recompilar y generar un nuevo theme.css (que incluye tu custom.css).
Caché del navegador: Como bien apunta @alvaroshop99, tus clientes (y tú mismo) deben vaciar la caché de su navegador (Ctrl+F5 o Shift+F5) para ver los cambios.

Para el ejemplo que proporcionaste, tus reglas están bien. El problema es casi seguro la caché o la especificidad. Si quieres asegurar que tus botones tengan ese estilo incluso con !important y que no se pierda, te sugiero que hagas tu selector aún más específico. Por ejemplo:

/* Estilos para el botón principal del carrito o checkout */
#wrapper .btn.btn-primary.add-to-cart {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}
/* Estilos para el encabezado, asegurando que se aplique */
body#content #header .header-top {
    background-color: #f8f9fa;
    padding: 10px 0;

Al añadir body#content o add-to-cart al selector, aumentamos la especificidad sin depender tanto de !important. Aplica estos cambios en tu custom.css, vacía la caché de PrestaShop y luego la de tu navegador. Debería funcionar y persistir.

ignacio_es

¡Muchísimas gracias, @Milo! ¡Eso era exactamente! Seguí tus pasos, puse los selectores más específicos como me indicaste en mi custom.css, vacié la caché de PrestaShop en Parámetros avanzados > Rendimiento y luego la del navegador.

Y... ¡voilà! Los estilos están ahí y no se van. Parece que la combinación de la especificidad y el orden de vaciado de caché era lo que me estaba fallando. @alberto_bici y @alvaroshop99, vuestros comentarios también me ayudaron a entender mejor dónde buscar. ¡Problema resuelto!