Cambiar colores e iconos de página de inicio Prestashop

Vamos a cambiar el color de una pequeña parte de la página de inicio de Prestashop, en la plantilla o tema por defecto. También haremos una modificación en un archivo de la plantilla cambiado su código HTML.



1 – Cambiar el color de los iconos

cambiar-color-prestashop-inicio

Para ello tendremos que modificar un archivo CSS de nuestra plantilla para añadir las siguientes líneas:


#cmsinfo_block em {
background-color:blue!important;
}

O bien buscar en el archivo (el inspector de código del navegador nos puede ayudar) la declaración # y modificar la línea relatica al color de fondo (cuidado con la sintaxis, no olvidéis los ; al final de las propiedades).


#cmsinfo_block em {
(...)
background-color:blue;
(...)
}

La ruta del archivo a modificar es la siguiente:
directorio-de-tu-tienda  /themes/css/global.css 

Recordamos y añadimos que…

En este caso, la información que vamos a editar no corresponde a ningún módulo, por lo que su CSS está en el archivo global.css del tema.

Recomendamos hacer copia de seguridad del archivo y trabajar sobre un tema hijo.

2 – Añadir el logotipo de Whatsapp – cambiar los iconos

cmsinfo-bo-configuracion2

[sociallocker]

Aunque el CSS de esta parte de la página de inicio está declarado en el archivo global.css, el código HTML se declara en un módulo llamado block cmsinfo,
que aparece así en el Back-Office:

block cmsinfo desde el bo

Pulsamos en configurar, luego tendremos que modificar el código fuente:

cmsinfo bo configuracion

codigofuente

Esta es la parte a modificar:

<ul>
<li><em id="icon-phone" class="icon-phone"></em>
(…)

<ul>
<li><em id="icon-whatsapp" class="icon-phone"></em>
(…)

Recordamos y añadimos que…

Si aún no dominas HTML y CSS, ya va siendo hora… Tenemos una categoría en nuestro sitio: http://likonet.es/category/diseno-web/css/

Si quieres saber más sobre esta forma de colocar iconos en una página web, te recomendamos la documentación de FontAwesome

¡Gracias por compartir!

[/sociallocker]

Relacionada: Modificar plantilla de Prestashop

Write a Reply or Comment

Your email address will not be published.