En Prestashop 1.7, podemos querer añadir estilos particulares a nuestras páginas estáticas o páginas CMS. Es más, podemos querer aplicar estilos particulares a una página CMS concreta y no al resto. Por ejemplo, la página de Quiénes somos puede requerir CSS que no es necesario para la página de Aviso Legal, podemos querer poner un slider en una página CMS, pero que no aparezca en todas, podemos querer quitar la migas de pan en una página CMS determinada o hacer su cabecera transparente, etc. Aquí os explicamos cómo hacerlo.

AÑADIR ESTILO CSS A TODAS LAS PÁGINAS CMS DE PRESTASHOP 1.7

Si queremos añadir un estilo para todas las páginas CMS, es muy sencillo y no requiere de mayor explicación.

La etiqueta body tendrá tanto el id “cms” como la clase “cms”, con que basta con que añadamos en nuestro CSS ese id o esa clase antes de cualquier elemento al que queramos dar estilo. Por ejemplo, si queremos que los títulos h1 de las páginas CMS tengan un tamaño de 30px añadiríamos esta regla CSS:

#cms h1 {
font-size: 30px;
}

o esta otra

.cms h1 {
font-size: 30px;
}

 

AÑADIR ESTILO CSS A UNA PÁGINA CMS CONCRETA EN PRESTASHOP 1.7

Habrá que indicar que ese estilo sólo afecte a la página CMS con un determinado id.

¿Cómo podemos saber cuál es el id asociado a una página CMS?

Podemos ver el id en la URL de esa página, en el front end, en la barra de direcciones. Es justo el numero que viene antes del slug de la página.

Podemos ver el id en el listado de páginas del backend, en el listado de páginas, en la columna ID.

En ambas imágenes, vemos, por ejemplo, cómo el ID de la página de quiénes somos es el “4”.

Dicho esto, si queremos modificar estilos del contenido de la página CMS, será muy fácil. Y con “contenido de la página CMS” me refiero a todo lo que metemos dentro del editor de texto al editar la página. En el front end, será el contenido que quede debajo del título de página (sin incluir el título de página). Es fácil porque la plantilla de Prestashop incluye, por defecto, el id de la página cms asociado a la sección de contenido. Podemos verlo en la siguiente imagen, en la que estamos inspeccionando el elemento en cuestión y viendo el código fuente en la consola del navegador:

 

Como podemos ver en la imagen, se usa la clase page-cms-4 que contiene el id de la página CMS que estamos editando, que en nuestro ejemplo es la página Quiénes somos con ID=4.

Para poner el color del texto azul, por ejemplo, deberíamos editar el archivo custom.css de nuestra plantilla o editar el css en el campo de CSS personalizado que ya traen muchísmas plantillas y que resulta mucho más cómodo. Añadiríamos:

.page-cms-4 {
color: blue !important;
}

El “!important” es opcional. De hecho, os recomiendo probar primero sin ponerlo, pero si no veis los resultados deseados, probad a ponerlo para que dé prioridad a esa regla.

A veces esto se nos puede quedar un poco corto porque hay veces que no sólo necesitamos dar estilo al contenido de la página CMS sino a toda la página en cuestión: al título, al fondo, a algún slider que hayamos añadido en esa página, etc. Prodemos solventar este problema, pero ahora sí que nos tocará modificar algo del código fuente de la plantilla: será sólo una pequeña modificación en un único archivo.

Nos dirigiremos, usando un programa de FTP (Filezilla, por ejemplo) a la carpeta:

/themes/nombre-de-tu-plantilla/templates/layouts

y editaremos el archivo:

layout-both-columns.tpl

y en la etiqueta body, veremos que el atributo class tiene una serie de valores, dependiendo de la plantilla:

<body id="{$page.page_name}" class="............lo que sea .............."

lo sustituiremos por:

<body id="{$page.page_name}" class="............lo que sea .............. {if $page.page_name == 'cms'} cms-id-{$cms.id}{/if}"

Es decir, añadiremos un nuevo valor al atributo class de la etiqueta body. Este nuevo  valor sólo será añadido si la página actual es de tipo CMS ({if $page.page_name == 'cms'}) y el valor añadido contendrá el ID de la página CMS actual; en nuestro ejemplo el ID era el 4, por lo que el valor añadido sería: cms-id-4.

Con esto abremos conseguido asignar una clase a toda la etiqueta body de la página en la que distingamos el ID de la página CMS concreta. Podremos utilizar esa clase en nuestro editor de estilos o archivo css para darle el estilo deseado a cualquier elemento de dentro del body. Esto nos permite poner el título de la página de un derterminado color o poner un fondo (background) distinto para cada una de las páginas o para una en concreta.

Por ejemplo, así pondríamos el título de la página de Quiénes somos en azul:

.cms-id-4 h1 {
color: blue !important;
}

Esperamos que os sea de utilidad esta información y que os ahorre algo de tiempo =)