Fondo según página de contenidos en Prestashop

Fondo independiente en las páginas de contenido en Prestashop

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:

Página de contenidos en Prestashop 1.7
Página de contenidos en Prestashop 1.7

Así quiero dejarlo:

Resultado final

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.

Consola navegador

Por un lado, vemos una regla en el fichero theme.css de la plantilla, donde viene establecido dicho fondo.

Regla CSS

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)

Código html en navegador

Que corresponde con el id de la página de contenidos actual.

ID página
ID página

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)

page.tpl

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; }

CSS personalizado

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; }

Estilo para todas

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.

Clase asignada al 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).

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *