Con páginas de contenido, me refiero a lo que conocemos en antaño como páginas CMS, que en Prestashop 1.7 las creamos en la pestaña Diseño => Páginas (recordar información).
Imaginemos que hemos creado una página de contenidos en la pestaña Diseño => Páginas, donde queremos mostrar lo que veamos conveniente, pero queremos que esa página no tenga el fondo blanco que viene por defecto, pero que si lo mantenga el resto de las páginas. (Vuelvo a recordar que estamos hablando de los contenidos que creamos en la pestaña Diseño => Páginas)
Así lo vemos por defecto:
Así quiero dejarlo:
En mi ejemplo, quiero que directamente tome el fondo del contenedor. Pero recuerdo, que quiero que solo se aplique a esta página de contenidos específica, no al resto, como puede ser la página de aviso legal, condiciones de envió, etc.
Desde inspeccionar elemento en Chrome (botón derecho ratón => inspeccionar), vemos dos aspectos a estudiar.
Por un lado, vemos una regla en el fichero theme.css de la plantilla, donde viene establecido dicho fondo.
Dentro de .page-content.page-cms => background: #fff;
Y, por otro lado, vemos en el código, que imprime el id de la página de contenidos (cms)
Que corresponde con el id de la página de contenidos actual.
El número, que hemos señalado en la captura, corresponde al id de la página de contenidos que estamos visualizando, por lo tanto, conociendo ese ID vamos a crear una regla específica, pero antes de hacerlo, y si tenéis curiosidad, si vamos al fichero:
/themes/classic/templates/cms/page.tpl
Vemos que se encuentra la parte que hemos señalado la imagen, que mostraba código html en la consola del navegador, donde imprimía el id de la página de contenidos (CMS)
Lo que vamos a hacer ahora, es crear una regla específica para la página de contenidos con ID 6.
Para ello, simplemente, vamos al fichero:
/themes/classic/assets/css/custom.css
Y añadimos nuestra regla:
.page-content.page-cms.page-cms-6 { background: codigo_color; }
Por ejemplo, queremos mostrar el fondo rojo:
.page-content.page-cms.page-cms-6 { background: #ff0404; }
Si queremos que tome el fondo del contenedor, pues lo dejamos así:
.page-content.page-cms.page-cms-6 { background: initial; }
PD: También, podemos dejarlo en background:none; o background:transparent;
Evidentemente, si queremos que el cambio se aplique a todas las páginas de contenidos (CMS) y no solo a la que hemos creado, haríamos directamente el cambio sobre:
.page-content.page-cms { background: codigo_color; }
Recuerdo, que estamos creando nuestras propias reglas de estilos en el fichero custom.css de la plantilla.
Tras hacer los cambios en el fichero custom.css, recordar limpiar la caché de vuestro navegador (repito, del navegador), y si siguen sin aparecer los cambios tras borrar la caché del navegador, probar limpiar la caché de Prestashop en la pestaña Parámetros Avanzados => Rendimiento (botón borrar caché).
Documento creado bajo Prestashop 1.7.4.2 con la plantilla por defecto.
Actualización del artículo (1)
Fijaros también, que podemos coger la clase directamente del body.
Vemos que el body tiene asignada la clase => cms-id-6 (recuerdo que el 6 es el id de la página de contenidos donde nos encontramos situados). Con esta clase también podemos jugar en el CSS (obviamente estaríamos situados en un nivel superior).
