Estilos CSS personalizados en tema Classic no persisten

ana_cart

Hola a todos,

Estoy intentando aplicar estilos CSS personalizados en mi tienda PrestaShop, específicamente para botones y la cabecera, y los estoy añadiendo en themes/classic/assets/css/custom.css. El problema es que mis estilos no se aplican de forma consistente. A veces funcionan, otras veces son sobrescritos por theme.css, o simplemente desaparecen después de que borro la caché del servidor o del navegador. Parece que no se cargan de forma fiable.

He intentado forzar la carga de este archivo mediante una sobrescritura del FrontController, pero no me parece la solución más limpia y sigo teniendo problemas. Adjunto el código de mi intento:

class FrontController extends FrontControllerCore
{
    public function initContent()
    {
        parent::initContent();
        // Intentando forzar la carga de custom.css
        $this->context->controller->addCSS(_PS_THEME_DIR_ . 'assets/css/custom.css', 'all', null, false);
    }
}

Esto está en override/controllers/front/FrontController.php. ¿Hay alguna manera más correcta y segura de asegurarse de que custom.css siempre se cargue y tenga prioridad?

manuelhub

@ana_cart, tu enfoque de sobrescribir FrontControllerCore para inyectar CSS no es lo más recomendable. Esa clase es fundamental y cualquier cambio ahí puede traer efectos secundarios inesperados o conflictos con otros módulos. Además, _PS_THEME_DIR_ no es la forma estándar de addCSS que espera rutas relativas a _PS_ROOT_DIR_ o al módulo.

El tema Classic ya tiene un mecanismo integrado para cargar custom.css. Me suena más a un problema de caché o de especificidad CSS. ¿Qué versión exacta de PrestaShop estás usando? ¿Y has probado a limpiar la caché de PrestaShop (en Parámetros Avanzados > Rendimiento) y luego la caché de tu navegador (Ctrl+F5 o modo incógnito)? Muchas veces es eso.

Milo

Hola @ana_cart, @manuelhub tiene razón. Sobrescribir FrontControllerCore no es la forma adecuada para gestionar la carga de custom.css. PrestaShop 8 (incluyendo tu versión 8.1.4, asumo) y el tema Classic están diseñados para cargar automáticamente el archivo themes/classic/assets/css/custom.css. Esto se hace a través del hook actionFrontControllerSetMedia, que es el punto correcto para que los controladores y módulos registren sus assets.

Si tus estilos en custom.css no se aplican, casi siempre es por uno de estos motivos:

Caché del Navegador: Es el más común. Incluso después de limpiar la caché de PrestaShop, tu navegador podría estar sirviendo una versión antigua del CSS. Prueba con una recarga forzada (Ctrl+F5 o Cmd+Shift+R) o en una ventana de incógnito.
Especificidad CSS: Las reglas de theme.css pueden tener una especificidad mayor que las tuyas. Usa las herramientas de desarrollo del navegador (F12) para inspeccionar los elementos y ver qué reglas se están aplicando y de dónde vienen. Asegúrate de que tus selectores en custom.css sean igual o más específicos.
Errores en el CSS: Un error de sintaxis en tu custom.css podría impedir que las reglas subsiguientes se apliquen correctamente.

La solución correcta para custom.css NO requiere ningún código PHP adicional. Solo necesitas colocar tus reglas CSS válidas en themes/classic/assets/css/custom.css. Si por alguna razón tuvieras que añadir un archivo CSS propio de un módulo, el hook actionFrontControllerSetMedia es el correcto, utilizando registerStylesheet para asegurar la carga y la prioridad. Por ejemplo:

// En tu módulo (ej. /modules/mimodulocss/mimodulocss.php)
class MiModuloCss extends Module
{
    // ... constructor y métodos install/uninstall ...
    public function hookActionFrontControllerSetMedia($params)
    {        
        $this->context->controller->registerStylesheet(
            'mimodulocss-styles',
            'modules/' . $this->name . '/views/css/mimodulocss.css',
            [

Pero para custom.css, insisto, elimina la sobrescritura y concéntrate en la caché y la especificidad.

ana_cart

¡Muchísimas gracias, @Milo y @manuelhub!

Tenéis toda la razón. He quitado la sobrescritura de FrontController que había hecho. He revisado a fondo mi custom.css en themes/classic/assets/css/custom.css y me he dado cuenta de que algunos selectores no eran lo suficientemente específicos y, sobre todo, la caché del navegador me estaba jugando una mala pasada.

Después de limpiar la caché de PrestaShop y forzar la recarga en el navegador (¡varias veces!), ahora mis estilos se aplican correctamente y persisten. El ejemplo que has dado, @Milo, sobre hookActionFrontControllerSetMedia es muy útil para futuros módulos. ¡Problema resuelto, gracias por la ayuda tan clara y rápida!