En este post, quiero enseñaros como aplicar efectos hover ha vuestras plantillas prestashop, algo fácil y rápido y que seguro despertara la imaginación de muchos de vosotros.
Aquí tienes el ejemplo de los efectos que vamos a poder aplicar a todas las partes de nuestra web.
Lo primero que necesitamos es descargar el paquete Hover del proyecto en Github.
Una vez lo tenemos descargado, vamos a descomprimirlo en la carpeta de nuestro theme. (ojo, yo le he cambiado el nombre a la carpeta y ahora se llama hover)
theme/mi_plantilla/
Ahora nos vamos a la carpeta raíz de nuestra plantilla y abrimos nuestro header.tpl
theme/mi_plantilla/header.tpl
Copiamos esto
<link rel="stylesheet" href="/themes/default-bootstrap/hover/css/hover.css" type="text/css" />
Y lo pegamos entre las etiquetas <head> y </head> de nuestro header.tpl
Si lo todo ha ido bien, solo tenemos que abrir nuestra pagina web y añadir la ruta de la carpera. /themes/default-bootstrap/hover/index.html
En nuestro caso, como hemos instalado prestashop dentro de la carpeta demos, la ruta correcta seria la siguiente:
http://tiendasprestashop.es/demos/themes/default-bootstrap/hover/index.html
Como aplicarlo a tu plantilla
Para aplicar los efectos a nuestra plantilla tendras que modificar los archivos .tpl
En este vídeo, te enseñamos como aplicar y cambiar los efectos hover de la plantilla default-boostrap-hover, con el inspector de elementos en el navegador Google Chrome.
Espero que les guste
“Algunas personas sueñan con hacer grandes cosas, mientras otras están despiertas y las hacen”.
Divertidos y bonitos efectos y tal como dices con un poco de imaginacion se pueden hacer cosas expectaculares.
Gracias por el aporte.
Telegram:@Josraso
Correo
Qué chulos! Muchas gracias, hay gente enorme en este foro (L)
Lo que sabemos es una gota de agua; lo que ignoramos es el océano!!